@operato/input 1.1.21 → 1.1.23

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.23](https://github.com/hatiolab/operato/compare/v1.1.22...v1.1.23) (2022-12-04)
+
+
+### :bug: Bug Fix
+
+* add ox-input-mass-fraction ([6d52d4d](https://github.com/hatiolab/operato/commit/6d52d4d456bf4b405964b5b46f79e97cba6ba64e))
+
+
+
 ### [1.1.21](https://github.com/hatiolab/operato/compare/v1.1.20...v1.1.21) (2022-12-01)
 
 

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

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import '@operato/popup/ox-popup-list.js';
+import { OxFormField } from './ox-form-field';
+import './ox-select.js';
+declare const FLUIDS: string[];
+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>
+ */
+export declare class OxInputMassFraction extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    defaultValue: MassFraction;
+    value: MassFraction;
+    private options;
+    private changingNow;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onChange(e: Event): void;
+    _normalize(): void;
+    _build(includeNewRecord?: boolean): void;
+    _toArray(map: MassFraction): ArrayedMassFraction;
+    _add(): void;
+    _delete(e: MouseEvent): void;
+    records: NodeListOf<HTMLElement>;
+    _up(e: MouseEvent): void;
+    _down(e: MouseEvent): void;
+    dispatchChangeEvent(): void;
+}
+export {};

package/dist/src/ox-input-mass-fraction.js

@@ -0,0 +1,434 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+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'
+];
+/**
+ input component for mass-fraction map
+ 
+ Example:
+ 
+   <ox-input-mass-fraction
+     value=${map}
+   </ox-input-mass-fraction>
+ */
+let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.defaultValue = {};
+        this.value = {};
+        this.options = FLUIDS.map(fluid => html `<div option value=${fluid}>${fluid}</div>`);
+        this.changingNow = false;
+    }
+    static { this.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;
+      }
+    `
+    ]; }
+    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) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e) => this._up(e)} tabindex="-1" ?disabled=${idx === 0}>
+              <mwc-icon>arrow_upward</mwc-icon>
+            </button>
+            <button
+              class="record-action"
+              @click=${(e) => 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) => {
+            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) => 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) {
+        if (this.changingNow) {
+            return;
+        }
+        this.changingNow = true;
+        const input = e.target;
+        const record = e.target.closest('[data-record],[data-record-new]');
+        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 = 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;
+        }, {});
+        this.dispatchChangeEvent();
+    }
+    _build(includeNewRecord) {
+        if (includeNewRecord) {
+            var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
+        }
+        else {
+            var records = this.renderRoot.querySelectorAll('[data-record]');
+        }
+        var newmap = {};
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            const key = record.querySelector('[data-key]').value;
+            const inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])');
+            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) {
+        var array = [];
+        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"])');
+        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) {
+        const record = e.target.closest('[data-record]');
+        record.querySelector('[data-key]').value = '';
+        this._build();
+    }
+    _up(e) {
+        const record = e.target.closest('[data-record]');
+        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]').value;
+            const value = record.querySelector('[data-value]').value;
+            sum[key] = Number(value) || 0;
+            return sum;
+        }, {});
+        this.dispatchChangeEvent();
+    }
+    _down(e) {
+        const record = e.target.closest('[data-record]');
+        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]').value;
+            const value = record.querySelector('[data-value]').value;
+            sum[key] = Number(value) || 0;
+            return sum;
+        }, {});
+        this.dispatchChangeEvent();
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputMassFraction.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputMassFraction.prototype, "value", void 0);
+__decorate([
+    queryAll('[data-record]')
+], OxInputMassFraction.prototype, "records", void 0);
+OxInputMassFraction = __decorate([
+    customElement('ox-input-mass-fraction')
+], OxInputMassFraction);
+export { OxInputMassFraction };
+//# sourceMappingURL=ox-input-mass-fraction.js.map

package/dist/src/ox-input-mass-fraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-mass-fraction.js","sourceRoot":"","sources":["../../src/ox-input-mass-fraction.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field'\nimport './ox-select.js'\n\nconst FLUIDS = [\n  '1-Butene',\n  'Acetone',\n  'Air',\n  'Ammonia',\n  'Argon',\n  'Benzene',\n  'CO2',\n  'CarbonMonoxide',\n  'CarbonylSulfide',\n  'CycloHexane',\n  'CycloPropane',\n  'Cyclopentane',\n  'D4',\n  'D5',\n  'D6',\n  'Deuterium',\n  'Dichloroethane',\n  'DiethylEther',\n  'DimethylCarbonate',\n  'DimethylEther',\n  'Ethane',\n  'Ethanol',\n  'EthylBenzene',\n  'Ethylene',\n  'EthyleneOxide',\n  'Fluorine',\n  'HFE143m',\n  'HeavyWater',\n  'Helium',\n  'Hydrogen',\n  'HydrogenChloride',\n  'HydrogenSulfide',\n  'IsoButane',\n  'IsoButene',\n  'Isohexane',\n  'Isopentane',\n  'Krypton',\n  'MD2M',\n  'MD3M',\n  'MD4M',\n  'MDM',\n  'MM',\n  'Methane',\n  'Methanol',\n  'MethylLinoleate',\n  'MethylLinolenate',\n  'MethylOleate',\n  'MethylPalmitate',\n  'MethylStearate',\n  'Neon',\n  'Neopentane',\n  'Nitrogen',\n  'NitrousOxide',\n  'Novec649',\n  'OrthoDeuterium',\n  'OrthoHydrogen',\n  'Oxygen',\n  'ParaDeuterium',\n  'ParaHydrogen',\n  'Propylene',\n  'Propyne',\n  'R11',\n  'R113',\n  'R114',\n  'R115',\n  'R116',\n  'R12',\n  'R123',\n  'R1233zd(E)',\n  'R1234yf',\n  'R1234ze(E)',\n  'R1234ze(Z)',\n  'R124',\n  'R1243zf',\n  'R125',\n  'R13',\n  'R134a',\n  'R13I1',\n  'R14',\n  'R141b',\n  'R142b',\n  'R143a',\n  'R152A',\n  'R161',\n  'R21',\n  'R218',\n  'R22',\n  'R227EA',\n  'R23',\n  'R236EA',\n  'R236FA',\n  'R245ca',\n  'R245fa',\n  'R32',\n  'R365MFC',\n  'R40',\n  'R404A',\n  'R407C',\n  'R41',\n  'R410A',\n  'R507A',\n  'RC318',\n  'SES36',\n  'SulfurDioxide',\n  'SulfurHexafluorid',\n  'Toluene',\n  'Water',\n  'Xenon',\n  'cis-2-Butene',\n  'm-Xylene',\n  'n-Butane',\n  'n-Decane',\n  'n-Dodecane',\n  'n-Heptane',\n  'n-Hexane',\n  'n-Nonane',\n  'n-Octane',\n  'n-Pentane',\n  'n-Propane',\n  'n-Undecane',\n  'o-Xylene',\n  'p-Xylene',\n  'trans-2-Butene'\n]\n\ntype ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]\n  ? ElementType\n  : never\n\ntype FLUID = ArrayElement<typeof FLUIDS>\n\ntype MassFraction = { [key: FLUID]: number }\ntype ArrayedMassFraction = { key: FLUID; value: number }[]\n\n/**\n input component for mass-fraction map\n \n Example:\n \n   <ox-input-mass-fraction \n     value=${map}\n   </ox-input-mass-fraction>\n */\n@customElement('ox-input-mass-fraction')\nexport class OxInputMassFraction extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n\n      :host > div {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--mass-fraction-gap, 4px);\n        margin-bottom: var(--margin-narrow);\n      }\n\n      button {\n        border: var(--button-border);\n        border-radius: var(--border-radius);\n        background-color: var(--button-background-color);\n        padding: var(--mass-fraction-button-padding-vertical, 2px) var(--mass-fraction-button-padding-horizontal, 4px);\n        color: var(--button-color);\n        cursor: pointer;\n      }\n      button mwc-icon {\n        font-size: var(--fontsize-default);\n      }\n      button:focus,\n      button:hover,\n      button:active {\n        border: var(--button-activ-border);\n        background-color: var(--button-background-focus-color);\n        color: var(--theme-white-color);\n      }\n\n      input,\n      ox-select {\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      [data-key] {\n        flex: 2;\n      }\n\n      [data-value] {\n        flex: 1;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      button.hidden {\n        opacity: 0;\n        cursor: default;\n      }\n\n      ox-popup-list {\n        max-height: 300px;\n        overflow: auto;\n        left: 0;\n      }\n    `\n  ]\n\n  @property({ type: Object }) defaultValue: MassFraction = {}\n  @property({ type: Object }) value: MassFraction = {}\n\n  private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)\n  private changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n    const arrayed = this._toArray(value)\n\n    return html`\n      ${arrayed.map(\n        (item, idx) => html`\n          <div data-record>\n            <input type=\"text\" data-key .value=${item.key} disabled />\n            <input\n              type=\"number\"\n              data-value\n              placeholder=\"fraction\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              .value=${String(item.value)}\n              list=\"value-template\"\n            />\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\" ?disabled=${idx === 0}>\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._down(e)}\n              tabindex=\"-1\"\n              ?disabled=${idx === arrayed.length - 1}\n            >\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <ox-select\n          data-key\n          placeholder=\"fluid\"\n          .value=${live('')}\n          @change=${(e: Event) => {\n            e.stopPropagation()\n          }}\n        >\n          <ox-popup-list with-search> ${this.options} </ox-popup-list>\n        </ox-select>\n\n        <input\n          type=\"number\"\n          data-value\n          placeholder=\"proportion\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value=\"\"\n          list=\"value-template\"\n        />\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button\n          title=\"fill with the values suggested\"\n          @click=${() => {\n            this.value = { ...this.defaultValue }\n            this.dispatchChangeEvent()\n          }}\n        >\n          <mwc-icon>settings_suggest</mwc-icon>\n        </button>\n        <button\n          title=\"normalize fraction\"\n          @click=${() => {\n            this._normalize()\n          }}\n        >\n          <mwc-icon>repartition</mwc-icon>\n        </button>\n      </div>\n    `\n  }\n\n  _onChange(e: Event) {\n    if (this.changingNow) {\n      return\n    }\n\n    this.changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n    if (record.hasAttribute('data-record')) {\n      this._build()\n    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this.changingNow = false\n  }\n\n  _normalize() {\n    const fraction: MassFraction = this.value || {}\n    const sum = Object.values(fraction).reduce((a, b) => a + b, 0)\n    this.value = Object.keys(fraction).reduce((newvalue, key) => {\n      newvalue[key] = fraction[key] / sum\n      return newvalue\n    }, {} as MassFraction)\n\n    this.dispatchChangeEvent()\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: MassFraction = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const inputs = record.querySelectorAll(\n        '[data-value]:not([style*=\"display: none\"])'\n      ) as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      var input = inputs[inputs.length - 1]\n\n      var value = input.value\n\n      if (key) {\n        newmap[key] = Number(value) || 0\n      }\n    }\n\n    this.value = newmap\n\n    this.dispatchChangeEvent()\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map: MassFraction) {\n    var array: ArrayedMassFraction = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      if (input.type == 'checkbox') input.checked = false\n      else input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = Number(value) || 0\n      return sum\n    }, {} as MassFraction)\n\n    this.dispatchChangeEvent()\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = Number(value) || 0\n      return sum\n    }, {} as MassFraction)\n\n    this.dispatchChangeEvent()\n  }\n\n  dispatchChangeEvent() {\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist/src/ox-input-unit-number.js

