@operato/input 2.0.0-alpha.99 → 2.0.0-beta.0

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

@@ -2,6 +2,7 @@ import '../src/ox-input-3dish.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-3dish',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme = 'light' }: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -42,22 +49,38 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: Arg
   />
 
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-3dish
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-3dish>
+    <ox-input-3dish
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-3dish>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -2,6 +2,7 @@ import '../src/ox-input-angle.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-angle',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme = 'light' }: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,23 +47,40 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgT
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-angle
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-angle>
+    <ox-input-angle
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-angle>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-barcode.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-barcode',
@@ -12,7 +13,8 @@ export default {
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -30,6 +32,7 @@ interface ArgTypes {
   englishOnly?: boolean
   selectAfterChange?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -38,9 +41,14 @@ const Template: Story<ArgTypes> = ({
   withoutEnter = true,
   englishOnly = false,
   selectAfterChange = false,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -54,27 +62,38 @@ const Template: Story<ArgTypes> = ({
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    #root {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
       height: 500px;
-    }
+      text-align: center;
+      padding: 20px;
 
-    ox-input-barcode {
-      font-size: 80px;
-      --input-font: initial;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-barcode
-    name=${name}
-    ?without-enter=${withoutEnter}
-    ?scannable=${scannable}
-    ?english-only=${englishOnly}
-    ?select-after-change=${selectAfterChange}
-    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
-    ?disabled=${disabled}
-  >
-  </ox-input-barcode>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-barcode
+      name=${name}
+      ?without-enter=${withoutEnter}
+      ?scannable=${scannable}
+      ?english-only=${englishOnly}
+      ?select-after-change=${selectAfterChange}
+      @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
+      ?disabled=${disabled}
+    >
+    </ox-input-barcode>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-code.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-code',
@@ -10,7 +11,8 @@ export default {
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
     showLineNumbers: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -26,6 +28,7 @@ interface ArgTypes {
   language: 'javascript' | 'sql' | 'json'
   showLineNumbers?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,9 +36,14 @@ const Template: Story<ArgTypes> = ({
   language = 'javascript',
   value = '',
   showLineNumbers,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -49,25 +57,44 @@ const Template: Story<ArgTypes> = ({
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
-    body {
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
+
     ox-input-code {
       height: 300px;
+      text-align: start;
     }
   </style>
 
-  <ox-input-code
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    language=${language}
-    .value=${value}
-    ?show-line-numbers=${showLineNumbers}
-    ?disabled=${disabled}
-  >
-  </ox-input-code>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-code
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      language=${language}
+      .value=${value}
+      ?show-line-numbers=${showLineNumbers}
+      ?disabled=${disabled}
+    >
+    </ox-input-code>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-crontab.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-crontab',
@@ -8,7 +9,8 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,10 +24,20 @@ interface ArgTypes {
   name?: string
   value?: string
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({
+  name = 'crontab',
+  value = '* * * * * *',
+  disabled,
+  theme = 'light'
+}: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -39,22 +51,39 @@ const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', di
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <br /><br />
 
-  <ox-input-crontab
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-crontab>
+    <ox-input-crontab
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-crontab>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-data.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-data',
@@ -8,7 +9,8 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,10 +24,15 @@ interface ArgTypes {
   name?: string
   value?: string | number | object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme = 'light' }: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -39,24 +46,41 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgT
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
-    body {
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
     }
+
     ox-input-data {
       height: 300px;
+      text-align: start;
     }
   </style>
 
-  <ox-input-data
-    @change=${(e: Event) => {
-      const value = (e.target as HTMLInputElement).value
-      console.log('value : ', value, typeof value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-data>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-data
+      @change=${(e: Event) => {
+        const value = (e.target as HTMLInputElement).value
+        console.log('value : ', value, typeof value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-data>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -2,6 +2,7 @@ import '../src/ox-input-duration.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-duration',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled, theme = 'light' }: 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" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,23 +47,40 @@ const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-duration
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-duration>
+    <ox-input-duration
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-duration>
+  </div>
 `
 
 export const Regular = Template.bind({})