@operato/input 1.11.12 → 1.11.17

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

@@ -7,7 +7,8 @@ export default {
   title: 'ox-input-3axis',
   component: 'ox-input-3axis',
   argTypes: {
-    value: { control: 'object' }
+    value: { control: 'object' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -19,9 +20,10 @@ interface Story<T> {
 
 interface ArgTypes {
   value?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ value = {} }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value = {}, disabled }: 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>
@@ -34,6 +36,7 @@ const Template: Story<ArgTypes> = ({ value = {} }: ArgTypes) => html`
       console.log((e.target as HTMLInputElement).value)
     }}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-3axis>
 `

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

@@ -8,7 +8,8 @@ export default {
   component: 'ox-input-3dish',
   argTypes: {
     value: { control: 'object' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -21,9 +22,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [] }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: 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>
@@ -40,6 +42,7 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [] }: ArgTypes) =>
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-3dish>
 `

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

@@ -8,7 +8,8 @@ export default {
   component: 'ox-input-angle',
   argTypes: {
     value: { control: 'number' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -21,9 +22,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: number
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0 }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: 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>
@@ -40,6 +42,7 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0 }: ArgTypes) => h
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-angle>
 `

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

@@ -11,7 +11,8 @@ export default {
     scannable: { control: 'boolean' },
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
-    selectAfterChange: { control: 'boolean' }
+    selectAfterChange: { control: 'boolean' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,6 +29,7 @@ interface ArgTypes {
   withoutEnter?: boolean
   englishOnly?: boolean
   selectAfterChange?: boolean
+  disabled?: boolean
 }
 
 const Template: Story<ArgTypes> = ({
@@ -35,7 +37,8 @@ const Template: Story<ArgTypes> = ({
   scannable = true,
   withoutEnter = true,
   englishOnly = false,
-  selectAfterChange = false
+  selectAfterChange = false,
+  disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
@@ -53,6 +56,7 @@ const Template: Story<ArgTypes> = ({
     ?english-only=${englishOnly}
     ?select-after-change=${selectAfterChange}
     @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
+    ?disabled=${disabled}
   >
   </ox-input-barcode>
 `

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

@@ -8,7 +8,8 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    language: { control: 'select', options: ['javascript', 'sql', 'json'] }
+    language: { control: 'select', options: ['javascript', 'sql', 'json'] },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -22,9 +23,10 @@ interface ArgTypes {
   name?: string
   value?: string
   language: 'javascript' | 'sql' | 'json'
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '', disabled }: 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>
@@ -42,6 +44,7 @@ const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', val
     name=${name}
     language=${language}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-code>
 `

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

@@ -7,7 +7,8 @@ export default {
   component: 'ox-input-crontab',
   argTypes: {
     value: { control: 'text' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -20,9 +21,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: string
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: 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>
@@ -38,6 +40,7 @@ const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *' }:
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-crontab>
 `

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

@@ -8,7 +8,8 @@ export default {
   component: 'ox-input-duration',
   argTypes: {
     value: { control: 'number' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -21,9 +22,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: number
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601 }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: 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>
@@ -40,6 +42,7 @@ const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601 }: ArgTypes
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-duration>
 `

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

@@ -13,7 +13,8 @@ export default {
     label: { control: 'text' },
     description: { control: 'text' },
     hideFileList: { control: 'boolean' },
-    attachFileList: { control: 'boolean' }
+    attachFileList: { control: 'boolean' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,6 +33,7 @@ interface ArgTypes {
   description?: string
   hideFileList?: boolean
   attachFileList?: boolean
+  disabled?: boolean
 }
 
 const Template: Story<ArgTypes> = ({
@@ -42,7 +44,8 @@ const Template: Story<ArgTypes> = ({
   icon,
   description,
   hideFileList = false,
-  attachFileList = false
+  attachFileList = false,
+  disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
@@ -60,6 +63,7 @@ const Template: Story<ArgTypes> = ({
     accept=${accept}
     icon=${icon}
     description=${description}
+    ?disabled=${disabled}
   >
   </ox-input-file>
 `

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

@@ -8,7 +8,8 @@ export default {
   argTypes: {
     placeholder: { control: 'text' },
     name: { control: 'text' },
-    value: { control: 'array' }
+    value: { control: 'array' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -22,9 +23,10 @@ interface ArgTypes {
   placeholder?: string
   name?: string
   value?: string[]
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [] }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: 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>
@@ -37,6 +39,7 @@ const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', va
     name=${name}
     placeholder=${placeholder}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-hashtags>
 `

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

@@ -8,7 +8,8 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'object' },
-    options: { control: 'object' }
+    options: { control: 'object' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -22,9 +23,10 @@ interface ArgTypes {
   name?: string
   value?: object
   options?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [] }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], disabled }: 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>
@@ -39,6 +41,7 @@ const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options =
     name=${name}
     .value=${value}
     .options=${options}
+    ?disabled=${disabled}
   >
   </ox-input-key-values>
 `

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

@@ -8,7 +8,8 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'object' },
-    defaultValue: { control: 'object' }
+    defaultValue: { control: 'object' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -22,9 +23,15 @@ interface ArgTypes {
   name?: string
   value?: object
   defaultValue?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'mass-fraction', value = {}, defaultValue = {} }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  name = 'mass-fraction',
+  value = {},
+  defaultValue = {},
+  disabled
+}: 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>
@@ -39,6 +46,7 @@ const Template: Story<ArgTypes> = ({ name = 'mass-fraction', value = {}, default
     name=${name}
     .value=${value}
     .defaultValue=${defaultValue}
+    ?disabled=${disabled}
   >
   </ox-input-mass-fraction>
 `
@@ -46,6 +54,7 @@ const Template: Story<ArgTypes> = ({ name = 'mass-fraction', value = {}, default
 export const Regular = Template.bind({})
 Regular.args = {
   name: 'mass-fraction',
+  value: {},
   defaultValue: {
     H2O: 0.8,
     N2O: 0.1,

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

@@ -6,7 +6,8 @@ export default {
   title: 'ox-input-multiple-colors',
   component: 'ox-input-multiple-colors',
   argTypes: {
-    value: { control: 'array' }
+    value: { control: 'array' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -16,9 +17,11 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  disabled: boolean
+}
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
 
   <style>
@@ -174,6 +177,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     @change=${(e: Event) => {
       console.log((e.target as HTMLInputElement).value)
     }}
+    ?disabled=${disabled}
   >
   </ox-input-multiple-colors>
 `

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

@@ -7,7 +7,8 @@ export default {
   component: 'ox-input-options',
   argTypes: {
     value: { control: 'object' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -20,9 +21,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value = {} }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: 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>
@@ -36,6 +38,7 @@ const Template: Story<ArgTypes> = ({ name = 'options', value = {} }: ArgTypes) =
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-options>
 `

package/stories/ox-input-partition-keys.stories.ts

@@ -7,7 +7,8 @@ export default {
   component: 'ox-input-partition-keys',
   argTypes: {
     value: { control: 'object' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -20,9 +21,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: object
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {} }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: 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>
@@ -36,6 +38,7 @@ const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {} }: ArgT
     }}
     name=${name}
     .value=${value}
+    ?disabled=${disabled}
   >
   </ox-input-partition-keys>
 `

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

@@ -8,7 +8,8 @@ export default {
   component: 'ox-input-privilege',
   argTypes: {
     value: { control: 'number' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -27,9 +28,10 @@ interface ArgTypes {
     owner: boolean
     super: boolean
   } | null
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: 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>
@@ -52,6 +54,7 @@ const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privilege
     name=${name}
     .value=${value}
     .privileges=${privileges}
+    ?disabled=${disabled}
   >
   </ox-input-privilege>
 `

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

@@ -9,7 +9,8 @@ export default {
   component: 'ox-input-quantifier',
   argTypes: {
     name: { control: 'text' },
-    value: { control: 'array' }
+    value: { control: 'array' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -22,9 +23,10 @@ interface Story<T> {
 interface ArgTypes {
   name?: string
   value?: number[]
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'quantifier', value }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
 
@@ -32,6 +34,7 @@ const Template: Story<ArgTypes> = ({ name = 'quantifier', value }: ArgTypes) =>
     name=${name}
     .value=${value}
     @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}
+    ?disabled=${disabled}
   >
   </ox-input-quantifier>
 `

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

@@ -10,7 +10,8 @@ export default {
     value: { control: 'number' },
     step: { control: 'number' },
     min: { control: 'number' },
-    max: { control: 'number' }
+    max: { control: 'number' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,13 +27,22 @@ interface ArgTypes {
   step?: number
   min?: number
   max?: number
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  name = 'range',
+  value = 0,
+  step = 1,
+  min = 0,
+  max = 100,
+  disabled
+}: 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>
+  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
+  </ox-input-range>
 `
 
 export const Regular = Template.bind({})

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

@@ -9,7 +9,8 @@ export default {
     placeholder: { control: 'text' },
     name: { control: 'text' },
     value: { control: 'text' },
-    selectAfterChange: { control: 'boolean' }
+    selectAfterChange: { control: 'boolean' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,13 +25,15 @@ interface ArgTypes {
   name?: string
   value?: string
   selectAfterChange?: boolean
+  disabled?: boolean
 }
 
 const Template: Story<ArgTypes> = ({
   placeholder = 'Search',
   name = 'hello',
   value = '',
-  selectAfterChange
+  selectAfterChange,
+  disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
@@ -44,6 +47,7 @@ const Template: Story<ArgTypes> = ({
     ?select-after-change=${selectAfterChange}
     name=${name}
     .checked=${value}
+    ?disabled=${disabled}
   >
   </ox-input-search>
 `

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

@@ -9,7 +9,8 @@ export default {
     value: { control: 'object' },
     options: { control: 'object' },
     multiple: { control: 'boolean' },
-    name: { control: 'text' }
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,9 +25,16 @@ interface ArgTypes {
   value?: object | string
   options: object
   multiple?: boolean
+  disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value, multiple = false, options = [] }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  name = 'options',
+  value,
+  multiple = false,
+  options = [],
+  disabled
+}: 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>
@@ -43,6 +51,7 @@ const Template: Story<ArgTypes> = ({ name = 'options', value, multiple = false,
     .value=${value}
     .options=${options}
     ?multiple=${multiple}
+    ?disabled=${disabled}
   >
   </ox-input-select-buttons>
 `

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

@@ -40,7 +40,8 @@ export default {
         '%',
         'K'
       ]
-    }
+    },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -56,6 +57,7 @@ interface ArgTypes {
   value?: number
   stdUnit: string
   userUnit: string
+  disabled?: boolean
 }
 
 const Template: Story<ArgTypes> = ({
@@ -63,7 +65,8 @@ const Template: Story<ArgTypes> = ({
   name = 'hello',
   value = 0,
   stdUnit = 'kg',
-  userUnit
+  userUnit,
+  disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <ox-input-unit-number
@@ -73,6 +76,7 @@ const Template: Story<ArgTypes> = ({
     std-unit=${stdUnit}
     user-unit=${userUnit}
     @change=${(e: CustomEvent) => console.log(e.detail)}
+    ?disabled=${disabled}
   >
   </ox-input-unit-number>
 `