@operato/input 2.0.0-alpha.4 → 2.0.0-alpha.48

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

@@ -5,7 +5,9 @@ import { __decorate } from "tslib";
 import './ox-input-code';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { OxFormField } from './ox-form-field.js';
+import { isEqual } from 'lodash-es';
 /**
 WEB Component for code-mirror based data editor.
 
@@ -43,38 +45,55 @@ let OxInputData = class OxInputData extends OxFormField {
     `
     ]; }
     render() {
+        const valueType = typeof this.value;
         return html `
       <div datatype>
         <input
+          id="string"
           type="radio"
           name="data-type"
           data-value="string"
-          .checked=${typeof this.value == 'string'}
+          .checked=${live(valueType == 'string')}
           @click=${() => this._setDataType('string')}
           ?disabled=${this.disabled}
-        />string
+        />
+        <label for="string">string</label>
 
         <input
+          id="number"
           type="radio"
           name="data-type"
           data-value="number"
-          .checked=${typeof this.value == 'number'}
+          .checked=${live(valueType == 'number')}
           @click=${() => this._setDataType('number')}
           ?disabled=${this.disabled}
-        />number
+        />
+        <label for="number">number</label>
 
         <input
+          id="object"
           type="radio"
           name="data-type"
           data-value="object"
-          .checked=${typeof this.value == 'object'}
+          .checked=${live(valueType == 'object')}
           @click=${() => this._setDataType('object')}
           ?disabled=${this.disabled}
-        />object
+        />
+        <label for="object">object</label>
+
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code
+        .value=${this._getStringData(this.value)}
+        language="text"
+        editor
+        ?disabled=${this.disabled}
+        @change=${(e) => {
+            e.stopPropagation();
+            this._setDataTypeAndValue(valueType, e.target.value);
+        }}
+      >
       </ox-input-code>
     `;
     }
@@ -83,49 +102,82 @@ let OxInputData = class OxInputData extends OxFormField {
             e.stopPropagation();
             const target = e.target;
             if (target.hasAttribute('editor')) {
+                if (this.value === undefined && target.value == '') {
+                    return;
+                }
                 this.value = target.value;
             }
-            const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value');
-            this._setDataType(type);
         });
     }
-    udpated(changes) {
-        if (changes.has('value')) {
-            this.value = this._getData(this.value);
+    _setDataTypeAndValue(type, value) {
+        /* value must be a string */
+        try {
+            switch (type) {
+                case 'number':
+                    if (!isNaN(Number(value))) {
+                        value = Number(value);
+                    }
+                    break;
+                case 'object':
+                    value = eval('(' + value + ')');
+                    break;
+            }
+        }
+        catch (e) { }
+        if (isEqual(this.value, value)) {
+            return;
         }
