@operato/input 1.0.0-beta.16 → 1.0.0-beta.17

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-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-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