@operato/input 1.0.0-beta.9 → 1.0.6

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

@@ -29,23 +29,18 @@ export class OxInputValueRange extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      align-content: center;
-
-      width: 100%;
-      overflow: hidden;
-      border: 1px solid #ccc;
+      border: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
     }
 
     div {
       display: flex;
       flex-flow: row nowrap;
-      align-items: center;
-
-      border-bottom: 1px solid #c0c0c0;
+      gap: var(--padding-default);
     }
 
     div:last-child {
-      border-bottom: none;
+      margin-bottom: var(--margin-narrow);
     }
 
     div > * {
@@ -55,14 +50,47 @@ export class OxInputValueRange extends OxFormField {
     }
 
     button {
-      width: 20px;
-      text-align: center;
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
     }
 
     input,
     ox-input-color {
       flex: 1;
     }
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
 
     ox-input-color {
       --things-editor-color-input-color: {
@@ -74,26 +102,19 @@ export class OxInputValueRange extends OxFormField {
       }
     }
 
-    [placeholder='value'] {
+    [placeholder='value'],
+    [value='default'] {
       flex: 2;
     }
 
-    div {
-      border-bottom: 1px solid #c0c0c0;
-    }
-
-    div:last-child {
-      border-bottom: none;
-    }
-
     input[type='checkbox'] {
       width: initial;
     }
   `
 
   @property({ type: Object }) value: ValueRange = {}
-  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
-  @property({ type: String }) rangetype: 'string' | 'boolean' | 'color' | string = 'number'
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | 'number' | 'date' | string = 'string'
+  @property({ type: String }) rangetype: 'string' | 'number' = 'number'
 
   private _changingNow: boolean = false
 
@@ -121,7 +142,10 @@ export class OxInputValueRange extends OxFormField {
                     .value=${item.value}
                     data-value-type=${this.valuetype}
                   />
-                `} <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+                `}
+            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -135,7 +159,9 @@ export class OxInputValueRange extends OxFormField {
           : this.valuetype == 'color'
           ? html` <ox-input-color data-value value="" placeholder="value"> </ox-input-color> `
           : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
       </div>
 
       <div data-record>
@@ -165,7 +191,8 @@ export class OxInputValueRange extends OxFormField {
                 class="default-value"
                 data-value-type=${this.valuetype}
               />
-            `} <button class="record-action" @click=${(e: Event) => this._sort()}>&gt;</button>
+            `}
+        <button class="record-action" @click=${(e: Event) => this._sort()}><mwc-icon>chevron_right</mwc-icon></button>
       </div>
     `
   }

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

@@ -7,6 +7,8 @@ import './ox-input-color'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { localized, msg } from '@lit/localize'
+
 import { OxFormField } from './ox-form-field.js'
 
 type WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }
@@ -21,40 +23,26 @@ Example:
   </ox-input-work-shift>
 */
 
