@things-factory/barcode-ui 7.0.0-alpha.8 → 7.0.0

package/client/components/barcode-input.ts

@@ -0,0 +1,56 @@
+import './barcode-tag'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('barcode-input')
+export class BarcodeInput extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        padding: initial;
+        border: 0;
+      }
+
+      :host * {
+        align-self: stretch;
+      }
+
+      input {
+        margin: 5px 0;
+      }
+
+      barcode-tag {
+        margin: 5px 0;
+      }
+    `
+  ]
+
+  @property({ type: String }) bcid?: string
+  @property({ type: Number }) bcWidth?: number
+  @property({ type: Number }) bcHeight?: number
+  @property({ type: Number }) bcScale?: number
+  @property({ type: String }) value?: string
+
+  render() {
+    return html`
+      <input type="text" @change=${this.onChange.bind(this)} .value=${this.value || ''} />
+      <barcode-tag
+        .bcid=${this.bcid}
+        .value=${this.value}
+        .bcWidth=${this.bcWidth}
+        .bcHeight=${this.bcHeight}
+        .bcScale=${this.bcScale}
+      ></barcode-tag>
+    `
+  }
+
+  onChange(e) {
+    this.value = e.target.value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/client/components/{barcode-scanable-input.js → barcode-scanable-input.ts}

@@ -1,13 +1,15 @@
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { openPopup } from '@operato/layout'
 import { BrowserMultiFormatReader } from '@zxing/library'
 
-import barcodeIcon from '../../assets/images/barcode.png'
+const barcodeIcon = new URL('../../assets/images/barcode.png', import.meta.url).href
 
+@customElement('scan-camera-template')
 class ScanCameraTemplate extends LitElement {
   get video() {
-    return this.shadowRoot.querySelector('video')
+    return this.renderRoot.querySelector('video')
   }
 
   render() {
@@ -15,75 +17,68 @@ class ScanCameraTemplate extends LitElement {
   }
 }
 
-customElements.define('scan-camera-template', ScanCameraTemplate)
-
 /**
  * @deprecated use ox-input-barcode from @operato/input/ox-input-barcode.js
  *
  * BarcodeScanableInput is using mediadevice api of html5
  */
+@customElement('barcode-scanable-input')
 export class BarcodeScanableInput extends LitElement {
-  static get properties() {
-    return {
-      name: {
-        attribute: true
-      },
-      scannable: Boolean,
-      withoutEnter: {
-        attribute: 'without-enter',
-        type: Boolean
-      },
-      value: String
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        border: none;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+
+        padding: var(--custom-input-barcode-field-padding) !important;
+      }
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          align-items: center;
-          border: none;
-          overflow: hidden;
-          background-color: #fff;
-
-          padding: var(--custom-input-barcode-field-padding) !important;
-        }
+      * {
+        align-self: stretch;
+      }
 
-        * {
-          align-self: stretch;
-        }
+      *:focus {
+        outline: none;
+      }
 
-        *:focus {
-          outline: none;
-        }
+      input {
+        flex: 1 !important;
+        border: none;
+        font: var(--custom-input-barcode-field-font);
+        width: 10px;
+        flex-grow: 1;
+      }
 
-        input {
-          flex: 1 !important;
-          border: none;
-          font: var(--custom-input-barcode-field-font);
-          width: 10px;
-          flex-grow: 1;
-        }
+      #scan-button {
+        display: block;
+        width: 30px;
+        height: 100%;
+        min-height: 24px;
+        border: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: var(--barcodescan-input-button-icon);
+      }
 
-        #scan-button {
-          display: block;
-          width: 30px;
-          height: 100%;
-          min-height: 24px;
-          border: none;
-          background-color: transparent;
-          background-repeat: no-repeat;
-          background-position: center;
-          background-image: var(--barcodescan-input-button-icon);
-        }
+      #scan-button[hidden] {
+        display: none;
+      }
+    `
+  ]
 