+        this.value = value;
+        this.requestUpdate();
+        this._onAfterValueChange();
     }
     _setDataType(type) {
-        if (typeof this.value !== type) {
-            var value = this.value;
-            try {
-                switch (type) {
-                    case 'string':
-                        this.value = String(value || '');
-                        break;
-                    case 'number':
-                        if (!isNaN(value)) {
-                            this.value = Number(value);
-                        }
-                        break;
-                    case 'object':
-                        this.value = eval('(' + value + ')');
-                        break;
-                }
-            }
-            catch (e) {
-                console.log(e);
+        if (typeof this.value == type) {
+            return;
+        }
+        var value = this.value;
+        try {
+            switch (type) {
+                case 'string':
+                    value = this._getStringData(value);
+                    break;
+                case 'number':
+                    if (!isNaN(value)) {
+                        value = Number(value);
+                    }
+                    break;
+                case 'object':
+                    value = eval('(' + value + ')');
+                    break;
             }
         }
+        catch (e) {
+            console.log(e);
+        }
+        if (isEqual(this.value, value)) {
+            this.requestUpdate();
+            return;
+        }
+        this.value = value;
+        this.requestUpdate();
         this._onAfterValueChange();
     }
     _clearData() {
         this.value = undefined;
         this._onAfterValueChange();
     }
-    _getData(data) {
-        return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1);
+    _getStringData(data) {
+        const type = typeof data;
+        switch (type) {
+            case 'object':
+                return JSON.stringify(data, null, 1);
+            case 'undefined':
+                return '';
+            default:
+                return String(data) || '';
+        }
     }
-    _onAfterValueChange() {
+    async _onAfterValueChange() {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div datatype>\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${typeof this.value == 'string'}\n          @click=${() => this._setDataType('string')}\n          ?disabled=${this.disabled}\n        />string\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${typeof this.value == 'number'}\n          @click=${() => this._setDataType('number')}\n          ?disabled=${this.disabled}\n        />number\n\n        <input\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${typeof this.value == 'object'}\n          @click=${() => this._setDataType('object')}\n          ?disabled=${this.disabled}\n        />object\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code .value=${this._getData(this.value)} language=\"javascript\" editor ?disabled=${this.disabled}>\n      </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        this.value = target.value\n      }\n\n      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n      this._setDataType(type)\n    })\n  }\n\n  udpated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.value = this._getData(this.value)\n    }\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value !== type) {\n      var value = this.value\n\n      try {\n        switch (type) {\n          case 'string':\n            this.value = String(value || '')\n            break\n          case 'number':\n            if (!isNaN(value)) {\n              this.value = Number(value)\n            }\n            break\n          case 'object':\n            this.value = eval('(' + value + ')')\n            break\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getData(data: any) {\n    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n  }\n\n  _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div[datatype] {\n        display: flex;\n        align-items: center;\n        padding: 2px;\n        background-color: rgba(0, 0, 0, 0.08);\n        font-size: small;\n      }\n\n      div[datatype] mwc-icon {\n        margin-left: auto;\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  render() {\n    const valueType = typeof this.value\n\n    return html`\n      <div datatype>\n        <input\n          id=\"string\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${live(valueType == 'string')}\n          @click=${() => this._setDataType('string')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"string\">string</label>\n\n        <input\n          id=\"number\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${live(valueType == 'number')}\n          @click=${() => this._setDataType('number')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"number\">number</label>\n\n        <input\n          id=\"object\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${live(valueType == 'object')}\n          @click=${() => this._setDataType('object')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"object\">object</label>\n\n        <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n      </div>\n\n      <ox-input-code\n        .value=${this._getStringData(this.value)}\n        language=\"text\"\n        editor\n        ?disabled=${this.disabled}\n        @change=${(e: CustomEvent) => {\n          e.stopPropagation()\n          this._setDataTypeAndValue(valueType, (e.target as any).value)\n        }}\n      >\n      </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        if (this.value === undefined && target.value == '') {\n          return\n        }\n        this.value = target.value\n      }\n    })\n  }\n\n  _setDataTypeAndValue(type: string | undefined | null, value: any) {\n    /* value must be a string */\n    try {\n      switch (type) {\n        case 'number':\n          if (!isNaN(Number(value))) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          value = eval('(' + value + ')')\n          break\n      }\n    } catch (e) {}\n\n    if (isEqual(this.value, value)) {\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value == type) {\n      return\n    }\n\n    var value = this.value\n\n    try {\n      switch (type) {\n        case 'string':\n          value = this._getStringData(value)\n          break\n        case 'number':\n          if (!isNaN(value)) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          value = eval('(' + value + ')')\n          break\n      }\n    } catch (e) {\n      console.log(e)\n    }\n\n    if (isEqual(this.value, value)) {\n      this.requestUpdate()\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getStringData(data: any) {\n    const type = typeof data\n\n    switch (type) {\n      case 'object':\n        return JSON.stringify(data, null, 1)\n      case 'undefined':\n        return ''\n      default:\n        return String(data) || ''\n    }\n  }\n\n  async _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-i18n-label.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import { OxFormField } from './ox-form-field';
+type I18nLabel = {
+    [code: string]: string;
+};
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+export declare class OxInputI18nLabels extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: I18nLabel;
+    languages: {
+        display: string;
+        code: string;
+    }[];
+    records: NodeListOf<HTMLElement>;
+    private changing;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private onChange;
+    private build;
+}
+export {};

package/dist/src/ox-input-i18n-label.js

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import { css, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+const LANGUAGES = [
+    {
+        code: 'en',
+        display: 'English'
+    }
+];
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+let OxInputI18nLabels = class OxInputI18nLabels extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.languages = LANGUAGES;
+        this.changing = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    [data-record] {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
+
+    label {
+      width: 80px;
+      align-self: center;
+      text-align: end;
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      min-width: 100px;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input[type='hidden'] {
+      flex: 0;
+    }
+  `; }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onChange.bind(this));
+    }
+    render() {
+        const value = !this.value || typeof this.value !== 'object' ? {} : this.value;
+        const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES;
+        return html `
+      ${languages.map(({ display, code }) => html `
+          <div data-record>
+            <label>${display}</label>
+            <input type="hidden" data-code value=${code} />
+            <input
+              type="text"
+              data-label
+              placeholder="label"
+              .value=${value?.[code] || ''}
+              ?disabled=${this.disabled}
+            />
+          </div>
+        `)}
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        if (this.changing) {
+            return;
+        }
+        this.changing = true;
+        this.build();
+        this.changing = false;
+    }
+    build() {
+        var records = this.renderRoot.querySelectorAll('[data-record]');
+        var newmap = {};
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            const code = record.querySelector('[data-code]').value;
+            const label = record.querySelector('[data-label]').value;
+            if (code) {
+                newmap[code] = label || '';
+            }
+        }
+        this.value = { ...this.value, ...newmap };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxInputI18nLabels.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], OxInputI18nLabels.prototype, "languages", void 0);
+__decorate([
+    queryAll('[data-record]')
+], OxInputI18nLabels.prototype, "records", void 0);
+OxInputI18nLabels = __decorate([
+    customElement('ox-input-i18n-label')
+], OxInputI18nLabels);
+export { OxInputI18nLabels };
+//# sourceMappingURL=ox-input-i18n-label.js.map

package/dist/src/ox-input-i18n-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-i18n-label.js","sourceRoot":"","sources":["../../src/ox-input-i18n-label.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype I18nLabel = { [code: string]: string }\n\nconst LANGUAGES = [\n  {\n    code: 'en',\n    display: 'English'\n  }\n]\n\n/**\n input component for i18n labels\n \n Example:\n \n   <ox-input-i18n-label \n     value=${map}\n     languages=${languages}\n   </ox-input-i18n-label>\n */\n@customElement('ox-input-i18n-label')\nexport class OxInputI18nLabels extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    [data-record] {\n      display: flex;\n      flex-direction: row;\n      gap: 10px;\n    }\n\n    label {\n      width: 80px;\n      align-self: center;\n      text-align: end;\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: 100px;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input[type='hidden'] {\n      flex: 0;\n    }\n  `\n\n  @property({ type: Object }) value: I18nLabel = {}\n  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  private changing: 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 languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES\n\n    return html`\n      ${languages.map(\n        ({ display, code }) => html`\n          <div data-record>\n            <label>${display}</label>\n            <input type=\"hidden\" data-code value=${code} />\n            <input\n              type=\"text\"\n              data-label\n              placeholder=\"label\"\n              .value=${value?.[code] || ''}\n              ?disabled=${this.disabled}\n            />\n          </div>\n        `\n      )}\n    `\n  }\n\n  private onChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.changing) {\n      return\n    }\n\n    this.changing = true\n\n    this.build()\n\n    this.changing = false\n  }\n\n  private build() {\n    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n\n    var newmap: I18nLabel = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const code = (record.querySelector('[data-code]') as HTMLInputElement).value\n      const label = (record.querySelector('[data-label]') as HTMLInputElement).value\n\n      if (code) {\n        newmap[code] = label || ''\n      }\n    }\n\n    this.value = { ...this.value, ...newmap }\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -28,6 +28,7 @@ export declare class OxInputMassFraction extends OxFormField {
     static styles: import("lit").CSSResult[];
     defaultValue: MassFraction;
     value: MassFraction;
+    composable: boolean;
     records: NodeListOf<HTMLElement>;
     private options;
     private changingNow;

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

@@ -25,6 +25,7 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
         super(...arguments);
         this.defaultValue = {};
         this.value = {};
+        this.composable = false;
         this.options = FLUIDS.map(fluid => html `<div option value=${fluid}>${fluid}</div>`);
         this.changingNow = false;
     }
@@ -123,6 +124,10 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
         display: block;
         text-align: center;
       }
+
+      [right-end] {
+        margin-left: auto;
+      }
     `
     ]; }
     firstUpdated() {
@@ -148,14 +153,18 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
                     list="value-template"
                     ?disabled=${this.disabled}
                   />
-                  <button
-                    class="record-action"
-                    @click=${(e) => this._delete(e)}
-                    tabindex="-1"
-                    ?disabled=${this.disabled}
-                  >
-                    <mwc-icon>remove</mwc-icon>
-                  </button>
+                  ${this.composable
+                ? html `
+                        <button
+                          class="record-action"
+                          @click=${(e) => this._delete(e)}
+                          tabindex="-1"
+                          ?disabled=${this.disabled}
+                        >
+                          <mwc-icon>remove</mwc-icon>
+                        </button>
+                      `
+                : nothing}
                   <button
                     class="record-action"
                     @click=${(e) => this._up(e)}
@@ -181,36 +190,41 @@ let OxInputMassFraction = class OxInputMassFraction extends OxFormField {
             ? nothing
             : html `
             <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>
+              ${this.composable
+                ? html `
+                    <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>
+                    <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>
+                  `
+                : nothing}
               <button
                 title="fill with the values suggested"
                 @click=${() => {
                 this.value = { ...this.defaultValue };
                 this.dispatchChangeEvent();
             }}
+                right-end
               >
                 <mwc-icon>settings_suggest</mwc-icon>
               </button>
@@ -346,6 +360,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], OxInputMassFraction.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], OxInputMassFraction.prototype, "composable", void 0);
 __decorate([
     queryAll('[data-record]')
 ], OxInputMassFraction.prototype, "records", void 0);

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

@@ -1 +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,gBAAgB,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;AAW9F;;;;;;;;GAQG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QAmGuB,iBAAY,GAAiB,EAAE,CAAA;QAC/B,UAAK,GAAiB,EAAE,CAAA;QAI5C,YAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA,qBAAqB,KAAK,IAAI,KAAK,QAAQ,CAAC,CAAA;QAC9E,gBAAW,GAAY,KAAK,CAAA;IAsQtC,CAAC;aA9WQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FF;KACF,AAhGY,CAgGZ;IAUD,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;;UAEL,OAAO,CAAC,MAAM;YACd,CAAC,CAAC,OAAO,CAAC,GAAG,CACT,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;uDAEsB,IAAI,CAAC,GAAG;;;;;;;;6BAQlC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;gCAEf,IAAI,CAAC,QAAQ;;;;6BAIhB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;gCAE/B,IAAI,CAAC,QAAQ;;;;;;6BAMhB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;gCAE3B,IAAI,CAAC,QAAQ,IAAI,GAAG,KAAK,CAAC;;;;;;6BAM7B,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;;gCAE7B,IAAI,CAAC,QAAQ,IAAI,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC;;;;;eAK5D,CACF;YACH,CAAC,CAAC,IAAI,CAAA,oCAAoC;;;QAG5C,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;;;yBAKW,IAAI,CAAC,EAAE,CAAC;0BACP,CAAC,CAAQ,EAAE,EAAE;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACrB,CAAC;;8CAE6B,IAAI,CAAC,OAAO;;;;;;;;;;;;;qDAaL,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;;;yBAK1D,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;gBACrC,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC5B,CAAC;;;;;;yBAMQ,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,EAAE,CAAA;YACnB,CAAC;;;;;WAKN;KACN,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAM;QACR,CAAC;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,CAAC;YACvC,IAAI,CAAC,MAAM,EAAE,CAAA;QACf,CAAC;aAAM,IAAI,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACtF,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC;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,CAAC;YACrB,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAA4B,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAA4B,CAAA;QAC5F,CAAC;QAED,IAAI,MAAM,GAAiB,EAAE,CAAA;QAE7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,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,CAAC;gBAClC,SAAQ;YACV,CAAC;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,CAAC;gBACR,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAClC,CAAC;QACH,CAAC;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,CAAC;YACpB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC;aAChB,CAAC,CAAA;QACJ,CAAC;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,CAAC;YACvC,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;QACvB,CAAC;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;IAED,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,CAAC;YACd,OAAM;QACR,CAAC;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,CAAC;YACzB,OAAM;QACR,CAAC;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;;AA3Q2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAEzB;IAA1B,QAAQ,CAAC,eAAe,CAAC;oDAAkC;AAtGjD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA+W/B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-select.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\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, 3px);\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        display: inherit;\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                    ?disabled=${this.disabled}\n                  />\n                  <button\n                    class=\"record-action\"\n                    @click=${(e: MouseEvent) => this._delete(e)}\n                    tabindex=\"-1\"\n                    ?disabled=${this.disabled}\n                  >\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=${this.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=${this.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      ${this.disabled\n        ? nothing\n        : html`\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\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"]}
+{"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 './ox-select.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\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, 3px);\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        display: inherit;\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      [right-end] {\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) defaultValue: MassFraction = {}\n  @property({ type: Object }) value: MassFraction = {}\n  @property({ type: Boolean, attribute: true }) composable: boolean = false\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                    ?disabled=${this.disabled}\n                  />\n                  ${this.composable\n                    ? html`\n                        <button\n                          class=\"record-action\"\n                          @click=${(e: MouseEvent) => this._delete(e)}\n                          tabindex=\"-1\"\n                          ?disabled=${this.disabled}\n                        >\n                          <mwc-icon>remove</mwc-icon>\n                        </button>\n                      `\n                    : nothing}\n                  <button\n                    class=\"record-action\"\n                    @click=${(e: MouseEvent) => this._up(e)}\n                    tabindex=\"-1\"\n                    ?disabled=${this.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=${this.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      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              ${this.composable\n                ? html`\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                  `\n                : nothing}\n              <button\n                title=\"fill with the values suggested\"\n                @click=${() => {\n                  this.value = { ...this.defaultValue }\n                  this.dispatchChangeEvent()\n                }}\n                right-end\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\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/stories/ox-input-barcode.stories.js

@@ -17,6 +17,10 @@ const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, eng
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   <style>
+    #root {
+      height: 500px;
+    }
+
     ox-input-barcode {
       font-size: 80px;
       --input-font: initial;