@operato/input 7.0.0-rc.11 → 7.0.0-rc.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.0.0-rc.11",
+  "version": "7.0.0-rc.13",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -207,10 +207,10 @@
     "@lit/localize": "^0.12.1",
     "@material/web": "^1.5.0",
     "@operato/color-picker": "^7.0.0-rc.0",
-    "@operato/i18n": "^7.0.0-rc.0",
-    "@operato/popup": "^7.0.0-rc.11",
-    "@operato/styles": "^7.0.0-rc.10",
-    "@operato/utils": "^7.0.0-rc.8",
+    "@operato/i18n": "^7.0.0-rc.13",
+    "@operato/popup": "^7.0.0-rc.13",
+    "@operato/styles": "^7.0.0-rc.13",
+    "@operato/utils": "^7.0.0-rc.13",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -254,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "e3b4a7601a1a6b0ccd909fe1e85fa8e524f1c5a5"
+  "gitHead": "30bb1e680f2d6b042ec75c5a29266b24d3067da5"
 }

package/stories/ox-buttons-radio.stories.ts

@@ -10,8 +10,7 @@ export default {
   component: 'ox-buttons-radio',
   argTypes: {
     value: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +65,6 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-buttons-radio
       @change=${(e: CustomEvent) => {
@@ -91,6 +85,5 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
 export const Regular = Template.bind({})
 Regular.args = {
   value: '',
-  disabled: false,
-  theme: 'light'
+  disabled: false
 }

package/stories/ox-checkbox.stories.ts

@@ -2,7 +2,6 @@ import '@material/web/all.js'
 import '../src/ox-checkbox.js'
 
 import { TemplateResult, html } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
@@ -14,8 +13,7 @@ export default {
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +30,6 @@ interface ArgTypes {
   indeterminatable?: boolean
   indeterminate?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +38,7 @@ const Template: Story<ArgTypes> = ({
   value,
   indeterminatable = false,
   indeterminate = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +74,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-checkbox
       @click=${(e: MouseEvent) => console.log('clicked')}
@@ -115,6 +107,5 @@ export const CustomIndeterminated = Template.bind({})
 CustomIndeterminated.args = {
   label: 'Indeterminated',
   indeterminatable: true,
-  indeterminate: true,
-  theme: 'light'
+  indeterminate: true
 }

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

@@ -9,8 +9,7 @@ export default {
   component: 'ox-input-3axis',
   argTypes: {
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -23,10 +22,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -61,10 +59,6 @@ const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: Ar
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-3axis
       @change=${(e: Event) => {

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -13,8 +13,7 @@ export default {
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +31,6 @@ interface ArgTypes {
   englishOnly?: boolean
   selectAfterChange?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +39,7 @@ const Template: Story<ArgTypes> = ({
   withoutEnter = true,
   englishOnly = false,
   selectAfterChange = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-barcode
       name=${name}

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

@@ -11,8 +11,7 @@ export default {
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
     showLineNumbers: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   language: 'javascript' | 'sql' | 'json'
   showLineNumbers?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   language = 'javascript',
   value = '',
   showLineNumbers,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-code
       @change=${(e: Event) => {

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,15 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'crontab',
-  value = '* * * * * *',
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +60,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <br /><br />
 

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string | number | object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -56,7 +54,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
       height: 500px;
       text-align: center;
       padding: 20px;
-
     }
 
     ox-input-data {
@@ -65,10 +62,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-data
       @change=${(e: Event) => {

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object | string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'options', value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme =
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container">
     <ox-input-direction
       @change=${(e: Event) => {

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled,
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -15,8 +15,7 @@ export default {
     description: { control: 'text' },
     hideFileList: { control: 'boolean' },
     attachFileList: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -36,7 +35,6 @@ interface ArgTypes {
   hideFileList?: boolean
   attachFileList?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -48,8 +46,7 @@ const Template: Story<ArgTypes> = ({
   description,
   hideFileList = false,
   attachFileList = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -85,10 +82,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-file
       label=${label}

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

@@ -10,8 +10,7 @@ export default {
     placeholder: { control: 'text' },
     name: { control: 'text' },
     value: { control: 'array' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,16 +25,9 @@ interface ArgTypes {
   name?: string
   value?: string[]
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  placeholder = 'hashtag',
-  name = 'hello',
-  value = [],
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -70,10 +62,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-hashtags
       @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}

package/stories/ox-input-i18n-label.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'values', value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'values', value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'values', value, disabled, theme = '
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-i18n-label
       @change=${(e: Event) => {

package/stories/ox-input-key-values.stories.ts

@@ -10,8 +10,7 @@ export default {
     name: { control: 'text' },
     value: { control: 'object' },
     options: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,16 +25,9 @@ interface ArgTypes {
   value?: object
   options?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'key-values',
-  value = {},
-  options = [],
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -70,10 +62,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-key-values
       @change=${(e: Event) => {

package/stories/ox-input-mass-fraction.stories.ts

@@ -11,8 +11,7 @@ export default {
     value: { control: 'object' },
     defaultValue: { control: 'object' },
     composable: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   defaultValue?: object
   composable?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   value = {},
   defaultValue = {},
   composable = true,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -73,10 +70,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-mass-fraction
       @change=${(e: Event) => {

package/stories/ox-input-multiple-colors.stories.ts

@@ -8,8 +8,7 @@ export default {
   component: 'ox-input-multiple-colors',
   argTypes: {
     value: { control: 'array' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -21,10 +20,9 @@ interface Story<T> {
 
 interface ArgTypes {
   disabled: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -59,10 +57,6 @@ const Template: Story<ArgTypes> = ({ disabled, theme = 'light' }: ArgTypes) => h
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-multiple-colors
       .value=${['red', 'yellow']}