+@localized()
 @customElement('ox-input-work-shift')
 export class OxInputWorkShift extends OxFormField {
   static styles = css`
     :host {
       display: flex;
       flex-direction: column;
-      align-content: center;
 
       width: 100%;
       overflow: hidden;
-      border: 1px solid #ccc;
     }
 
     div {
       display: flex;
       flex-flow: row nowrap;
-      align-items: center;
-
-      border-bottom: 1px solid #c0c0c0;
-    }
-
-    div:last-child {
-      border-bottom: none;
-    }
-
-    div > * {
-      min-width: 0px;
-      margin: 2px;
-      padding: 0;
+      gap: var(--margin-default);
     }
 
-    button,
     empty-element {
-      width: 20px;
+      width: 34px;
       text-align: center;
     }
 
@@ -63,21 +51,64 @@ export class OxInputWorkShift extends OxFormField {
     span {
       flex: 1;
     }
+    [data-header] {
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      padding: var(--padding-narrow);
+    }
+    [data-header] span {
+      font: var(--label-font);
+      color: var(--label-color);
+      text-transform: var(--label-text-transform);
+      text-align: center;
+    }
+    [data-record] {
+      margin-bottom: var(--margin-narrow);
+    }
+    input,
+    select {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+
+      max-height: 35px;
+    }
+    input:focus,
+    select:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
 
     input:required:invalid {
       border: 1px dashed red;
     }
-
-    [placeholder='value'] {
-      flex: 2;
+    input[type='time'] {
+      padding: 2px var(--padding-default);
     }
 
-    div {
-      border-bottom: 1px solid #c0c0c0;
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
     }
 
-    div:last-child {
-      border-bottom: none;
+    [placeholder='value'] {
+      flex: 2;
     }
   `
 
@@ -90,36 +121,40 @@ export class OxInputWorkShift extends OxFormField {
   }
 
   render() {
+    const workshifts = this.value || []
+
     return html`
       <div data-header>
-        <span>name</span>
-        <span>from date</span>
-        <span>from time</span>
-        <span>to date</span>
-        <span>to time</span>
+        <span>${msg('name')}</span>
+        <span>${msg('from date')}</span>
+        <span>${msg('from time')}</span>
+        <span>${msg('to date')}</span>
+        <span>${msg('to time')}</span>
         <empty-element></empty-element>
       </div>
 
-      ${this.value.map(
+      ${workshifts.map(
         item => html`
           <div data-record>
             <input type="text" data-name .value=${item.name} required />
 
             <select data-from-date .value=${item.fromDate || 0}>
-              <option value="-1">The day before</option>
-              <option value="0">The day</option>
-              <option value="1">The day after</option>
+              <option value="-1">${msg('The day before')}</option>
+              <option value="0">${msg('The day')}</option>
+              <option value="1">${msg('The day after')}</option>
             </select>
             <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
 
             <select data-to-date .value=${item.toDate || 0}>
-              <option value="-1">The day before</option>
-              <option value="0">The day</option>
-              <option value="1">The day after</option>
+              <option value="-1">${msg('The day before')}</option>
+              <option value="0">${msg('The day')}</option>
+              <option value="1">${msg('The day after')}</option>
             </select>
             <input type="time" data-to-time .value=${item.toTime} step="1800" required />
 
-            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -128,20 +163,22 @@ export class OxInputWorkShift extends OxFormField {
         <input type="text" data-name />
 
         <select data-from-date>
-          <option value="-1">The day before</option>
-          <option value="0" selected>The day</option>
-          <option value="+1">The day after</option>
+          <option value="-1">${msg('The day before')}</option>
+          <option value="0" selected>${msg('The day')}</option>
+          <option value="+1">${msg('The day after')}</option>
         </select>
         <input type="time" data-from-time step="1800" />
 
         <select data-to-date>
-          <option value="-1">The day before</option>
-          <option value="0" selected>The day</option>
-          <option value="+1">The day after</option>
+          <option value="-1">${msg('The day before')}</option>
+          <option value="0" selected>${msg('The day')}</option>
+          <option value="+1">${msg('The day after')}</option>
         </select>
         <input type="time" data-to-time step="1800" />
 
-        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
       </div>
     `
   }

package/src/ox-select.ts

@@ -5,14 +5,15 @@
 import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-form-field.js'
 import { OxPopupList } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
 import { detectOverflow } from '@operato/utils'
 
+import { OxFormField } from './ox-form-field.js'
+
 function onmouseover(e: Event) {
   const element = e.target as HTMLSpanElement
   if (detectOverflow(element)) {
@@ -33,6 +34,7 @@ export class Select extends OxFormField {
       :host {
         display: block;
         position: relative;
+        border-bottom: var(--border-dark-color);
       }
 
       div {
@@ -41,6 +43,9 @@ export class Select extends OxFormField {
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
       }
 
       span {
@@ -58,6 +63,9 @@ export class Select extends OxFormField {
         color: var(--theme-primary-text-color, #3c3938);
         opacity: 0.7;
       }
+      div:hover mwc-icon {
+        color: var(--primary-color);
+      }
 
       ::slotted(ox-popup-list) {
         width: 100%;
@@ -71,7 +79,8 @@ export class Select extends OxFormField {
   @state() label: string | string[] = ''
 
   render() {
-    const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.placeholder || ''
+    const label =
+      (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.value || this.placeholder || ''
 
     return html`
       <div @click=${this.expand}>
@@ -103,20 +112,25 @@ 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()
       }
     })
   }
 
   async updated(changes: PropertyValues<this>) {
+    const popupList = this.querySelector('ox-popup-list') as OxPopupList
+
     if (changes.has('value')) {
       const popupList = this.querySelector('ox-popup-list') as OxPopupList
       popupList.value = this.value
 
       await this.requestUpdate()
+
       this.label = popupList.getSelectedLabels()
     }
+
+    this.label = popupList.getSelectedLabels()
   }
 
   expand() {

package/stories/ox-checkbox.stories.ts

@@ -0,0 +1,69 @@
+import '../src/ox-checkbox.js'
+
+import { TemplateResult, html } from 'lit'
+
+export default {
+  title: 'ox-checkbox',
+  component: 'ox-checkbox',
+  argTypes: {
+    label: { control: 'text' },
+    name: { control: 'text' },
+    value: { control: 'boolean' },
+    indeterminatable: { control: 'boolean' },
+    indeterminate: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+  name?: string
+  value?: boolean
+  indeterminatable?: boolean
+  indeterminate?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  label = 'Checkbox',
+  name = 'hello',
+  value = true,
+  indeterminatable = false,
+  indeterminate = false
+}: ArgTypes) => html`
+  <ox-checkbox
+    @click=${(e: MouseEvent) => console.log('clicked')}
+    name=${name}
+    .checked=${value}
+    ?indeterminatable=${indeterminatable}
+    ?indeterminate=${indeterminate}
+  >
+    ${label}
+  </ox-checkbox>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'label',
+  name: 'label',
+  value: false
+}
+
+export const CustomActivated = Template.bind({})
+CustomActivated.args = {
+  label: 'Activated',
+  name: 'activated',
+  indeterminate: false,
+  value: true
+}
+
+export const CustomIndeterminated = Template.bind({})
+CustomIndeterminated.args = {
+  label: 'Indeterminated',
+  indeterminate: true,
+  value: true
+}

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

@@ -0,0 +1,73 @@
+import '../src/ox-input-3dish.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-3dish',
+  component: 'ox-input-3dish',
+  argTypes: {
+    value: { control: 'object' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+}
+
+const Template: Story<ArgTypes> = ({ name = '3dish', 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" />
+  <style>
+    body {
+    }
+  </style>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-3dish
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-3dish>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: '3dish',
+  value: [
+    {
+      name: 'DAY',
+      fromDate: -1,
+      fromTime: '22:00',
+      toDate: 0,
+      toTime: '06:00'
+    },
+    {
+      name: 'SWING',
+      fromDate: 0,
+      fromTime: '06:00',
+      toDate: 0,
+      toTime: '14:00'
+    },
+    {
+      name: 'NIGHT',
+      fromDate: 0,
+      fromTime: '14:00',
+      toDate: 0,
+      toTime: '22:00'
+    }
+  ]
+}

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

@@ -0,0 +1,85 @@
+import '../src/ox-input-barcode.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-barcode',
+  component: 'ox-input-barcode',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'text' },
+    scannable: { control: 'boolean' },
+    withoutEnter: { control: 'boolean' },
+    englishOnly: { control: 'boolean' },
+    selectAfterChange: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+  scannable?: boolean
+  withoutEnter?: boolean
+  englishOnly?: boolean
+  selectAfterChange?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'barcode',
+  scannable = true,
+  withoutEnter = true,
+  englishOnly = false,
+  selectAfterChange = false
+}: 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}
+    ?scannable=${scannable}
+    ?english-only=${englishOnly}
+    ?select-after-change=${selectAfterChange}
+    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
+  >
+  </ox-input-barcode>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: false,
+  selectAfterChange: false
+}
+
+export const EnglishOnly = Template.bind({})
+EnglishOnly.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true,
+  selectAfterChange: false
+}
+
+export const selectAfterChange = Template.bind({})
+selectAfterChange.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true,
+  selectAfterChange: true
+}