@operato/input 0.2.41 → 0.2.42

package/src/ox-input-barcode.ts

@@ -0,0 +1,203 @@
+import '@operato/popup'
+
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { OxPopup } from '@operato/popup'
+import { BrowserMultiFormatReader } from '@zxing/library'
+
+import { OxFormField } from './ox-formfield'
+
+const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`
+
+@customElement('ox-input-barcode')
+export class OxInputBarcode extends OxFormField {
+  static styles = [
+    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;
+      }
+
+      *: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;
+      }
+
+      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;
+          transform: translate(0%, 0%);
+        }
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: true }) name?: string
+  @property({ type: Boolean }) scannable?: boolean
+  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean
+  @property({ type: String }) value?: string
+
+  @state() stream?: MediaStream
+  @state() reader?: BrowserMultiFormatReader
+
+  @query('input') input!: HTMLInputElement
+  @query('ox-popup') popup!: OxPopup
+  @query('video') video!: HTMLVideoElement
+
+  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="text" .value=${this.value || ''} maxlength="50" @change=${(e: Event) => this.onChange(e)} />
+      <button
+        ?hidden=${!this.scannable}
+        id="scan-button"
+        @click=${(e: MouseEvent) => {
+          this.scan(e)
+        }}
+      ></button>
+
+      <ox-popup
+        @focusout=${() => {
+          this.stopScan()
+        }}
+      >
+        <video></video>
+      </ox-popup>
+    `
+  }
+
+  onChange(e: Event) {
+    this.value = (e.target as HTMLInputElement)?.value
+    //@ts-ignore
+    this.dispatchEvent(new e.constructor(e.type, e))
+  }
+
+  async scan(e: MouseEvent) {
+    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()
+        input.value = String(result)
+
+        if (!this.withoutEnter) {
+          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))
+          input.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: String(result)
+            })
+          )
+        }
+      } 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 {
+      this.popup.close()
+
+      this.stopScan()
+    }
+  }
+
+  stopScan() {
+    this.video.pause()
+
+    this.stream && this.stream.getTracks().forEach(track => track.stop())
+    this.reader && this.reader.reset()
+
+    delete this.stream
+    delete this.reader
+  }
+}

package/src/ox-input-stack.ts

@@ -72,7 +72,13 @@ export default class OxInputStack extends OxFormField {
   _notifyChange() {
     this.value = this.stack
 
-    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true, composed: true }))
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    )
   }
 
   _onClickAddFloor(e: Event) {

package/src/ox-select.ts

@@ -6,11 +6,12 @@ import '@material/mwc-icon'
 import '@operato/popup'
 
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-formfield'
 import { OxPopupList } from '@operato/popup'
 
+import { OxFormField } from './ox-formfield'
+
 @customElement('ox-select')
 export class Select extends OxFormField {
   static styles = [