@operato/input 1.0.0-beta.15 → 1.0.0-beta.18

package/src/ox-input-range.ts

@@ -11,10 +11,9 @@ import { OxFormField } from './ox-form-field.js'
 class OxInputRange extends OxFormField {
   static styles = css`
     :host {
-      font-size: 16px;
       display: flex;
+      gap: var(--margin-default);
       align-items: center;
-      padding: 1px 0;
 
       width: 100%;
       user-select: text;
@@ -22,15 +21,15 @@ class OxInputRange extends OxFormField {
 
     input[type='number'] {
       width: 48px;
-      overflow: hidden;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
     }
-
-    input[type='number'] {
-      color: black;
-      border: none;
-      font-weight: 300;
-      background: white;
-      padding: 1px 2px;
+    input[type='number']:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     input[type='range'] {
@@ -44,40 +43,40 @@ class OxInputRange extends OxFormField {
     }
     input[type='range']::-webkit-slider-runnable-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 5px;
     }
     input[type='range']::-webkit-slider-thumb {
       -webkit-appearance: none;
       border: none;
-      height: 10px;
-      width: 10px;
+      height: 16px;
+      width: 16px;
       border-radius: 50%;
-      background: black;
-      margin-top: -5px;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
     input[type='range']:focus {
       outline: none;
     }
-    input[type='range']:focus::-webkit-slider-runnable-track {
-      background: black;
-    }
 
     input[type='range']::-moz-range-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 5px;
     }
     input[type='range']::-moz-range-thumb {
       border: none;
-      height: 10px;
-      width: 10px;
+      height: 16px;
+      width: 16px;
       border-radius: 50%;
-      background: black;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
 
     input[type='range']:-moz-focusring {
@@ -87,21 +86,19 @@ class OxInputRange extends OxFormField {
 
     input[type='range']::-ms-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border-radius: 10px;
-      color: transparent;
-      border: none;
-      outline: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      border-radius: 5px;
     }
     input[type='range']::-ms-thumb {
-      height: 10px;
-      width: 10px;
-      border-radius: 50%;
-      background: black;
       border: none;
-      outline: none;
-      margin-top: 2px;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
 
     input:focus {

package/src/ox-input-search.ts

@@ -55,14 +55,17 @@ export class OxInputSearch extends OxFormField {
         .value=${this.value || ''}
         .placeholder=${this.placeholder || ''}
         @change=${(e: Event) => this._onChangeValue(e)}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            /* Even if the value has not changed, the enter key triggers a change event. */
+            e.preventDefault() /* Prevent change event from occurring twice. */
+            this._onChangeValue(e)
+          }
+        }}
       />
     `
   }
 
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChangeValue.bind(this))
-  }
-
   _onChangeValue(e: Event) {
     e.stopPropagation()
     this.value = this.input.value

package/src/ox-input-unit.ts

@@ -5,9 +5,10 @@
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { OxFormField } from './ox-form-field'
 import { OxPopupList } from '@operato/popup'
 
+import { OxFormField } from './ox-form-field'
+
 const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number } } = {
   kg: {
     mg: 1000000,
@@ -24,9 +25,15 @@ export class OxInputUnit extends OxFormField {
   static styles = [
     css`
       input {
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        text-align: end;
+        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::-webkit-outer-spin-button,
@@ -42,6 +49,10 @@ export class OxInputUnit extends OxFormField {
       div {
         display: inline;
         position: relative;
+        margin-left: var(--margin-narrow);
+        font: var(--label-font);
+        color: var(--label-color);
+        opacity: 0.7;
       }
     `
   ]

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

@@ -30,34 +30,19 @@ export class OxInputWorkShift extends OxFormField {
     :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;
     }
 
@@ -66,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;
     }
   `
 
@@ -122,7 +150,9 @@ export class OxInputWorkShift extends OxFormField {
             </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>
         `
       )}
@@ -144,7 +174,9 @@ export class OxInputWorkShift extends OxFormField {
         </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)) {
@@ -41,6 +42,11 @@ export class Select extends OxFormField {
         align-items: center;
         justify-content: center;
         cursor: pointer;
+
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
       }
 
       span {
@@ -49,6 +55,9 @@ export class Select extends OxFormField {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+      div:hover {
+        border-bottom: 1px solid var(--primary-color);
+      }
 
       mwc-icon {
         display: block;
@@ -58,6 +67,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%;

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

@@ -0,0 +1,77 @@
+import '../src/ox-input-file.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-file',
+  component: 'ox-input-file',
+  argTypes: {
+    name: { control: 'text' },
+    multiple: { control: 'boolean' },
+    accept: { control: 'text' },
+    icon: { control: 'text' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    hideFileList: { control: 'boolean' },
+    attachFileList: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+  name?: string
+  multiple?: boolean
+  accept?: string
+  icon?: string
+  description?: string
+  hideFileList?: boolean
+  attachFileList?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  label = 'select files',
+  name = 'file',
+  multiple = true,
+  accept,
+  icon,
+  description,
+  hideFileList = false,
+  attachFileList = 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>
+    body {
+    }
+  </style>
+
+  <ox-input-file
+    label=${label}
+    name=${name}
+    ?multiple=${multiple}
+    ?hide-filelist=${hideFileList}
+    ?attach-filelist=${attachFileList}
+    accept=${accept}
+    icon=${icon}
+    description=${description}
+  >
+  </ox-input-file>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'select files',
+  name: 'files',
+  multiple: true,
+  hideFileList: false,
+  attachFileList: false,
+  accept: '*.*',
+  icon: 'upload',
+  description: 'drop files here!'
+}

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

@@ -29,6 +29,9 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }: 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-range name=${name} value=${value} step=${step} min=${min} max=${max}> </ox-input-range>
 `
 

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

@@ -32,7 +32,11 @@ const Template: Story<ArgTypes> = ({ placeholder = 'Search', name = 'hello', val
     }
   </style>
 
-  <ox-input-search @click=${(e: MouseEvent) => console.log('clicked')} name=${name} .checked=${value}>
+  <ox-input-search
+    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}
+    name=${name}
+    .checked=${value}
+  >
   </ox-input-search>
 `
 

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

@@ -1,6 +1,6 @@
 import '../src/ox-input-unit.js'
 
-import { TemplateResult, html } from 'lit'
+import { html, TemplateResult } from 'lit'
 
 export default {
   title: 'ox-input-unit',
@@ -35,6 +35,7 @@ const Template: Story<ArgTypes> = ({
   stdUnit = 'kg',
   userUnit
 }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
   <ox-input-unit
     name=${name}
     placeholder=${placeholder}

package/stories/ox-select.stories.ts

@@ -26,6 +26,7 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }: 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-select