@operato/input 1.1.18 → 1.1.23

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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)
+
+
+### :bug: Bug Fix
+
+* hashtags style ([d2d5d22](https://github.com/hatiolab/operato/commit/d2d5d22d67bf8118d15f7df0f3662573ba57d9aa))
+
+
+
 ### [1.1.18](https://github.com/hatiolab/operato/compare/v1.1.17...v1.1.18) (2022-11-27)
 
 

package/dist/src/ox-input-hashtags.js

@@ -18,6 +18,11 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     #editor {
       display: block;
       box-sizing: border-box;
+      --hashtag-padding : 2px 4px;
+      --hashtag-background : rgba(var(--primary-color-rgb),.15);
+      --hashtag-background-hover : rgba(var(--primary-color-rgb),1);
+      --hashtag-closer-padding:0 2px 0 4px;
+      --hashtag-input-padding : 2px;
     }
 
     .tags {
@@ -25,26 +30,41 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     }
 
     .tag {
-      border-radius: 5px;
-      background-color: cyan;
-      color: #3e3e3e;
+      border-radius: var(--border-radius);
+      background-color: var(--hashtag-background);
+      padding:var(--hashtag-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      cursor:pointer;
     }
 
+    .tag:hover {
+      background-color: var(--hashtag-background-hover);
+      color: var(--theme-white-color) !important;
+    }
+    
     .closer {
-      color: red;
+      opacity:.3;
+      padding:var(--hashtag-closer-padding);
+      text-transform:uppercase;
+      color: var(--primary-text-color);
+    }
+    .tag:hover .closer{
+      opacity:.9;
+      color: var(--theme-white-color);
     }
 
     .input {
       display: inline-block;
+      color: var(--primary-text-color);
     }
 
     .input::before {
       display: inline;
       position: relative;
+      opacity:.5;
       top: -1px;
       content: '#';
-      color: #3e3e3e;
-      margin-right: 2px;
       vertical-align: middle;
     }
 
@@ -52,20 +72,22 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
       vertical-align: middle;
       -webkit-appearance: none;
       -webkit-text-size-adjust: none;
-      padding: 0;
+      padding: var(--hashtag-input-padding);
       border: 0;
+      border-bottom: var(--border-dark-color);
       outline: none;
-      color: #3e3e3e;
+      font-weight:bold;
     }
 
     input:focus {
       outline: none;
-      opacity: 1;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     .error {
-      padding: 0 5px;
-      color: #ea2136;
+      margin:var(--margin-narrow);
+      color: var(--status-danger-color);
+      font: var(--input-font);
       text-align: left;
     }
   `; }

package/dist/src/ox-input-hashtags.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n  static styles = css`\n    #editor {\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .tags {\n      display: inline-block;\n    }\n\n    .tag {\n      border-radius: 5px;\n      background-color: cyan;\n      color: #3e3e3e;\n    }\n\n    .closer {\n      color: red;\n    }\n\n    .input {\n      display: inline-block;\n    }\n\n    .input::before {\n      display: inline;\n      position: relative;\n      top: -1px;\n      content: '#';\n      color: #3e3e3e;\n      margin-right: 2px;\n      vertical-align: middle;\n    }\n\n    input {\n      vertical-align: middle;\n      -webkit-appearance: none;\n      -webkit-text-size-adjust: none;\n      padding: 0;\n      border: 0;\n      outline: none;\n      color: #3e3e3e;\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n\n    .error {\n      padding: 0 5px;\n      color: #ea2136;\n      text-align: left;\n    }\n  `\n\n  @property({ type: Array }) value: string[] = []\n  @property({ type: String }) placeholder: string = 'tag'\n  @query('input') input!: HTMLInputElement\n\n  @state() errors?: string | null\n\n  render() {\n    return html`\n      <div id=\"editor\" @click=${this.setHashtags}>\n        <div class=\"tags\">\n          ${repeat(\n            this.value,\n            tag => tag,\n            (tag, index) =>\n              html`\n                <span class=\"tag\">#${tag} <span @click=${() => this.removeHashtag(index)} class=\"closer\">x</span></span>\n              `\n          )}\n        </div>\n\n        <div class=\"input\">\n          <input type=\"text\" @keyup=${this.onInputKeyup} placeholder=\"태그입력\" />\n        </div>\n      </div>\n\n      ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n    `\n  }\n\n  private onInputKeyup(e: KeyboardEvent) {\n    e.stopPropagation()\n\n    const tag = this.input.value.trim()\n\n    switch (e.key) {\n      case 'Enter':\n      case 'Spacebar':\n        this.addHashtag(tag)\n        break\n      default:\n        this.errors = this.validate(tag)\n    }\n  }\n\n  async setHashtags() {\n    this.input.focus()\n  }\n\n  initErrors() {\n    this.errors = null\n  }\n\n  validate(newtag: string) {\n    if (this.value.some(tag => tag === newtag)) {\n      return msg('tag duplicated')\n    }\n\n    const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n    if (regex.test(newtag)) {\n      return msg('special characters not allowed')\n    }\n  }\n\n  async addHashtag(tag: string) {\n    if (!tag) {\n      this.initErrors()\n      this.input.focus()\n      return\n    }\n\n    this.errors = this.validate(tag)\n    if (this.errors) {\n      this.input.focus()\n      return\n    }\n\n    this.value = [...this.value, tag]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.errors = null\n    this.input.value = ''\n    this.input.focus()\n  }\n\n  removeHashtag(idx: number) {\n    this.value.splice(idx, 1)\n    this.value = [...this.value]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n  static styles = css`\n    #editor {\n      display: block;\n      box-sizing: border-box;\n      --hashtag-padding : 2px 4px;\n      --hashtag-background : rgba(var(--primary-color-rgb),.15);\n      --hashtag-background-hover : rgba(var(--primary-color-rgb),1);\n      --hashtag-closer-padding:0 2px 0 4px;\n      --hashtag-input-padding : 2px;\n    }\n\n    .tags {\n      display: inline-block;\n    }\n\n    .tag {\n      border-radius: var(--border-radius);\n      background-color: var(--hashtag-background);\n      padding:var(--hashtag-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      cursor:pointer;\n    }\n\n    .tag:hover {\n      background-color: var(--hashtag-background-hover);\n      color: var(--theme-white-color) !important;\n    }\n    \n    .closer {\n      opacity:.3;\n      padding:var(--hashtag-closer-padding);\n      text-transform:uppercase;\n      color: var(--primary-text-color);\n    }\n    .tag:hover .closer{\n      opacity:.9;\n      color: var(--theme-white-color);\n    }\n\n    .input {\n      display: inline-block;\n      color: var(--primary-text-color);\n    }\n\n    .input::before {\n      display: inline;\n      position: relative;\n      opacity:.5;\n      top: -1px;\n      content: '#';\n      vertical-align: middle;\n    }\n\n    input {\n      vertical-align: middle;\n      -webkit-appearance: none;\n      -webkit-text-size-adjust: none;\n      padding: var(--hashtag-input-padding);\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      outline: none;\n      font-weight:bold;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    .error {\n      margin:var(--margin-narrow);\n      color: var(--status-danger-color);\n      font: var(--input-font);\n      text-align: left;\n    }\n  `\n\n  @property({ type: Array }) value: string[] = []\n  @property({ type: String }) placeholder: string = 'tag'\n  @query('input') input!: HTMLInputElement\n\n  @state() errors?: string | null\n\n  render() {\n    return html`\n      <div id=\"editor\" @click=${this.setHashtags}>\n        <div class=\"tags\">\n          ${repeat(\n            this.value,\n            tag => tag,\n            (tag, index) =>\n              html`\n                <span class=\"tag\">#${tag} <span @click=${() => this.removeHashtag(index)} class=\"closer\">x</span></span>\n              `\n          )}\n        </div>\n\n        <div class=\"input\">\n          <input type=\"text\" @keyup=${this.onInputKeyup} placeholder=\"태그입력\" />\n        </div>\n      </div>\n\n      ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n    `\n  }\n\n  private onInputKeyup(e: KeyboardEvent) {\n    e.stopPropagation()\n\n    const tag = this.input.value.trim()\n\n    switch (e.key) {\n      case 'Enter':\n      case 'Spacebar':\n        this.addHashtag(tag)\n        break\n      default:\n        this.errors = this.validate(tag)\n    }\n  }\n\n  async setHashtags() {\n    this.input.focus()\n  }\n\n  initErrors() {\n    this.errors = null\n  }\n\n  validate(newtag: string) {\n    if (this.value.some(tag => tag === newtag)) {\n      return msg('tag duplicated')\n    }\n\n    const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n    if (regex.test(newtag)) {\n      return msg('special characters not allowed')\n    }\n  }\n\n  async addHashtag(tag: string) {\n    if (!tag) {\n      this.initErrors()\n      this.input.focus()\n      return\n    }\n\n    this.errors = this.validate(tag)\n    if (this.errors) {\n      this.input.focus()\n      return\n    }\n\n    this.value = [...this.value, tag]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.errors = null\n    this.input.value = ''\n    this.input.focus()\n  }\n\n  removeHashtag(idx: number) {\n    this.value.splice(idx, 1)\n    this.value = [...this.value]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,gBAAgB,CAAA;AAEvB,MAAM,MAAM,GAAG;IACb,UAAU;IACV,SAAS;IACT,KAAK;IACL,SAAS;IACT,OAAO;IACP,SAAS;IACT,KAAK;IACL,gBAAgB;IAChB,iBAAiB;IACjB,aAAa;IACb,cAAc;IACd,cAAc;IACd,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,WAAW;IACX,gBAAgB;IAChB,cAAc;IACd,mBAAmB;IACnB,eAAe;IACf,QAAQ;IACR,SAAS;IACT,cAAc;IACd,UAAU;IACV,eAAe;IACf,UAAU;IACV,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,UAAU;IACV,kBAAkB;IAClB,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,MAAM;IACN,MAAM;IACN,MAAM;IACN,KAAK;IACL,IAAI;IACJ,SAAS;IACT,UAAU;IACV,iBAAiB;IACjB,kBAAkB;IAClB,cAAc;IACd,iBAAiB;IACjB,gBAAgB;IAChB,MAAM;IACN,YAAY;IACZ,UAAU;IACV,cAAc;IACd,UAAU;IACV,gBAAgB;IAChB,eAAe;IACf,QAAQ;IACR,eAAe;IACf,cAAc;IACd,WAAW;IACX,SAAS;IACT,KAAK;IACL,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,YAAY;IACZ,SAAS;IACT,YAAY;IACZ,YAAY;IACZ,MAAM;IACN,SAAS;IACT,MAAM;IACN,KAAK;IACL,OAAO;IACP,OAAO;IACP,KAAK;IACL,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,MAAM;IACN,KAAK;IACL,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,OAAO;IACP,KAAK;IACL,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,eAAe;IACf,mBAAmB;IACnB,SAAS;IACT,OAAO;IACP,OAAO;IACP,cAAc;IACd,UAAU;IACV,UAAU;IACV,UAAU;IACV,YAAY;IACZ,WAAW;IACX,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,UAAU;IACV,UAAU;IACV,gBAAgB;CACjB,CAAA;AAWD;;;;;;;;GAQG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QAwEuB,iBAAY,GAAiB,EAAE,CAAA;QAC/B,UAAK,GAAiB,EAAE,CAAA;QAE5C,YAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA,qBAAqB,KAAK,IAAI,KAAK,QAAQ,CAAC,CAAA;QAC9E,gBAAW,GAAY,KAAK,CAAA;IAqPtC,CAAC;aAhUQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,CAAA;IAQD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEpC,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CACX,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;iDAEsB,IAAI,CAAC,GAAG;;;;;;;;uBAQlC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;;mDAGU,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;;mDAGlC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;;;;;uBAK/F,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;;0BAE7B,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC;;;;;SAK3C,CACF;;;;;;mBAMY,IAAI,CAAC,EAAE,CAAC;oBACP,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;;wCAE6B,IAAI,CAAC,OAAO;;;;;;;;;;;;;+CAaL,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;;;mBAK1D,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;YACrC,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC5B,CAAC;;;;;;mBAMQ,GAAG,EAAE;YACZ,IAAI,CAAC,UAAU,EAAE,CAAA;QACnB,CAAC;;;;;KAKN,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,OAAM;SACP;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QAEvB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAE1C,MAAM,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,iCAAiC,CAAgB,CAAA;QAE9F,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;YACtC,IAAI,CAAC,MAAM,EAAE,CAAA;SACd;aAAM,IAAI,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YACrF,IAAI,CAAC,IAAI,EAAE,CAAA;SACZ;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;IAC1B,CAAC;IAED,UAAU;QACR,MAAM,QAAQ,GAAiB,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9D,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE;YAC1D,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAA;YACnC,OAAO,QAAQ,CAAA;QACjB,CAAC,EAAE,EAAkB,CAAC,CAAA;QAEtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,MAAM,CAAC,gBAA0B;QAC/B,IAAI,gBAAgB,EAAE;YACpB,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAA4B,CAAA;SAC7G;aAAM;YACL,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAA4B,CAAA;SAC3F;QAED,IAAI,MAAM,GAAiB,EAAE,CAAA;QAE7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;YAEvB,MAAM,GAAG,GAAI,MAAM,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC,KAAK,CAAA;YAC1E,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CACpC,4CAA4C,CACb,CAAA;YAEjC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;gBACjC,SAAQ;aACT;YAED,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;YAErC,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAEvB,IAAI,GAAG,EAAE;gBACP,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;aACjC;SACF;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QAEnB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,gDAAgD;IAChD,QAAQ,CAAC,GAAiB;QACxB,IAAI,KAAK,GAAwB,EAAE,CAAA;QAEnC,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;YACnB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC;aAChB,CAAC,CAAA;SACH;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC7C,uDAAuD,CACP,CAAA;QAElD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAErB,IAAI,KAAK,CAAC,IAAI,IAAI,UAAU;gBAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;;gBAC9C,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;SACtB;QAED,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,MAAM,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAgB,CAE3E;QAAC,MAAO,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC,KAAK,GAAG,EAAE,CAAA;QAEtE,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAID,GAAG,CAAC,CAAa;QACf,MAAM,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAA;QAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAEvC,IAAI,KAAK,GAAG,CAAC,EAAE;YACb,OAAM;SACP;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,CAAA;QAEtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACxC,MAAM,GAAG,GAAI,MAAM,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC,KAAK,CAAA;YAC1E,MAAM,KAAK,GAAI,MAAM,CAAC,aAAa,CAAC,cAAc,CAAsB,CAAC,KAAK,CAAA;YAE9E,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC7B,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAkB,CAAC,CAAA;QAEtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,KAAK,CAAC,CAAa;QACjB,MAAM,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAA;QAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;QAEnC,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE;YACxB,OAAM;SACP;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtB,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;QAElC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACxC,MAAM,GAAG,GAAI,MAAM,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC,KAAK,CAAA;YAC1E,MAAM,KAAK,GAAI,MAAM,CAAC,aAAa,CAAC,cAAc,CAAsB,CAAC,KAAK,CAAA;YAE9E,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC7B,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAkB,CAAC,CAAA;QAEtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAxP2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAqMzB;IAA1B,QAAQ,CAAC,eAAe,CAAC;oDAAkC;AA9QjD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAiU/B;SAjUY,mBAAmB","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"]}