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

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.11",
   "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.11",
+    "@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": "e3b4a7601a1a6b0ccd909fe1e85fa8e524f1c5a5"
 }

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-crontab.ts

@@ -147,7 +147,7 @@ export class OxInputCrontab extends OxFormField {
 
     input:invalid {
       border-color: var(--md-sys-color-error);
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     label {

package/src/ox-input-duration.ts

@@ -56,8 +56,8 @@ export class OxInputDuration extends OxFormField {
     }
 
     input:invalid {
-      border-bottom: 1px solid var(--status-danger-color);
-      color: var(--status-danger-color);
+      border-bottom: 1px solid var(--md-sys-color-error);
+      color: var(--md-sys-color-error);
     }
 
     label {

package/src/ox-input-hashtags.ts

@@ -84,8 +84,8 @@ export class OxInputHashtags extends OxFormField {
     }
 
     .error {
-      margin: var(--margin-narrow);
-      color: var(--status-danger-color);
+      margin: var(--spacing-small);
+      color: var(--md-sys-color-error);
       font: var(--input-font);
       text-align: left;
     }

package/src/ox-input-key-values.ts

@@ -28,7 +28,7 @@ export class OxInputKeyValues extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: 14px;
     }
@@ -37,14 +37,14 @@ export class OxInputKeyValues extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-mass-fraction.ts

@@ -56,7 +56,7 @@ export class OxInputMassFraction extends OxFormField {
           display: flex;
           flex-flow: row nowrap;
           gap: var(--mass-fraction-gap, 3px);
-          margin-bottom: var(--margin-narrow);
+          margin-bottom: var(--spacing-small);
         }
 
         > [nofraction] {
@@ -69,7 +69,7 @@ export class OxInputMassFraction extends OxFormField {
         display: flex;
         flex-flow: row nowrap;
         gap: var(--mass-fraction-gap, 3px);
-        margin: var(--margin-narrow) 0;
+        margin: var(--spacing-small) 0;
       }
 
       button {

package/src/ox-input-options.ts

@@ -18,7 +18,7 @@ export class OxInputOptions extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -27,7 +27,7 @@ export class OxInputOptions extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {

package/src/ox-input-partition-keys.ts

@@ -28,7 +28,7 @@ export class OxInputPartitionKeys extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -37,14 +37,14 @@ export class OxInputPartitionKeys extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

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-input-unit-number.ts

@@ -213,7 +213,7 @@ export class OxInputUnitNumber extends OxFormField {
         display: flex;
         align-items: center;
         position: relative;
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
         font: var(--label-font);
         color: var(--label-color, var(--md-sys-color-on-surface));
         min-width: 24px;

package/src/ox-input-value-map.ts

@@ -32,7 +32,7 @@ export class OxInputValueMap extends OxFormField {
       display: flex;
       flex-direction: column;
       border: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+      padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-small);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -44,7 +44,7 @@ export class OxInputValueMap extends OxFormField {
     }
 
     div:last-child {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     div > * {
@@ -57,7 +57,7 @@ export class OxInputValueMap extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-value-ranges.ts

@@ -32,7 +32,7 @@ export class OxInputValueRange extends OxFormField {
       display: flex;
       flex-direction: column;
       border: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+      padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-small);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -44,7 +44,7 @@ export class OxInputValueRange extends OxFormField {
     }
 
     div:last-child {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     div > * {
@@ -57,7 +57,7 @@ export class OxInputValueRange extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-work-shift.ts

@@ -53,7 +53,7 @@ export class OxInputWorkShift extends OxFormField {
     }
     [data-header] {
       background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
-      padding: var(--padding-narrow);
+      padding: var(--spacing-small);
     }
     [data-header] span {
       font: var(--label-font);
@@ -62,7 +62,7 @@ export class OxInputWorkShift extends OxFormField {
       text-align: center;
     }
     [data-record] {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
     input,
     select {
@@ -88,7 +88,7 @@ export class OxInputWorkShift extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

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);