@operato/input 1.0.0-beta.30 → 1.0.0-beta.33

package/src/ox-input-duration.ts

@@ -0,0 +1,143 @@
+import '@material/mwc-button'
+
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-duration')
+export class OxInputDuration extends OxFormField {
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host *:focus {
+      outline: none;
+    }
+
+    form {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+    }
+
+    input {
+      margin-top: var(--margin-default);
+      padding: 5px;
+      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);
+    }
+
+    input:invalid {
+      border-bottom: 1px solid var(--status-danger-color);
+      color: var(--status-danger-color);
+    }
+
+    label {
+      width: 100%;
+      font: normal 0.8em var(--theme-font);
+      color: var(--primary-color);
+    }
+  `
+
+  @property({ type: Number }) declare value?: number
+
+  render() {
+    var d = Number(this.value || 0)
+
+    const days = Math.floor(d / (3600 * 24))
+    d -= days * 24 * 3600
+    const hours = Math.floor(d / 3600)
+    d -= hours * 3600
+    const minutes = Math.floor(d / 60)
+    const seconds = d - minutes * 60
+
+    return html`
+      <form @change=${this.onChange.bind(this)}>
+        <input id="days" type="number" .value=${days} pattern="\\d*" />
+        <label for="days">${i18next.t('label.days')}</label>
+
+        <input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
+        <label for="hour">${i18next.t('label.hours')}</label>
+
+        <input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
+        <label for="minute">${i18next.t('label.minutes')}</label>
+
+        <input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
+        <label for="second">${i18next.t('label.seconds')}</label>
+
+        <button
+          type="button"
+          @click=${(e: Event) => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            this.value = 0
+
+            this.dispatchEvent(
+              new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+              })
+            )
+          }}
+        >
+          Clear
+        </button>
+      </form>
+    `
+  }
+
+  firstUpdated() {
+    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()
+  }
+
+  @query('#days') days!: HTMLInputElement
+  @query('#hours') hours!: HTMLInputElement
+  @query('#minutes') minutes!: HTMLInputElement
+  @query('#seconds') seconds!: HTMLInputElement
+
+  onChange(e: Event) {
+    e.stopPropagation()
+
+    var form = this.renderRoot.querySelector('form') as HTMLFormElement
+    var valid = form.checkValidity()
+    if (!valid) {
+      form.reportValidity()
+      return
+    }
+
+    const days = Number(this.days.value)
+    const hours = Number(this.hours.value)
+    const minutes = Number(this.minutes.value)
+    const seconds = Number(this.seconds.value)
+
+    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+}

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

@@ -9,7 +9,9 @@ export default {
     name: { control: 'text' },
     value: { control: 'text' },
     scannable: { control: 'boolean' },
-    withoutEnter: { control: 'boolean' }
+    withoutEnter: { control: 'boolean' },
+    englishOnly: { control: 'boolean' },
+    selectAfterChange: { control: 'boolean' }
   }
 }
 
@@ -24,17 +26,51 @@ interface ArgTypes {
   value?: string
   scannable?: boolean
   withoutEnter?: boolean
+  englishOnly?: boolean
+  selectAfterChange?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'barcode', scannable = true, withoutEnter = true }: ArgTypes) => html`
+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" />
-  <ox-input-barcode name=${name} ?without-enter=${withoutEnter} ?scannable=${scannable}> </ox-input-barcode>
+  <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
+  withoutEnter: true,
+  englishOnly: false
+}
+
+export const EnglishOnly = Template.bind({})
+EnglishOnly.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true
+}
+
+export const selectAfterChange = Template.bind({})
+selectAfterChange.args = {
+  name: 'barcode',
+  scannable: true,
+  withoutEnter: true,
+  englishOnly: true,
+  selectAfterChange: true
 }

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

@@ -0,0 +1,51 @@
+import '../src/ox-input-duration.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-duration',
+  component: 'ox-input-duration',
+  argTypes: {
+    value: { control: 'number' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: number
+}
+
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601 }: 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-duration
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-duration>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'duration',
+  value: 3601
+}