@operato/input 2.0.0-alpha.0 → 2.0.0-alpha.100

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.100",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "./ox-input-search.js": "./dist/src/ox-input-search.js",
     "./ox-input-value-map.js": "./dist/src/ox-input-value-map.js",
     "./ox-input-value-ranges.js": "./dist/src/ox-input-value-ranges.js",
+    "./ox-input-i18n-label.js": "./dist/src/ox-input-i18n-label.js",
     "./ox-input-partition-keys.js": "./dist/src/ox-input-partition-keys.js",
     "./ox-input-table.js": "./dist/src/ox-input-table.js",
     "./ox-input-scene-component-id.js": "./dist/src/ox-input-scene-component-id.js",
@@ -143,6 +144,9 @@
       "./ox-input-value-ranges.js": [
         "./dist/src/ox-input-value-ranges.d.ts"
       ],
+      "./ox-input-i18n-label.js": [
+        "./dist/src/ox-input-i18n-label.d.ts"
+      ],
       "./ox-input-partition-keys.js": [
         "./dist/src/ox-input-partition-keys.d.ts"
       ],
@@ -189,39 +193,39 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
-    "@lit/localize": "^0.11.2",
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/color-picker": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
+    "@lit/localize": "^0.12.1",
+    "@material/web": "^1.4.0",
+    "@operato/color-picker": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/popup": "^2.0.0-alpha.100",
+    "@operato/styles": "^2.0.0-alpha.100",
+    "@operato/utils": "^2.0.0-alpha.68",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
     "@types/codemirror": "^5.60.5",
-    "@zxing/library": "^0.20.0",
+    "@undecaf/zbar-wasm": "^0.10.1",
     "codemirror": "^6.0.1",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@lit/localize-tools": "^0.6.3",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@lit/localize-tools": "^0.7.2",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -239,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f995e977847947a1ac4043ff7c627a5cf2ada67b"
+  "gitHead": "efe5f575ce5241aeb84a0af45915dca63dcce68e"
 }

package/src/ox-checkbox.ts

