npm - @operato/input - Versions diffs - 1.13.14 → 2.0.0-alpha.11 - Mend

@operato/input 1.13.14 → 2.0.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +18 -16
package/dist/src/ox-input-barcode.d.ts +48 -5
package/dist/src/ox-input-barcode.js +96 -69
package/dist/src/ox-input-barcode.js.map +1 -1
package/dist/src/ox-input-data.d.ts +1 -1
package/dist/src/ox-input-data.js +6 -15
package/dist/src/ox-input-data.js.map +1 -1
package/dist/stories/ox-input-barcode.stories.js +4 -0
package/dist/stories/ox-input-barcode.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +8 -8
package/src/ox-input-barcode.ts +127 -63
package/src/ox-input-data.ts +7 -17
package/stories/ox-input-barcode.stories.ts +4 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,35 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-### [1.13.14](https://github.com/hatiolab/operato/compare/v1.13.13...v1.13.14) (2024-01-24)
+## [2.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
 ### :bug: Bug Fix
-* ox-input-data ([bd485dd](https://github.com/hatiolab/operato/commit/bd485dd1c508ec4247794ace55066b73cc70a1d7))
+* fix typo ([522552c](https://github.com/hatiolab/operato/commit/522552cf9cf4d51ab8b20fe941623d2bae3fa840))
+* ox-input-data 자동 타입 식별 기능 ([294015b](https://github.com/hatiolab/operato/commit/294015b3e9b82c7262b7e317c20a3d06de337339))
-### [1.13.12](https://github.com/hatiolab/operato/compare/v1.13.11...v1.13.12) (2024-01-24)
+## [2.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
 ### :bug: Bug Fix
-* fix typo ([5e71d20](https://github.com/hatiolab/operato/commit/5e71d20af7f30c57249cfbdfdeb9e88c48ef738e))
-* ox-input-data 자동 타입 식별 기능 ([0763ddb](https://github.com/hatiolab/operato/commit/0763ddb2b0b9334c357d4b16df530ee3c8b883f3))
+* use zbar-wasm for barcode scan ([41f632e](https://github.com/hatiolab/operato/commit/41f632e1e395e17364713e1ecb8f878615fc91ca))
-### [1.13.11](https://github.com/hatiolab/operato/compare/v1.13.10...v1.13.11) (2024-01-18)
+## [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 ([046f7d6](https://github.com/hatiolab/operato/commit/046f7d64a8280b6ad762cda0c88f58fa1fd644d8))
+* 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))
-### [1.13.9](https://github.com/hatiolab/operato/compare/v1.13.8...v1.13.9) (2024-01-17)
+## [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
@@ -39,29 +41,29 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
-### [1.13.7](https://github.com/hatiolab/operato/compare/v1.13.6...v1.13.7) (2024-01-15)
+## [2.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2024-01-14)
-**Note:** Version bump only for package @operato/input
+### :bug: Bug Fix
+* add caret into ox-input-unit ([e3cbdce](https://github.com/hatiolab/operato/commit/e3cbdced6de70a6eebebaf10468abecc6eec9946))
+* change class name OxInputUnit -> OxInputUnitNumber ([8d9453d](https://github.com/hatiolab/operato/commit/8d9453d9b05fe5c738cdf006fdeef1b674c8a2f1))
-### [1.13.4](https://github.com/hatiolab/operato/compare/v1.13.3...v1.13.4) (2024-01-15)
+## [2.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2024-01-09)
+**Note:** Version bump only for package @operato/input
-### :bug: Bug Fix
-* change class name OxInputUnit -> OxInputUnitNumber ([8447341](https://github.com/hatiolab/operato/commit/8447341805ed5949bdc5f2a6347d772a04365eac))
-### [1.13.3](https://github.com/hatiolab/operato/compare/v1.13.2...v1.13.3) (2024-01-13)
+## [2.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v1.13.1...v2.0.0-alpha.0) (2024-01-05)
+**Note:** Version bump only for package @operato/input
-### :bug: Bug Fix
-* add caret into ox-input-unit ([2ef5b5b](https://github.com/hatiolab/operato/commit/2ef5b5b73c67ca302f4f2eb8a2f9df83240070b3))

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

@@ -2,21 +2,64 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 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;
+    private popup;
+    private video;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import("lit").TemplateResult<1>;

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

@@ -5,10 +5,42 @@ 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 { OxPopup } from '@operato/popup';
 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 {
+    constructor() {
+        super(...arguments);
+        this.popup = null;
+        this.video = null;
+    }
     static { this.styles = [
         css `
       :host {
@@ -52,31 +84,6 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
       #scan-button[hidden] {
         display: none;
       }
-      ox-popup {
-        position: fixed;
-        width: 80vw;
-        height: 80vh;
-        transform: translate(10%, 10%);
-      }
-      video {
-        width: 100%;
-        height: 100%;
-      }
-      @media screen and (max-width: 460px) {
-        ox-popup {
-          position: fixed;
-          left: 0;
-          top: 0;
-          width: 100vw;
-          height: 100vh;
-          height: 100dvh;
-          transform: translate(0%, 0%);
-        }
-      }
     `
     ]; }
     connectedCallback() {
@@ -86,7 +93,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;
@@ -119,14 +126,6 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
         }}
         ?disabled=${this.disabled}
       ></button>
-      <ox-popup
-        @focusout=${() => {
-            this.stopScan();
-        }}
-      >
-        <video></video>
-      </ox-popup>
     `;
     }
     onInputChange(e) {
@@ -167,25 +166,62 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
     }
     async scan(e) {
         try {
-            this.popup.open({});
-            /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
-            await this.updateComplete;
-            var constraints = { 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해준다. */
+            if (this.popup) {
                 this.stopScan();
             }
+            this.popup = OxPopup.open({
+                template: html `
+          <video></video>
+          <mwc-icon
+            style="position: fixed; right: 0; top: 0; color: red; tabindex: 0"
+            @click=${() => {
+                    this.stopScan();
+                }}
+            >close</mwc-icon
+          >
+        `,
+                width: '100vw',
+                height: '100dvh'
+            });
+            this.video = this.popup.querySelector('video');
+            var constraints = { audio: false, video: { facingMode: 'environment' } }; /* backside camera first */
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            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 +230,17 @@ 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;
+        }
+        if (this.popup) {
+            this.popup.close();
+            this.popup = null;
+        }
         this.stream?.getTracks().forEach(track => track.stop());
-        this.reader?.reset();
-        delete this.stream;
-        delete this.reader;
     }
 };
 __decorate([
@@ -225,18 +261,9 @@ __decorate([
 __decorate([
     state()
 ], OxInputBarcode.prototype, "stream", void 0);
-__decorate([
-    state()
-], OxInputBarcode.prototype, "reader", void 0);
 __decorate([
     query('input')
 ], OxInputBarcode.prototype, "input", void 0);
-__decorate([
-    query('ox-popup')
-], OxInputBarcode.prototype, "popup", void 0);
-__decorate([
-    query('video')
-], OxInputBarcode.prototype, "video", void 0);
 OxInputBarcode = __decorate([
     customElement('ox-input-barcode')
 ], OxInputBarcode);

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

	@@ -1 +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"]}
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'\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 ]\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\n private popup: OxPopup \| null = null\n private video: HTMLVideoElement \| null = null\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 }\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 if (this.popup) {\n this.stopScan()\n }\n\n this.popup = OxPopup.open({\n template: html`\n <video></video>\n <mwc-icon\n style=\"position: fixed; right: 0; top: 0; color: red; tabindex: 0\"\n @click=${() => {\n this.stopScan()\n }}\n >close</mwc-icon\n >\n `,\n width: '100vw',\n height: '100dvh'\n })\n\n this.video! = this.popup.querySelector('video') as HTMLVideoElement\n\n var constraints = { audio: false, video: { facingMode: 'environment' } } / backside camera first /\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\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 if (this.popup) {\n this.popup.close()\n this.popup = null\n }\n\n this.stream?.getTracks().forEach(track => track.stop())\n }\n}\n"]}

package/dist/src/ox-input-data.d.ts CHANGED Viewed

@@ -17,6 +17,6 @@ export declare class OxInputData extends OxFormField {
     firstUpdated(): void;
     _setDataType(type: string | undefined | null): void;
     _clearData(): void;
-    _getStringData(data: any): string;
+    _getData(data: any): any;
     _onAfterValueChange(): Promise<void>;
 }

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

@@ -83,7 +83,7 @@ let OxInputData = class OxInputData extends OxFormField {
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
-      <ox-input-code .value=${this._getStringData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
       </ox-input-code>
     `;
     }
@@ -92,11 +92,10 @@ 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);
         });
     }
     _setDataType(type) {
@@ -105,7 +104,7 @@ let OxInputData = class OxInputData extends OxFormField {
             try {
                 switch (type) {
                     case 'string':
-                        this.value = this._getStringData(value);
+                        this.value = this._getData(value);
                         break;
                     case 'number':
                         if (!isNaN(value)) {
@@ -128,16 +127,8 @@ let OxInputData = class OxInputData extends OxFormField {
         this.value = undefined;
         this._onAfterValueChange();
     }
-    _getStringData(data) {
-        const type = typeof data;
-        switch (type) {
-            case 'object':
-                return JSON.stringify(data, null, 1);
-            case 'undefined':
-                return '';
-            default:
-                return String(data) || '';
-        }
+    _getData(data) {
+        return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1);
     }
     async _onAfterValueChange() {
         this.dispatchEvent(new CustomEvent('change', {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAS,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;aACnC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,CAAA;QAEnC,OAAO,IAAI,CAAA;;;;;;;qBAOM,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;2BAIR,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;8BAGpB,IAAI,CAAC,~~cAAc~~,CAAC,IAAI,CAAC,KAAK,CAAC,2CAA2C,IAAI,CAAC,QAAQ;;~~KAEhH~~,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAA;~~YAEnB~~,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;YACtC,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClC,IAAI,~~IAAI,~~CAAC,KAAK,KAAK,~~SAAS~~,~~IAAI~~,MAAM,~~CAAC~~,~~KAAK~~,IAAI,~~EAAE~~,EAAE,CAAC~~;oBACnD~~,~~OAAM;gBACR~~,CAAC;~~gBACD~~,IAAI,CAAC,~~KAAK~~,~~GAAG~~,~~MAAM~~,CAAC,~~KAAK,~~CAAA;~~YAC3B~~,CAAC~~;QACH~~,CAAC,~~CAAC,~~CAAA;IACJ,CAAC;IAED,YAAY,CAAC,IAA+B;QAC1C,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAEtB,IAAI,CAAC;gBACH,QAAQ,IAAI,EAAE,CAAC;oBACb,KAAK,QAAQ;wBACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,~~cAAc~~,CAAC,KAAK,CAAC,CAAA;~~wBACvC~~,MAAK;oBACP,KAAK,QAAQ;wBACX,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;4BAClB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;wBAC5B,CAAC;wBACD,MAAK;oBACP,KAAK,QAAQ;wBACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA;wBACpC,MAAK;gBACT,CAAC;YACH,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;YAChB,CAAC;QACH,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,~~cAAc~~,CAAC,IAAS;~~QACtB~~,~~MAAM~~,~~IAAI,GAAG,~~OAAO,IAAI,~~CAAA;QAExB~~,QAAQ,~~IAAI,EAAE,~~CAAC~~;YACb~~,~~KAAK,QAAQ;gBACX,OAAO,IAAI,~~CAAC,~~SAAS,~~CAAC,IAAI,~~EAAE,~~IAAI,EAAE,CAAC,CAAC,~~CAAA;YACtC~~,~~KAAK~~,~~WAAW;gBACd~~,~~OAAO~~,~~EAAE,CAAA;YACX;gBACE,OAAO,MAAM,~~CAAC,IAAI,~~CAAC~~,IAAI,EAAE,~~CAAA;QAC7B~~,CAAC;~~IACH~~,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;~~AA7IU~~,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,~~CA8IvB~~","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, state } 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'\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 .value=${this.~~_getStringData~~(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\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 _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 = this.~~_getStringData~~(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.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"]}
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, state } 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'\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 .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 _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 = this._getData(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.requestUpdate()\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 async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}

package/dist/stories/ox-input-barcode.stories.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;;;;;;;;;;;;;;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"]}