@operato/input 2.0.0-alpha.3 → 2.0.0-alpha.8

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.
 
+## [2.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2024-01-20)
+
+
+### :bug: Bug Fix
+
+* add composable property for ox-input-mass-fraction ([1b42a2e](https://github.com/hatiolab/operato/commit/1b42a2e250984c33bda03beab9162070a5a52fdb))
+* use zbar-wasm for barcode scan ([0916624](https://github.com/hatiolab/operato/commit/09166249b35fe0da0cb738868bd385e38c54cbca))
+* use zbar-wasm for barcode scan ([c60c262](https://github.com/hatiolab/operato/commit/c60c262d809963033d5b531ae42f0ab6af3d3e65))
+
+
+
+## [2.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.3...v2.0.0-alpha.4) (2024-01-15)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ## [2.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2024-01-14)
 
 

package/dist/src/ox-input-barcode.d.ts

@@ -3,17 +3,61 @@
  */
 import '@operato/popup/ox-popup.js';
 import { OxPopup } from '@operato/popup';
-import { BrowserMultiFormatReader } from '@zxing/library';
 import { OxFormField } from './ox-form-field.js';
+/**
+ * Custom input component for barcode scanning.
+ *
+ * This component provides a text input field and a barcode scanning button. Users can input text
+ * manually or scan barcodes using the device camera. Supported barcode formats include:
+ *
+ * - Code-39
+ * - Code-93
+ * - Code-128
+ * - Codabar
+ * - Databar/Expanded
+ * - EAN/GTIN-5/8/13
+ * - ISBN-10/13
+ * - ISBN-13+2
+ * - ISBN-13+5
+ * - ITF (Interleaved 2 of 5)
+ * - QR Code
+ * - UPC-A/E
+ *
+ * @fires CustomEvent#change - Dispatched when the input value changes.
+ * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).
+ *
+ * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.
+ *
+ * @customElement
+ */
 export declare class OxInputBarcode extends OxFormField {
     static styles: import("lit").CSSResult[];
+    /**
+     * Indicates whether barcode scanning is enabled.
+     * @property {Boolean} scannable
+     */
     scannable?: boolean;
+    /**
+     * If true, the "Enter" key press event is not fired after scanning a barcode.
+     * @property {Boolean} withoutEnter
+     */
     withoutEnter?: boolean;
+    /**
+     * The value of the input field.
+     * @property {String} declare value
+     */
     value?: string;
+    /**
+     * If true, only English characters are allowed in the input field.
+     * @property {Boolean} englishOnly
+     */
     englishOnly?: boolean;
+    /**
+     * If true, the input field is automatically selected after a change event.
+     * @property {Boolean} selectAfterChange
+     */
     selectAfterChange?: boolean;
     stream?: MediaStream;
-    reader?: BrowserMultiFormatReader;
     input: HTMLInputElement;
     popup: OxPopup;
     video: HTMLVideoElement;

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

@@ -5,9 +5,35 @@ import { __decorate } from "tslib";
 import '@operato/popup/ox-popup.js';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { BrowserMultiFormatReader } from '@zxing/library';
+import { scanImageData } from '@undecaf/zbar-wasm';
 import { OxFormField } from './ox-form-field.js';
 const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`;
+/**
+ * Custom input component for barcode scanning.
+ *
+ * This component provides a text input field and a barcode scanning button. Users can input text
+ * manually or scan barcodes using the device camera. Supported barcode formats include:
+ *
+ * - Code-39
+ * - Code-93
+ * - Code-128
+ * - Codabar
+ * - Databar/Expanded
+ * - EAN/GTIN-5/8/13
+ * - ISBN-10/13
+ * - ISBN-13+2
+ * - ISBN-13+5
+ * - ITF (Interleaved 2 of 5)
+ * - QR Code
+ * - UPC-A/E
+ *
+ * @fires CustomEvent#change - Dispatched when the input value changes.
+ * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).
+ *
+ * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.
+ *
+ * @customElement
+ */
 let OxInputBarcode = class OxInputBarcode extends OxFormField {
     static { this.styles = [
         css `
@@ -86,7 +112,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
             ;
             (async () => {
                 try {
-                    var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+                    var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } });
                     if (stream) {
                         stream.getTracks().forEach(track => track.stop());
                         this.scannable = true;
@@ -170,22 +196,44 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
             this.popup.open({});
             /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
             await this.updateComplete;
-            var constraints = { video: { facingMode: 'environment' } }; /* backside camera first */
+            var constraints = { audio: false, video: { facingMode: 'environment' } }; /* backside camera first */
             this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-            this.reader = new BrowserMultiFormatReader();
-            if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {
-                var result = await this.reader.decodeOnceFromStream(this.stream, this.video);
-                var input = this.input;
-                input.focus();
-                this.value = input.value = String(result);
-                if (!this.withoutEnter) {
-                    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-                }
-            }
-            else {
-                /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
-                this.stopScan();
-            }
+            this.video.srcObject = this.stream;
+            this.video.play();
+            this.video.onloadedmetadata = async (e) => {
+                var canvas = new OffscreenCanvas(this.video.videoWidth || this.video.width, this.video.videoHeight || this.video.height);
+                var context = canvas.getContext('2d', {
+                    willReadFrequently: true
+                });
+                const detect = async () => {
+                    try {
+                        if (!this.stream?.active) {
+                            return;
+                        }
+                        context.drawImage(this.video, 0, 0, canvas.width, canvas.height);
+                        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                        const symbols = await scanImageData(imageData);
+                        const result = symbols[0]?.decode();
+                        if (result) {
+                            this.stopScan();
+                            var input = this.input;
+                            input.focus();
+                            this.value = input.value = String(result);
+                            if (!this.withoutEnter) {
+                                input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+                            }
+                        }
+                        else {
+                            requestAnimationFrame(async () => await detect());
+                        }
+                    }
+                    catch (e) {
+                        console.warn(e);
+                        this.stopScan();
+                    }
+                };
+                await detect();
+            };
         }
         catch (err) {
             /*
@@ -194,17 +242,13 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
              */
             console.warn(err);
         }
-        finally {
-            this.popup.close();
-            this.stopScan();
-        }
     }
     stopScan() {
-        this.video?.pause();
+        if (this.video) {
+            this.video.pause();
+            this.video.srcObject = null;
+        }
         this.stream?.getTracks().forEach(track => track.stop());
-        this.reader?.reset();
-        delete this.stream;
-        delete this.reader;
     }
 };
 __decorate([
@@ -225,9 +269,6 @@ __decorate([
 __decorate([
     state()
 ], OxInputBarcode.prototype, "stream", void 0);
-__decorate([
-    state()
-], OxInputBarcode.prototype, "reader", void 0);
 __decorate([
     query('input')
 ], OxInputBarcode.prototype, "input", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n\n      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          height: 100dvh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) declare value?: string\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n  @state() reader?: BrowserMultiFormatReader\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n        ?disabled=${this.disabled}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n        ?disabled=${this.disabled}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        this.value = input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video?.pause()\n\n    this.stream?.getTracks().forEach(track => track.stop())\n    this.reader?.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}
+{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { scanImageData } from '@undecaf/zbar-wasm'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n/**\n * Custom input component for barcode scanning.\n *\n * This component provides a text input field and a barcode scanning button. Users can input text\n * manually or scan barcodes using the device camera. Supported barcode formats include:\n *\n * - Code-39\n * - Code-93\n * - Code-128\n * - Codabar\n * - Databar/Expanded\n * - EAN/GTIN-5/8/13\n * - ISBN-10/13\n * - ISBN-13+2\n * - ISBN-13+5\n * - ITF (Interleaved 2 of 5)\n * - QR Code\n * - UPC-A/E\n *\n * @fires CustomEvent#change - Dispatched when the input value changes.\n * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).\n *\n * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.\n *\n * @customElement\n */\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n\n      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          height: 100dvh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  /**\n   * Indicates whether barcode scanning is enabled.\n   * @property {Boolean} scannable\n   */\n  @property({ type: Boolean }) scannable?: boolean\n\n  /**\n   * If true, the \"Enter\" key press event is not fired after scanning a barcode.\n   * @property {Boolean} withoutEnter\n   */\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n\n  /**\n   * The value of the input field.\n   * @property {String} declare value\n   */\n  @property({ type: String }) declare value?: string\n\n  /**\n   * If true, only English characters are allowed in the input field.\n   * @property {Boolean} englishOnly\n   */\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n\n  /**\n   * If true, the input field is automatically selected after a change event.\n   * @property {Boolean} selectAfterChange\n   */\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n        ?disabled=${this.disabled}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n        ?disabled=${this.disabled}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n      this.video.srcObject = this.stream\n      this.video.play()\n\n      this.video.onloadedmetadata = async e => {\n        var canvas = new OffscreenCanvas(\n          this.video.videoWidth || this.video.width,\n          this.video.videoHeight || this.video.height\n        )\n\n        var context = canvas.getContext('2d', {\n          willReadFrequently: true\n        })\n\n        const detect = async () => {\n          try {\n            if (!this.stream?.active) {\n              return\n            }\n\n            context!.drawImage(this.video, 0, 0, canvas.width, canvas.height)\n            const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)\n            const symbols = await scanImageData(imageData)\n            const result = symbols[0]?.decode()\n\n            if (result) {\n              this.stopScan()\n\n              var input = this.input\n              input.focus()\n              this.value = input.value = String(result)\n\n              if (!this.withoutEnter) {\n                input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n              }\n            } else {\n              requestAnimationFrame(async () => await detect())\n            }\n          } catch (e) {\n            console.warn(e)\n            this.stopScan()\n          }\n        }\n\n        await detect()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    }\n  }\n\n  stopScan() {\n    if (this.video) {\n      this.video.pause()\n      this.video.srcObject = null\n    }\n\n    this.stream?.getTracks().forEach(track => track.stop())\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":"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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  ]\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;

package/dist/stories/ox-input-barcode.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;WAWT,IAAI;qBACM,YAAY;iBAChB,SAAS;oBACN,WAAW;2BACJ,iBAAiB;cAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnE,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-barcode',\n  component: 'ox-input-barcode',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'text' },\n    scannable: { control: 'boolean' },\n    withoutEnter: { control: 'boolean' },\n    englishOnly: { control: 'boolean' },\n    selectAfterChange: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n  scannable?: boolean\n  withoutEnter?: boolean\n  englishOnly?: boolean\n  selectAfterChange?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'barcode',\n  scannable = true,\n  withoutEnter = true,\n  englishOnly = false,\n  selectAfterChange = false,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    ox-input-barcode {\n      font-size: 80px;\n      --input-font: initial;\n    }\n  </style>\n\n  <ox-input-barcode\n    name=${name}\n    ?without-enter=${withoutEnter}\n    ?scannable=${scannable}\n    ?english-only=${englishOnly}\n    ?select-after-change=${selectAfterChange}\n    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n    ?disabled=${disabled}\n  >\n  </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: false,\n  selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: true,\n  selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: true,\n  selectAfterChange: true\n}\n"]}
+{"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;WAeT,IAAI;qBACM,YAAY;iBAChB,SAAS;oBACN,WAAW;2BACJ,iBAAiB;cAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnE,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-barcode',\n  component: 'ox-input-barcode',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'text' },\n    scannable: { control: 'boolean' },\n    withoutEnter: { control: 'boolean' },\n    englishOnly: { control: 'boolean' },\n    selectAfterChange: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n  scannable?: boolean\n  withoutEnter?: boolean\n  englishOnly?: boolean\n  selectAfterChange?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'barcode',\n  scannable = true,\n  withoutEnter = true,\n  englishOnly = false,\n  selectAfterChange = false,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    #root {\n      height: 500px;\n    }\n\n    ox-input-barcode {\n      font-size: 80px;\n      --input-font: initial;\n    }\n  </style>\n\n  <ox-input-barcode\n    name=${name}\n    ?without-enter=${withoutEnter}\n    ?scannable=${scannable}\n    ?english-only=${englishOnly}\n    ?select-after-change=${selectAfterChange}\n    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n    ?disabled=${disabled}\n  >\n  </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: false,\n  selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: true,\n  selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: true,\n  selectAfterChange: true\n}\n"]}

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

@@ -13,6 +13,9 @@ declare const _default: {
         defaultValue: {
             control: string;
         };
+        composable: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
@@ -28,6 +31,7 @@ interface ArgTypes {
     name?: string;
     value?: object;
     defaultValue?: object;
+    composable?: boolean;
     disabled?: boolean;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -7,10 +7,11 @@ export default {
         name: { control: 'text' },
         value: { control: 'object' },
         defaultValue: { control: 'object' },
+        composable: { control: 'boolean' },
         disabled: { control: 'boolean' }
     }
 };
-const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disabled }) => html `
+const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, composable = true, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   <style>
@@ -25,6 +26,7 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
     name=${name}
     .value=${value}
     .defaultValue=${defaultValue}
+    ?composable=${composable}
     ?disabled=${disabled}
   >
   </ox-input-mass-fraction>
@@ -32,7 +34,12 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
 export const Regular = Template.bind({});
 Regular.args = {
     name: 'mass-fraction',
-    value: {},
+    value: {
+        H2O: 0.8,
+        N2O: 0.1,
+        CO2: 0.1
+    },
+    composable: true,
     defaultValue: {
         H2O: 0.8,
         N2O: 0.1,

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-mass-fraction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-mass-fraction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,eAAe,EACtB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;oBACE,YAAY;gBAChB,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,EAAE;IACT,YAAY,EAAE;QACZ,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAA","sourcesContent":["import '../src/ox-input-mass-fraction.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-mass-fraction',\n  component: 'ox-input-mass-fraction',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    defaultValue: { control: 'object' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  defaultValue?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'mass-fraction',\n  value = {},\n  defaultValue = {},\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-mass-fraction\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .defaultValue=${defaultValue}\n    ?disabled=${disabled}\n  >\n  </ox-input-mass-fraction>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'mass-fraction',\n  value: {},\n  defaultValue: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  }\n}\n"]}
+{"version":3,"file":"ox-input-mass-fraction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-mass-fraction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAClC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,eAAe,EACtB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,UAAU,GAAG,IAAI,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;oBACE,YAAY;kBACd,UAAU;gBACZ,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE;QACL,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;IACD,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE;QACZ,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAA","sourcesContent":["import '../src/ox-input-mass-fraction.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-mass-fraction',\n  component: 'ox-input-mass-fraction',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    defaultValue: { control: 'object' },\n    composable: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  defaultValue?: object\n  composable?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'mass-fraction',\n  value = {},\n  defaultValue = {},\n  composable = true,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-mass-fraction\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .defaultValue=${defaultValue}\n    ?composable=${composable}\n    ?disabled=${disabled}\n  >\n  </ox-input-mass-fraction>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'mass-fraction',\n  value: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  },\n  composable: true,\n  defaultValue: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  }\n}\n"]}