@operato/input 1.1.28 → 1.1.31

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

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import './ox-input-color'
-
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -138,14 +136,14 @@ export class OxInputWorkShift extends OxFormField {
           <div data-record>
             <input type="text" data-name .value=${item.name} required />
 
-            <select data-from-date .value=${item.fromDate || 0}>
+            <select data-from-date .value=${String(item.fromDate || 0)}>
               <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}>
+            <select data-to-date .value=${String(item.toDate || 0)}>
               <option value="-1">${msg('The day before')}</option>
               <option value="0">${msg('The day')}</option>
               <option value="1">${msg('The day after')}</option>

package/stories/ox-input-select-buttons.stories.ts

@@ -0,0 +1,80 @@
+import '../src/ox-input-select-buttons.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-select-buttons',
+  component: 'ox-input-select-buttons',
+  argTypes: {
+    value: { control: 'object' },
+    options: { control: 'object' },
+    multiple: { control: 'boolean' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object | string
+  options: object
+  multiple?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'options', value, multiple = false, options = [] }: 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-select-buttons {
+      max-width: 400px;
+    }
+  </style>
+
+  <ox-input-select-buttons
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .options=${options}
+    ?multiple=${multiple}
+  >
+  </ox-input-select-buttons>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'options',
+  value: 'Clothes',
+  options: [
+    { display: 'SHOOSE', value: 'Shoose' },
+    { display: 'CHOTHES', value: 'Clothes' },
+    { display: 'GLOVES', value: 'Gloves' }
+  ]
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  name: 'options',
+  value: ['Clothes'],
+  multiple: true,
+  options: [
+    { display: 'SHOOSE1', value: 'Shoose1' },
+    { display: 'CHOTHES1', value: 'Clothes1' },
+    { display: 'GLOVES1', value: 'Gloves1' },
+    { display: 'SHOOSE2', value: 'Shoose2' },
+    { display: 'CHOTHES2', value: 'Clothes2' },
+    { display: 'GLOVES2', value: 'Gloves2' },
+    { display: 'SHOOSE3', value: 'Shoose3' },
+    { display: 'CHOTHES3', value: 'Clothes3' },
+    { display: 'GLOVES3', value: 'Gloves3' },
+    { display: 'SHOOSE4', value: 'Shoose4' },
+    { display: 'CHOTHES4', value: 'Clothes4' },
+    { display: 'GLOVES4', value: 'Gloves4' }
+  ]
+}

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

@@ -37,6 +37,7 @@ export default {
         'W/m2/K',
         'N sec/m2',
         'm2 oC/W',
+        '%',
         'K'
       ]
     }
@@ -96,3 +97,11 @@ Temperature.args = {
   value: 0,
   stdUnit: 'K'
 }
+
+export const Percentage = Template.bind({})
+Percentage.args = {
+  placeholder: 'percentage',
+  name: 'percentage',
+  value: 0,
+  stdUnit: '%'
+}