@@ -169,6 +169,7 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
         padding: var(--input-padding);
         font: var(--input-font);
         color: var(--primary-text-color);
+        min-width: 120px;
       }
 
       input:focus {
@@ -192,6 +193,7 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
         margin-left: var(--margin-narrow);
         font: var(--label-font);
         color: var(--label-color);
+        min-width: 24px;
       }
     `
     ]; }

package/dist/src/ox-input-unit-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-unit-number.js","sourceRoot":"","sources":["../../src/ox-input-unit-number.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field'\n\nconst UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] } } = {\n  kg: {\n    mg: 1000000,\n    g: 1000,\n    ton: 0.001\n  },\n  rad: {\n    degree: 180 / Math.PI\n  },\n  sec: {\n    msec: 1000,\n    min: 1 / 60,\n    hr: 1 / 3600,\n    day: 1 / (3600 * 24),\n    year: 1 / (3600 * 24 * 365)\n  },\n  m: {\n    mm: 1000,\n    cm: 100,\n    inch: 39.37008\n  },\n  'g/mol': {\n    'kg/kmol': 1,\n    'g/kmol': 1000\n  },\n  m2: {\n    mm2: 1000000,\n    cm2: 1000\n  },\n  m3: {\n    cm3: 1000000,\n    L: 1000,\n    mL: 1000000\n  },\n  'kg/m3': {\n    'g/m3': 1000,\n    'g/L': 1,\n    'g/cm3': 0.001,\n    'kg/L': 0.001,\n    'g/mL': 0.001\n  },\n  'm/sec': {\n    'm/min': 60,\n    'm/hr': 3600,\n    'cm/sec': 100,\n    'cm/min': 6000,\n    'cm/hr': 360000\n  },\n  N: {\n    kN: 0.001,\n    kgf: 0.101971621\n  },\n  Pa: {\n    atm: 1 / 101325,\n    bar: 1 / 100000,\n    'kgf/cm2': 1 / 9.80665 / 10000,\n    MPa: 1 / 1000000,\n    kPa: 1 / 1000,\n    psi: 1 / 6894.76,\n    mmH2O: 1 / 9.80665,\n    mmHg: 1 / 133.32\n  },\n  'kg/sec': {\n    'kg/min': 60,\n    'kg/hr': 3600,\n    'ton/hr': 3.6,\n    'ton/year': (60 * 60 * 24 * 365) / 1000\n  },\n  'kg/m2/sec': {\n    'kg/m2/min': 60,\n    'kg/m2/hr': 3600\n  },\n  'mol/sec': {\n    'kmol/sec': 1 / 1000\n  },\n  'mol/m2/sec': {\n    'kmol/m2/sec': 1 / 1000\n  },\n  'Sm3/sec': {\n    'Sm3/hr': 3600,\n    'Sm3/min': 60,\n    'SL/min': 60000,\n    'SL/sec': 1000,\n    'Scm3/min': 60000000,\n    'Scm3/sec': 1000000\n  },\n  'Nm3/sec': {\n    'Am3/hr': 3600,\n    'Am3/min': 60,\n    'AL/min': 60000,\n    'AL/sec': 1000,\n    'Acm3/min': 60000000,\n    'Acm3/sec': 1000000\n  },\n  J: {\n    kJ: 1 / 1000,\n    MJ: 1 / 1000000,\n    cal: 1 / 4.184,\n    kcal: 1 / 4.184 / 1000\n  },\n  W: {\n    kW: 1 / 1000,\n    MW: 1 / 1000000,\n    'kcal/hr': 859.85 / 1000,\n    hp: 1 / 745.7\n  },\n  'W/m2': {\n    'kW/m2': 1 / 1000,\n    'W/cm2': 1 / 10000,\n    'kW/cm2': 1 / 10000000\n  },\n  'J/kg': {\n    'kJ/kg': 1 / 1000,\n    'cal/g': 1 / 4.184 / 1000,\n    'cal/kg': 1 / 4.184,\n    'kcal/kg': 1 / 4.184 / 1000\n  },\n  'J/kg/K': {\n    'kJ/kg/K': 1 / 1000,\n    'cal/kg/K': 1 / 4.184,\n    'kcal/kg/K': 1 / 4.184 / 1000,\n    'cal/g/K': 1 / 4.184 / 1000\n  },\n  'W/m/K': {\n    'kW/m/K': 1 / 1000,\n    'W/cm/K': 1 / 100,\n    'kW/cm/K': 1 / 100 / 1000\n  },\n  'W/m2/K': {\n    'kW/m2/K': 1 / 1000,\n    'kcal/hr/m2/oC': 1 / 1.163\n  },\n  'N sec/m2': {\n    'Pa sec': 1,\n    'mPa sec': 1000,\n    'kg/m/sec': 1,\n    'g/cm/sec': 10,\n    P: 10,\n    cP: 1000\n  },\n  'm2 oC/W': {\n    'm2 oC/kW': 1000\n  },\n  K: {\n    C: [(v: number) => v - 273.15, (v: number) => v + 273.15]\n  }\n}\n\n@customElement('ox-input-unit-number')\nexport class OxInputUnit extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      input::-webkit-outer-spin-button,\n      input::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      input[type='number'] {\n        -moz-appearance: textfield;\n      }\n\n      #unit {\n        display: inline;\n        position: relative;\n        margin-left: var(--margin-narrow);\n        font: var(--label-font);\n        color: var(--label-color);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string\n  @property({ type: String, attribute: 'user-unit' }) userUnit?: string\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup-list') popup!: OxPopupList\n\n  render() {\n    const userUnit = this.userUnit || this.stdUnit\n    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])\n    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1\n\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toUserUnit(this.value)}\n        placeholder=${ifDefined(this.placeholder)}\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n      <div\n        id=\"unit\"\n        @click=${(e: Event) => {\n          const target = e.currentTarget as HTMLElement\n          this.popup.open({\n            right: 0,\n            top: target.clientTop + target.offsetHeight\n          })\n        }}\n      >\n        ${userUnit}\n        <ox-popup-list\n          .value=${userUnit}\n          @select=${(e: CustomEvent) => {\n            this.userUnit = e.detail\n          }}\n        >\n          <div option value=${this.stdUnit}>${this.stdUnit}</div>\n          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}\n        </ox-popup-list>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('stdUnit')) {\n      this.userUnit = this.stdUnit\n    }\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toStdUnit(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toUserUnit(stdValue: string | number | undefined) {\n    if (!this.userUnit) {\n      return\n    }\n\n    if (this.userUnit === this.stdUnit) {\n      return Number(stdValue)\n    }\n\n    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n    if (typeof converterValue === 'number') {\n      return this._toUserUnitByRate(stdValue, converterValue || 1)\n    } /* should be converter function array */ else {\n      return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])\n    }\n  }\n\n  _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {\n    return Number(stdValue) * converterRate\n  }\n\n  _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n    return converterFunctions[0](Number(stdValue))\n  }\n\n  _toStdUnit(userValue: string | number | undefined) {\n    if (!this.userUnit) {\n      return\n    }\n\n    if (this.userUnit === this.stdUnit) {\n      return Number(userValue)\n    }\n\n    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n    if (typeof converterValue === 'number') {\n      return this._toStdUnitByRate(userValue, converterValue || 1)\n    } /* should be converter function array */ else {\n      return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])\n    }\n  }\n\n  _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {\n    return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate\n  }\n\n  _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n    return converterFunctions[1](Number(userValue))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-unit-number.js","sourceRoot":"","sources":["../../src/ox-input-unit-number.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field'\n\nconst UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] } } = {\n  kg: {\n    mg: 1000000,\n    g: 1000,\n    ton: 0.001\n  },\n  rad: {\n    degree: 180 / Math.PI\n  },\n  sec: {\n    msec: 1000,\n    min: 1 / 60,\n    hr: 1 / 3600,\n    day: 1 / (3600 * 24),\n    year: 1 / (3600 * 24 * 365)\n  },\n  m: {\n    mm: 1000,\n    cm: 100,\n    inch: 39.37008\n  },\n  'g/mol': {\n    'kg/kmol': 1,\n    'g/kmol': 1000\n  },\n  m2: {\n    mm2: 1000000,\n    cm2: 1000\n  },\n  m3: {\n    cm3: 1000000,\n    L: 1000,\n    mL: 1000000\n  },\n  'kg/m3': {\n    'g/m3': 1000,\n    'g/L': 1,\n    'g/cm3': 0.001,\n    'kg/L': 0.001,\n    'g/mL': 0.001\n  },\n  'm/sec': {\n    'm/min': 60,\n    'm/hr': 3600,\n    'cm/sec': 100,\n    'cm/min': 6000,\n    'cm/hr': 360000\n  },\n  N: {\n    kN: 0.001,\n    kgf: 0.101971621\n  },\n  Pa: {\n    atm: 1 / 101325,\n    bar: 1 / 100000,\n    'kgf/cm2': 1 / 9.80665 / 10000,\n    MPa: 1 / 1000000,\n    kPa: 1 / 1000,\n    psi: 1 / 6894.76,\n    mmH2O: 1 / 9.80665,\n    mmHg: 1 / 133.32\n  },\n  'kg/sec': {\n    'kg/min': 60,\n    'kg/hr': 3600,\n    'ton/hr': 3.6,\n    'ton/year': (60 * 60 * 24 * 365) / 1000\n  },\n  'kg/m2/sec': {\n    'kg/m2/min': 60,\n    'kg/m2/hr': 3600\n  },\n  'mol/sec': {\n    'kmol/sec': 1 / 1000\n  },\n  'mol/m2/sec': {\n    'kmol/m2/sec': 1 / 1000\n  },\n  'Sm3/sec': {\n    'Sm3/hr': 3600,\n    'Sm3/min': 60,\n    'SL/min': 60000,\n    'SL/sec': 1000,\n    'Scm3/min': 60000000,\n    'Scm3/sec': 1000000\n  },\n  'Nm3/sec': {\n    'Am3/hr': 3600,\n    'Am3/min': 60,\n    'AL/min': 60000,\n    'AL/sec': 1000,\n    'Acm3/min': 60000000,\n    'Acm3/sec': 1000000\n  },\n  J: {\n    kJ: 1 / 1000,\n    MJ: 1 / 1000000,\n    cal: 1 / 4.184,\n    kcal: 1 / 4.184 / 1000\n  },\n  W: {\n    kW: 1 / 1000,\n    MW: 1 / 1000000,\n    'kcal/hr': 859.85 / 1000,\n    hp: 1 / 745.7\n  },\n  'W/m2': {\n    'kW/m2': 1 / 1000,\n    'W/cm2': 1 / 10000,\n    'kW/cm2': 1 / 10000000\n  },\n  'J/kg': {\n    'kJ/kg': 1 / 1000,\n    'cal/g': 1 / 4.184 / 1000,\n    'cal/kg': 1 / 4.184,\n    'kcal/kg': 1 / 4.184 / 1000\n  },\n  'J/kg/K': {\n    'kJ/kg/K': 1 / 1000,\n    'cal/kg/K': 1 / 4.184,\n    'kcal/kg/K': 1 / 4.184 / 1000,\n    'cal/g/K': 1 / 4.184 / 1000\n  },\n  'W/m/K': {\n    'kW/m/K': 1 / 1000,\n    'W/cm/K': 1 / 100,\n    'kW/cm/K': 1 / 100 / 1000\n  },\n  'W/m2/K': {\n    'kW/m2/K': 1 / 1000,\n    'kcal/hr/m2/oC': 1 / 1.163\n  },\n  'N sec/m2': {\n    'Pa sec': 1,\n    'mPa sec': 1000,\n    'kg/m/sec': 1,\n    'g/cm/sec': 10,\n    P: 10,\n    cP: 1000\n  },\n  'm2 oC/W': {\n    'm2 oC/kW': 1000\n  },\n  K: {\n    C: [(v: number) => v - 273.15, (v: number) => v + 273.15]\n  }\n}\n\n@customElement('ox-input-unit-number')\nexport class OxInputUnit extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 120px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      input::-webkit-outer-spin-button,\n      input::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      input[type='number'] {\n        -moz-appearance: textfield;\n      }\n\n      #unit {\n        display: inline;\n        position: relative;\n        margin-left: var(--margin-narrow);\n        font: var(--label-font);\n        color: var(--label-color);\n        min-width: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string\n  @property({ type: String, attribute: 'user-unit' }) userUnit?: string\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup-list') popup!: OxPopupList\n\n  render() {\n    const userUnit = this.userUnit || this.stdUnit\n    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])\n    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1\n\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toUserUnit(this.value)}\n        placeholder=${ifDefined(this.placeholder)}\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n      <div\n        id=\"unit\"\n        @click=${(e: Event) => {\n          const target = e.currentTarget as HTMLElement\n          this.popup.open({\n            right: 0,\n            top: target.clientTop + target.offsetHeight\n          })\n        }}\n      >\n        ${userUnit}\n        <ox-popup-list\n          .value=${userUnit}\n          @select=${(e: CustomEvent) => {\n            this.userUnit = e.detail\n          }}\n        >\n          <div option value=${this.stdUnit}>${this.stdUnit}</div>\n          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}\n        </ox-popup-list>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('stdUnit')) {\n      this.userUnit = this.stdUnit\n    }\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toStdUnit(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toUserUnit(stdValue: string | number | undefined) {\n    if (!this.userUnit) {\n      return\n    }\n\n    if (this.userUnit === this.stdUnit) {\n      return Number(stdValue)\n    }\n\n    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n    if (typeof converterValue === 'number') {\n      return this._toUserUnitByRate(stdValue, converterValue || 1)\n    } /* should be converter function array */ else {\n      return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])\n    }\n  }\n\n  _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {\n    return Number(stdValue) * converterRate\n  }\n\n  _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n    return converterFunctions[0](Number(stdValue))\n  }\n\n  _toStdUnit(userValue: string | number | undefined) {\n    if (!this.userUnit) {\n      return\n    }\n\n    if (this.userUnit === this.stdUnit) {\n      return Number(userValue)\n    }\n\n    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]\n\n    if (typeof converterValue === 'number') {\n      return this._toStdUnitByRate(userValue, converterValue || 1)\n    } /* should be converter function array */ else {\n      return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])\n    }\n  }\n\n  _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {\n    return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate\n  }\n\n  _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {\n    return converterFunctions[1](Number(userValue))\n  }\n}\n"]}

package/dist/src/ox-select.js

@@ -100,14 +100,13 @@ let Select = class Select extends OxFormField {
         });
     }
     async updated(changes) {
-        const popupList = this.querySelector('ox-popup-list');
+        // const popupList = this.querySelector('ox-popup-list') as OxPopupList
         if (changes.has('value')) {
             const popupList = this.querySelector('ox-popup-list');
             popupList.value = this.value;
             await this.requestUpdate();
             this.label = popupList.getSelectedLabels();
         }
-        this.label = popupList.getSelectedLabels();
     }
     expand() {
         const popupList = this.querySelector('ox-popup-list');