@operato/input 1.1.21 → 1.1.24

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.24](https://github.com/hatiolab/operato/compare/v1.1.23...v1.1.24) (2022-12-04)
+
+
+### :bug: Bug Fix
+
+* ox-input-mass-fraction.ts ([8113c2b](https://github.com/hatiolab/operato/commit/8113c2b2b233d3199abdddd3a974b095b22e40a0))
+* placeholder for ox-input-mass-fraction ([7b7c79c](https://github.com/hatiolab/operato/commit/7b7c79c22a23006b19981714f58266aee52af034))
+
+
+
+### [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;
+    records: NodeListOf<HTMLElement>;
+    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;
+    _up(e: MouseEvent): void;
+    _down(e: MouseEvent): void;
+    dispatchChangeEvent(): void;
+}
+export {};

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

@@ -0,0 +1,469 @@
+/**
+ * @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;
+      }
+
+      [records] {
+        flex: 1;
+
+        overflow: overlay;
+      }
+
+      [records] > div {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--mass-fraction-gap, 4px);
+        margin-bottom: var(--margin-narrow);
+      }
+
+      [data-record-new] {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--mass-fraction-gap, 3px);
+        margin: var(--margin-narrow) 0;
+      }
+
+      button {
+        align-self: center;
+        border: var(--button-border);
+        border-radius: var(--border-radius);
+        background-color: var(--button-background-color);
+        padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);
+        color: var(--button-color);
+        cursor: pointer;
+      }
+      button mwc-icon {
+        font-size: var(--fontsize-default);
+      }
+      button:focus,
+      button:hover,
+      button:active {
+        border: var(--button-active-border);
+        background-color: var(--button-background-focus-color);
+        color: var(--theme-white-color);
+      }
+
+      input,
+      ox-select {
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+        min-width: 50px;
+      }
+
+      input {
+        padding: var(--input-padding);
+      }
+
+      ox-select {
+        padding: 0;
+      }
+
+      [data-key] {
+        flex: 2;
+      }
+
+      [data-value] {
+        flex: 1;
+      }
+
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
+      }
+
+      button.hidden {
+        opacity: 0;
+        cursor: default;
+      }
+
+      ox-popup-list {
+        max-height: 300px;
+        overflow: auto;
+        left: 0;
+      }
+
+      [records] > [nofraction] {
+        display: block;
+        text-align: center;
+      }
+    `
+    ]; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    render() {
+        const value = !this.value || typeof this.value !== 'object' ? {} : this.value;
+        const arrayed = this._toArray(value);
+        return html `
+      <div records>
+        ${arrayed.length
+            ? arrayed.map((item, idx) => html `
+                <div data-record>
+                  <input type="text" data-key .value=${item.key} disabled />
+                  <input
+                    type="number"
+                    data-value
+                    placeholder="fraction"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    .value=${String(item.value)}
+                    list="value-template"
+                  />
+                  <button class="record-action" @click=${(e) => 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>
+              `)
+            : html `<div nofraction>No Fractions</div>`}
+      </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      [records] {\n        flex: 1;\n\n        overflow: overlay;\n      }\n\n      [records] > 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      [data-record-new] {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--mass-fraction-gap, 3px);\n        margin: var(--margin-narrow) 0;\n      }\n\n      button {\n        align-self: center;\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, 3px) var(--mass-fraction-button-padding-horizontal, 3px);\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-active-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        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      input {\n        padding: var(--input-padding);\n      }\n\n      ox-select {\n        padding: 0;\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      [records] > [nofraction] {\n        display: block;\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: Object }) defaultValue: MassFraction = {}\n  @property({ type: Object }) value: MassFraction = {}\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\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      <div records>\n        ${arrayed.length\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\n                    class=\"record-action\"\n                    @click=${(e: MouseEvent) => this._up(e)}\n                    tabindex=\"-1\"\n                    ?disabled=${idx === 0}\n                  >\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          : html`<div nofraction>No Fractions</div>`}\n      </div>\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  _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;
       }
     `
     ]; }