@operato/input 1.0.0-beta.43 → 1.0.0-beta.46

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

@@ -121,6 +121,8 @@ export class OxInputWorkShift extends OxFormField {
   }
 
   render() {
+    const workshifts = this.value || []
+
     return html`
       <div data-header>
         <span>${msg('name')}</span>
@@ -131,7 +133,7 @@ export class OxInputWorkShift extends OxFormField {
         <empty-element></empty-element>
       </div>
 
-      ${this.value.map(
+      ${workshifts.map(
         item => html`
           <div data-record>
             <input type="text" data-name .value=${item.name} required />

package/src/ox-select.ts

@@ -46,7 +46,6 @@ export class Select extends OxFormField {
         padding: var(--input-padding);
         font: var(--input-font);
         color: var(--primary-text-color);
-        max-height: 17px;
       }
 
       span {
@@ -112,7 +111,7 @@ export class Select extends OxFormField {
     this.addEventListener('keydown', (e: KeyboardEvent) => {
       e.preventDefault()
 
-      if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {
+      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {
         this.expand()
       }
     })

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

@@ -39,6 +39,13 @@ const Template: Story<ArgTypes> = ({
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    ox-input-barcode {
+      font-size: 80px;
+      --input-font: initial;
+    }
+  </style>
+
   <ox-input-barcode
     name=${name}
     ?without-enter=${withoutEnter}

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

@@ -0,0 +1,43 @@
+import '../src/ox-input-quantifier.js'
+
+import { html, TemplateResult } from 'lit'
+
+import { OxInputQuantifier } from '../src/ox-input-quantifier.js'
+
+export default {
+  title: 'ox-input-quantifier',
+  component: 'ox-input-quantifier',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'array' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: number[]
+}
+
+const Template: Story<ArgTypes> = ({ name = 'quantifier', value }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <ox-input-quantifier
+    name=${name}
+    .value=${value}
+    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}
+  >
+  </ox-input-quantifier>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'quantifier',
+  value: [10, 100]
+}