@@ -15,12 +15,10 @@ import { OxFormField } from './ox-form-field'
 export class OxCheckbox extends OxFormField {
   static styles = [
     css`
-      :host {
-        display: flex;
-      }
-
       div {
         display: flex;
+        gap: var(--input-intra-gap, 7px);
+
         align-items: center;
         cursor: pointer;
       }
@@ -65,7 +63,6 @@ export class OxCheckbox extends OxFormField {
       }
 
       [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
@@ -78,16 +75,22 @@ export class OxCheckbox extends OxFormField {
   @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false
   @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false
   @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false
+  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false
 
   @state() _hasInner: boolean = !!this.innerHTML.trim().length
 
   render() {
     return html`
       <div @click=${this.onClick} ?disabled=${this.disabled}>
+        ${this._hasInner && this.left
+          ? html` <span label>
+              <slot></slot>
+            </span>`
+          : ''}
         <a href="#" @click=${(e: Event) => e.preventDefault()} checkbox>
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
-        ${this._hasInner
+        ${this._hasInner && !this.left
           ? html` <span label>
               <slot></slot>
             </span>`

package/src/ox-input-barcode.ts

@@ -6,14 +6,40 @@ import '@operato/popup/ox-popup.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { scanImageData } from '@undecaf/zbar-wasm'
 
 import { OxPopup } from '@operato/popup'
-import { BrowserMultiFormatReader } from '@zxing/library'
 
 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
+ */
 @customElement('ox-input-barcode')
 export class OxInputBarcode extends OxFormField {
   static styles = [
@@ -41,6 +67,7 @@ export class OxInputBarcode extends OxFormField {
         padding-right: 35px;
         font: var(--input-font);
         color: var(--primary-text-color);
+        background-color: inherit;
       }
       input:focus {
         outline: none;
@@ -59,46 +86,45 @@ export 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%);
-        }
-      }
     `
   ]
 
+  /**
+   * Indicates whether barcode scanning is enabled.
+   * @property {Boolean} scannable
+   */
   @property({ type: Boolean }) scannable?: boolean
+
+  /**
+   * If true, the "Enter" key press event is not fired after scanning a barcode.
+   * @property {Boolean} withoutEnter
+   */
   @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean
+
+  /**
+   * The value of the input field.
+   * @property {String} declare value
+   */
   @property({ type: String }) declare value?: string
+
+  /**
+   * If true, only English characters are allowed in the input field.
+   * @property {Boolean} englishOnly
+   */
   @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean
+
+  /**
+   * If true, the input field is automatically selected after a change event.
+   * @property {Boolean} selectAfterChange
+   */
   @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean
 
   @state() stream?: MediaStream
-  @state() reader?: BrowserMultiFormatReader
 
   @query('input') input!: HTMLInputElement
-  @query('ox-popup') popup!: OxPopup
-  @query('video') video!: HTMLVideoElement
+
+  private popup: OxPopup | null = null
+  private video: HTMLVideoElement | null = null
 
   connectedCallback() {
     super.connectedCallback()
@@ -108,7 +134,7 @@ export class OxInputBarcode extends OxFormField {
     if (navigator.mediaDevices) {
       ;(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
@@ -143,14 +169,6 @@ export class OxInputBarcode extends OxFormField {
         }}
         ?disabled=${this.disabled}
       ></button>
-
-      <ox-popup
-        @focusout=${() => {
-          this.stopScan()
-        }}
-      >
-        <video></video>
-      </ox-popup>
     `
   }
 
@@ -201,27 +219,74 @@ export class OxInputBarcode extends OxFormField {
 
   async scan(e: MouseEvent) {
     try {
-      this.popup.open({})
+      if (this.popup) {
+        this.stopScan()
+      }
+
+      this.popup = OxPopup.open({
+        template: html`
+          <video></video>
+          <md-icon
+            style="position: fixed; right: 0; top: 0; color: red; tabindex: 0"
+            @click=${() => {
+              this.stopScan()
+            }}
+            >close</md-icon
+          >
+        `,
+        width: '100vw',
+        height: '100dvh'
+      })
 
-      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
-      await this.updateComplete
+      this.video! = this.popup.querySelector('video') as HTMLVideoElement
 
-      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' }))
+      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()
+          }
         }
-      } else {
-        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
-        this.stopScan()
+
+        await detect()
       }
     } catch (err) {
       /*
@@ -229,20 +294,20 @@ export class OxInputBarcode extends OxFormField {
        * 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()
+    if (this.video) {
+      this.video.pause()
+      this.video.srcObject = null
+    }
 
-    this.stream?.getTracks().forEach(track => track.stop())
-    this.reader?.reset()
+    if (this.popup) {
+      this.popup.close()
+      this.popup = null
+    }
 
-    delete this.stream
-    delete this.reader
+    this.stream?.getTracks().forEach(track => track.stop())
   }
 }

package/src/ox-input-code.ts

@@ -5,8 +5,9 @@
 import { css, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { minimalSetup } from 'codemirror'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
@@ -25,7 +26,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 @customElement('ox-input-code')
@@ -51,8 +52,7 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
   @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
@@ -88,7 +88,9 @@ export class OxInputCode extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          minimalSetup,
           ...language,
+          ...(this.showLineNumbers ? [lineNumbers()] : []),
           bracketMatching(),
           closeBrackets(),
           history(),
@@ -129,15 +131,6 @@ export class OxInputCode extends OxFormField {
       this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
     })
 
-    // this._editor.contentDOM.addEventListener('change', async e => {
-    //   this._self_changing = true
-    //   this._changed = true
-
-    //   await this.updateComplete
-
-    //   this._self_changing = false
-    // })
-
     return this._editor
   }
 }

package/src/ox-input-container.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, LitElement } from 'lit'
@@ -17,7 +17,7 @@ export class OxInputContainer extends LitElement {
   render() {
     return html`
       <slot> </slot>
-      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>
+      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>
 
       <ox-popup-list></ox-popup-list>
     `

package/src/ox-input-crontab.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -211,14 +209,12 @@ export class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    mwc-button {
-      background-color: var(--secondary-color);
+    button {
       border-radius: var(--button-border-radius);
-      --mdc-theme-primary: #fff;
       margin: 0.25rem;
     }
-    mwc-button:hover,
-    mwc-button:active {
+    button:hover,
+    button:active {
       background-color: var(--primary-color);
     }
   `
@@ -399,7 +395,7 @@ export class OxInputCrontab extends OxFormField {
   }
 
   get focusableElements(): HTMLElement[] {
-    return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))
+    return Array.from(this.renderRoot.querySelectorAll('select, input, button'))
   }
 
   firstUpdated() {