@operato/input 7.0.0-rc.8 → 7.0.0

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.8",
+  "version": "7.0.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -206,11 +206,11 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
     "@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.8",
-    "@operato/styles": "^7.0.0-rc.8",
-    "@operato/utils": "^7.0.0-rc.8",
+    "@operato/color-picker": "^7.0.0",
+    "@operato/i18n": "^7.0.0",
+    "@operato/popup": "^7.0.0",
+    "@operato/styles": "^7.0.0",
+    "@operato/utils": "^7.0.0",
     "@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": "96f980e10bdad5b1e1d4e8e8be557e9f650b95ce"
+  "gitHead": "b1bdd00f672eb45ffc409ed971ac60007eda4090"
 }

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/stories/ox-buttons-radio.stories.ts

@@ -10,8 +10,7 @@ export default {
   component: 'ox-buttons-radio',
   argTypes: {
     value: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +65,6 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-buttons-radio
       @change=${(e: CustomEvent) => {
@@ -91,6 +85,5 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
 export const Regular = Template.bind({})
 Regular.args = {
   value: '',
-  disabled: false,
-  theme: 'light'
+  disabled: false
 }

package/stories/ox-checkbox.stories.ts

@@ -2,7 +2,6 @@ import '@material/web/all.js'
 import '../src/ox-checkbox.js'
 
 import { TemplateResult, html } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
@@ -14,8 +13,7 @@ export default {
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +30,6 @@ interface ArgTypes {
   indeterminatable?: boolean
   indeterminate?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +38,7 @@ const Template: Story<ArgTypes> = ({
   value,
   indeterminatable = false,
   indeterminate = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +74,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-checkbox
       @click=${(e: MouseEvent) => console.log('clicked')}
@@ -115,6 +107,5 @@ export const CustomIndeterminated = Template.bind({})
 CustomIndeterminated.args = {
   label: 'Indeterminated',
   indeterminatable: true,
-  indeterminate: true,
-  theme: 'light'
+  indeterminate: true
 }

package/stories/ox-input-3axis.stories.ts

@@ -9,8 +9,7 @@ export default {
   component: 'ox-input-3axis',
   argTypes: {
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -23,10 +22,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -61,10 +59,6 @@ const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: Ar
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-3axis
       @change=${(e: Event) => {

package/stories/ox-input-3dish.stories.ts

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -13,8 +13,7 @@ export default {
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +31,6 @@ interface ArgTypes {
   englishOnly?: boolean
   selectAfterChange?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +39,7 @@ const Template: Story<ArgTypes> = ({
   withoutEnter = true,
   englishOnly = false,
   selectAfterChange = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-barcode
       name=${name}

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

@@ -11,8 +11,7 @@ export default {
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
     showLineNumbers: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   language: 'javascript' | 'sql' | 'json'
   showLineNumbers?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   language = 'javascript',
   value = '',
   showLineNumbers,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-code
       @change=${(e: Event) => {

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,15 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'crontab',
-  value = '* * * * * *',
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +60,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <br /><br />