-        #scan-button[hidden] {
-          display: none;
-        }
-      `
-    ]
-  }
+  @property({ type: String, attribute: true }) name?: string
+  @property({ type: Boolean }) scannable?: boolean
+  @property({ type: Boolean, attribute: 'without-enter' }) withoutEnter?: boolean
+  @property({ type: String }) value?: string
+
+  @query('input') input!: HTMLInputElement
+
+  private stream?: MediaStream
+  private reader?: BrowserMultiFormatReader
 
   connectedCallback() {
     super.connectedCallback()
@@ -124,20 +119,19 @@ export class BarcodeScanableInput extends LitElement {
     `
   }
 
-  get input() {
-    return this.shadowRoot.querySelector('input')
-  }
-
   async scan(e) {
+    var popup
+
     try {
-      var template = document.createElement('scan-camera-template')
+      var template = document.createElement('scan-camera-template') as any
 
-      var popup = openPopup(template, {
+      popup = openPopup(template, {
         backdrop: true,
         size: 'large',
         closable: false
       })
-      popup.onclosed = e => {
+
+      popup.onclosed = () => {
         /* 뒤로가기 등으로 popup이 종료된 경우에도 scan 자원을 clear해준다. */
         this.stopScan()
       }
@@ -152,7 +146,7 @@ export class BarcodeScanableInput extends LitElement {
       if (!popup.closed && this.stream) {
         var result = await this.reader.decodeOnceFromStream(this.stream, template.video)
 
-        this.input.value = result
+        this.input.value = result as any
         if (!this.withoutEnter) {
           this.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))
         }
@@ -167,7 +161,7 @@ export class BarcodeScanableInput extends LitElement {
        */
       console.warn(err)
     } finally {
-      popup.close()
+      popup?.close()
 
       this.stopScan()
     }
@@ -181,5 +175,3 @@ export class BarcodeScanableInput extends LitElement {
     delete this.reader
   }
 }
-
-customElements.define('barcode-scanable-input', BarcodeScanableInput)

package/client/components/{barcode-tag.js → barcode-tag.ts}

@@ -1,49 +1,45 @@
-import bwipjs from '!bwip-js'
+import bwipjs from 'bwip-js'
 import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
 /**
  * @deprecated use ox-barcode from @operato/barcode/ox-barcode.js
  */
+@customElement('barcode-tag')
 export class BarcodeTag extends LitElement {
-  static get properties() {
-    return {
-      bcid: String,
-      bcWidth: Number,
-      bcHeight: Number,
-      bcScale: Number,
-      value: String,
-      validity: Boolean,
-      padding: Number
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          align-items: center;
-
-          position: relative;
-        }
-
-        canvas {
-          width: 100%;
-          height: 100px;
-        }
-
-        [dimmer] {
-          display: block;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          background-color: rgba(255, 0, 0, 0.5);
-        }
-      `
-    ]
-  }
+        position: relative;
+      }
+
+      canvas {
+        width: 100%;
+        height: 100px;
+      }
+
+      [dimmer] {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: rgba(255, 0, 0, 0.5);
+      }
+    `
+  ]
+
+  @property({ type: String }) bcid?: string
+  @property({ type: Number }) bcWidth?: number
+  @property({ type: Number }) bcHeight?: number
+  @property({ type: Number }) bcScale?: number
+  @property({ type: String }) value?: string
+  @property({ type: Boolean }) validity?: boolean
+  @property({ type: Number }) padding?: number
 
   render() {
     return html`
@@ -61,7 +57,7 @@ export class BarcodeTag extends LitElement {
   _downloadQR() {
     if (this.value && this.value != '') {
       let link = document.createElement('a')
-      let canvas = this.shadowRoot.querySelector('canvas')
+      let canvas = this.renderRoot.querySelector('canvas') as HTMLCanvasElement
 
       let options = {
         bcid: this.bcid || 'code128', // Barcode type
@@ -74,12 +70,14 @@ export class BarcodeTag extends LitElement {
         textalign: 'center',
         backgroundcolor: 'ffffff'
       }
+      //@ts-ignore
       canvas = bwipjs.toCanvas(canvas, options)
 
       link.download = `${this.value}` + '-barcode.png'
       link.href = canvas.toDataURL()
       link.click()
 
+      //@ts-ignore
       bwipjs.toCanvas(canvas, {
         bcid: this.bcid || 'code128', // Barcode type
         height: this.bcHeight || 20, // Bar height, in millimeters
@@ -101,9 +99,10 @@ export class BarcodeTag extends LitElement {
       textalign: 'center'
     }
 
-    let canvas = this.shadowRoot.querySelector('canvas')
+    let canvas = this.renderRoot.querySelector('canvas')
 
     try {
+      //@ts-ignore
       bwipjs.toCanvas(canvas, options)
 
       this.validity = true
@@ -114,5 +113,3 @@ export class BarcodeTag extends LitElement {
     }
   }
 }
-
-customElements.define('barcode-tag', BarcodeTag)

package/dist-client/components/barcode-input.d.ts

@@ -0,0 +1,12 @@
+import './barcode-tag';
+import { LitElement } from 'lit';
+export declare class BarcodeInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    bcid?: string;
+    bcWidth?: number;
+    bcHeight?: number;
+    bcScale?: number;
+    value?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    onChange(e: any): void;
+}

package/dist-client/components/barcode-input.js

@@ -0,0 +1,71 @@
+import { __decorate, __metadata } from "tslib";
+import './barcode-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let BarcodeInput = class BarcodeInput extends LitElement {
+    render() {
+        return html `
+      <input type="text" @change=${this.onChange.bind(this)} .value=${this.value || ''} />
+      <barcode-tag
+        .bcid=${this.bcid}
+        .value=${this.value}
+        .bcWidth=${this.bcWidth}
+        .bcHeight=${this.bcHeight}
+        .bcScale=${this.bcScale}
+      ></barcode-tag>
+    `;
+    }
+    onChange(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+BarcodeInput.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        padding: initial;
+        border: 0;
+      }
+
+      :host * {
+        align-self: stretch;
+      }
+
+      input {
+        margin: 5px 0;
+      }
+
+      barcode-tag {
+        margin: 5px 0;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BarcodeInput.prototype, "bcid", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BarcodeInput.prototype, "bcWidth", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BarcodeInput.prototype, "bcHeight", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BarcodeInput.prototype, "bcScale", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BarcodeInput.prototype, "value", void 0);
+BarcodeInput = __decorate([
+    customElement('barcode-input')
+], BarcodeInput);
+export { BarcodeInput };
+//# sourceMappingURL=barcode-input.js.map

package/dist-client/components/barcode-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"barcode-input.js","sourceRoot":"","sources":["../../client/components/barcode-input.ts"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAgC1C,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,EAAE;;gBAEtE,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,KAAK;mBACR,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;mBACd,IAAI,CAAC,OAAO;;KAE1B,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA/CM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBF;CACF,AAvBY,CAuBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAe;AA9B/B,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAiDxB","sourcesContent":["import './barcode-tag'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('barcode-input')\nexport class BarcodeInput extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        padding: initial;\n        border: 0;\n      }\n\n      :host * {\n        align-self: stretch;\n      }\n\n      input {\n        margin: 5px 0;\n      }\n\n      barcode-tag {\n        margin: 5px 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) bcid?: string\n  @property({ type: Number }) bcWidth?: number\n  @property({ type: Number }) bcHeight?: number\n  @property({ type: Number }) bcScale?: number\n  @property({ type: String }) value?: string\n\n  render() {\n    return html`\n      <input type=\"text\" @change=${this.onChange.bind(this)} .value=${this.value || ''} />\n      <barcode-tag\n        .bcid=${this.bcid}\n        .value=${this.value}\n        .bcWidth=${this.bcWidth}\n        .bcHeight=${this.bcHeight}\n        .bcScale=${this.bcScale}\n      ></barcode-tag>\n    `\n  }\n\n  onChange(e) {\n    this.value = e.target.value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/components/barcode-scanable-input.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @deprecated use ox-input-barcode from @operato/input/ox-input-barcode.js
+ *
+ * BarcodeScanableInput is using mediadevice api of html5
+ */
+export declare class BarcodeScanableInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name?: string;
+    scannable?: boolean;
+    withoutEnter?: boolean;
+    value?: string;
+    input: HTMLInputElement;
+    private stream?;
+    private reader?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    scan(e: any): Promise<void>;
+    stopScan(): void;
+}

package/dist-client/components/barcode-scanable-input.js

@@ -0,0 +1,177 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { openPopup } from '@operato/layout';
+import { BrowserMultiFormatReader } from '@zxing/library';
+const barcodeIcon = new URL('../../assets/images/barcode.png', import.meta.url).href;
+let ScanCameraTemplate = class ScanCameraTemplate extends LitElement {
+    get video() {
+        return this.renderRoot.querySelector('video');
+    }
+    render() {
+        return html ` <video></video> `;
+    }
+};
+ScanCameraTemplate = __decorate([
+    customElement('scan-camera-template')
+], ScanCameraTemplate);
+/**
+ * @deprecated use ox-input-barcode from @operato/input/ox-input-barcode.js
+ *
+ * BarcodeScanableInput is using mediadevice api of html5
+ */
+let BarcodeScanableInput = class BarcodeScanableInput extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.scannable = false;
+        if (navigator.mediaDevices) {
+            ;
+            (async () => {
+                try {
+                    var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+                    if (stream) {
+                        stream.getTracks().forEach(track => track.stop());
+                        this.scannable = true;
+                    }
+                }
+                catch (e) {
+                    console.warn('this device not support camera for barcode scan', e);
+                }
+            })();
+        }
+    }
+    disconnectedCallback() {
+        this.stopScan();
+    }
+    render() {
+        this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`);
+        return html `
+      <input type="search" .value=${this.value || ''} maxlength="50" />
+      <button
+        ?hidden=${!this.scannable}
+        id="scan-button"
+        @click=${e => {
+            this.scan(e);
+        }}
+      ></button>
+    `;
+    }
+    async scan(e) {
+        var popup;
+        try {
+            var template = document.createElement('scan-camera-template');
+            popup = openPopup(template, {
+                backdrop: true,
+                size: 'large',
+                closable: false
+            });
+            popup.onclosed = () => {
+                /* 뒤로가기 등으로 popup이 종료된 경우에도 scan 자원을 clear해준다. */
+                this.stopScan();
+            };
+            /* 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 (!popup.closed && this.stream) {
+                var result = await this.reader.decodeOnceFromStream(this.stream, template.video);
+                this.input.value = result;
+                if (!this.withoutEnter) {
+                    this.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
+                }
+            }
+            else {
+                /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
+                this.stopScan();
+            }
+        }
+        catch (err) {
+            /*
+             * 1. stream device 문제로 예외 발생한 경우.
+             * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
+             */
+            console.warn(err);
+        }
+        finally {
+            popup === null || popup === void 0 ? void 0 : popup.close();
+            this.stopScan();
+        }
+    }
+    stopScan() {
+        this.stream && this.stream.getTracks().forEach(track => track.stop());
+        this.reader && this.reader.reset();
+        delete this.stream;
+        delete this.reader;
+    }
+};
+BarcodeScanableInput.styles = [
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+        border: none;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+
+        padding: var(--custom-input-barcode-field-padding) !important;
+      }
+
+      * {
+        align-self: stretch;
+      }
+
+      *:focus {
+        outline: none;
+      }
+
+      input {
+        flex: 1 !important;
+        border: none;
+        font: var(--custom-input-barcode-field-font);
+        width: 10px;
+        flex-grow: 1;
+      }
+
+      #scan-button {
+        display: block;
+        width: 30px;
+        height: 100%;
+        min-height: 24px;
+        border: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: var(--barcodescan-input-button-icon);
+      }
+
+      #scan-button[hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: String, attribute: true }),
+    __metadata("design:type", String)
+], BarcodeScanableInput.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BarcodeScanableInput.prototype, "scannable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'without-enter' }),
+    __metadata("design:type", Boolean)
+], BarcodeScanableInput.prototype, "withoutEnter", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BarcodeScanableInput.prototype, "value", void 0);
+__decorate([
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], BarcodeScanableInput.prototype, "input", void 0);
+BarcodeScanableInput = __decorate([
+    customElement('barcode-scanable-input')
+], BarcodeScanableInput);
+export { BarcodeScanableInput };
+//# sourceMappingURL=barcode-scanable-input.js.map