@operato/input 7.0.0-rc.0 → 7.0.0-rc.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0-rc.10",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -208,9 +208,9 @@
     "@material/web": "^1.5.0",
     "@operato/color-picker": "^7.0.0-rc.0",
     "@operato/i18n": "^7.0.0-rc.0",
-    "@operato/popup": "^7.0.0-rc.0",
-    "@operato/styles": "^7.0.0-rc.0",
-    "@operato/utils": "^7.0.0-rc.0",
+    "@operato/popup": "^7.0.0-rc.10",
+    "@operato/styles": "^7.0.0-rc.10",
+    "@operato/utils": "^7.0.0-rc.8",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -254,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1"
+  "gitHead": "96efe00ae617394f5a4fee901be5e20323ff7e57"
 }

package/src/index.ts

@@ -30,3 +30,4 @@ export * from './ox-input-select-buttons.js'
 export * from './ox-input-textarea.js'
 export * from './ox-input-direction.js'
 export * from './ox-input-table-column-config.js'
+export * from './ox-input-search.js'

package/src/ox-input-barcode.ts

@@ -48,6 +48,8 @@ export class OxInputBarcode extends OxFormField {
         display: flex;
         align-items: center;
         border: none;
+        background-color: transparent;
+        height: var(--ox-input-height, var(--form-element-height-medium));
       }
 
       * {
@@ -61,17 +63,16 @@ export class OxInputBarcode extends OxFormField {
       input {
         flex: 1;
         width: 10px; /* intentionally width set */
+        border: var(--ox-input-border, 1px solid var(--md-sys-color-outline));
+        border-radius: var(--ox-input-radius, var(--md-sys-shape-corner-small));
+        background-color: var(--ox-input-background-color, var(--md-sys-color-on-primary));
+        color: var(--ox-input-color, var(--md-sys-color-on-primary-container));
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+
         box-sizing: border-box;
-        padding: 0 var(--spacing-small);
         padding-right: 35px;
-        height: var(--form-element-height-medium);
-        border: 1px solid var(--md-sys-color-outline);
-        border-radius: var(--md-sys-shape-corner-small);
-
-        background-color: var(--md-sys-color-on-primary);
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-on-primary-container);
       }
+
       input:focus {
         outline: none;
         border-color: var(--md-sys-color-secondary-fixed-dim);
@@ -81,7 +82,7 @@ export class OxInputBarcode extends OxFormField {
         display: block;
         position: relative;
         margin-left: -35px;
-        width: 30px;
+        width: 35px;
         border: none;
         background: var(--barcodescan-input-button-icon) no-repeat center center;
       }
@@ -96,7 +97,7 @@ export class OxInputBarcode extends OxFormField {
    * Indicates whether barcode scanning is enabled.
    * @property {Boolean} scannable
    */
-  @property({ type: Boolean }) scannable?: boolean
+  @property({ type: Boolean, attribute: true }) scannable?: boolean
 
   /**
    * If true, the "Enter" key press event is not fired after scanning a barcode.
@@ -132,8 +133,6 @@ export class OxInputBarcode extends OxFormField {
   connectedCallback() {
     super.connectedCallback()
 
-    this.scannable = false
-
     if (navigator.mediaDevices) {
       ;(async () => {
         try {
@@ -143,9 +142,12 @@ export class OxInputBarcode extends OxFormField {
             this.scannable = true
           }
         } catch (e) {
+          this.scannable = false
           console.warn('this device not support camera for barcode scan', e)
         }
       })()
+    } else {
+      this.scannable = false
     }
   }
 

package/src/ox-input-search.ts

@@ -4,7 +4,7 @@
 
 import '@material/web/icon/icon.js'
 
-import debounce from 'lodash-es/debounce'
+// import debounce from 'lodash-es/debounce'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
@@ -50,7 +50,7 @@ export class OxInputSearch extends OxFormField {
 
   @query('input') input!: HTMLInputElement
 
-  private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)
+  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)
 
   render() {
     return html`

package/src/ox-select.ts

@@ -10,14 +10,12 @@ import { css, html, render, PropertyValues, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
-import { TooltipStyles } from '@operato/styles'
 
 import { OxFormField } from './ox-form-field.js'
 
 @customElement('ox-select')
 export class OxSelect extends OxFormField {
   static styles = [
-    TooltipStyles,
     css`
       :host {
         display: block;

package/stories/ox-input-search.stories.ts

@@ -1,4 +1,5 @@
-import '../src/ox-input-search.js'
+/* 어디에서 임포트하는 지는 모르지만, 아래 코멘트를 풀면 중복 정의 오류가 발생한다. */
+// import '../src/ox-input-search.js'
 
 import { html, TemplateResult } from 'lit'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'

package/themes/grist-theme.css

@@ -61,7 +61,7 @@ body {
 
   --grid-record-dirty-border-top: 24px solid rgba(var(--md-sys-color-primary-rgb), 0.6);
   --grid-record-dirty-border-left: 24px solid transparent;
-  --grid-record-dirty-icon-font: bold 10px/12px var(--mdc-icon-font, 'Material Icons');
+  --grid-record-dirty-icon-font: bold 10px/12px var(--md-icon-font, 'Material Symbols Outlined');
   --grid-record-dirty-icon-size: var(--fontsize-large);
   --grid-record-dirty-color: var(--md-sys-color-surface);