@operato/input 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,82 +0,0 @@
-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',
-  component: 'ox-input-crontab',
-  argTypes: {
-    value: { control: 'text' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <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>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'crontab',
-  value: '* * * * * *'
-}

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

@@ -1,82 +0,0 @@
-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',
-  component: 'ox-input-data',
-  argTypes: {
-    value: { control: 'text' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string | number | object
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-    }
-
-    ox-input-data {
-      height: 300px;
-      text-align: start;
-    }
-  </style>
-
-  <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({})
-Regular.args = {
-  name: 'data'
-}

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

@@ -1,91 +0,0 @@
-import '../src/ox-input-direction.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-direction',
-  component: 'ox-input-direction',
-  argTypes: {
-    value: { control: 'object' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object | string
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <div class="container">
-    <ox-input-direction
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-direction>
-    <br />
-    <ox-input-direction
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-      inbound
-    >
-    </ox-input-direction>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'options',
-  value: ''
-}

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

@@ -1,84 +0,0 @@
-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',
-  component: 'ox-input-duration',
-  argTypes: {
-    value: { control: 'number' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: number
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <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>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'duration',
-  value: 3601
-}

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

@@ -1,111 +0,0 @@
-import '../src/ox-input-file.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-file',
-  component: 'ox-input-file',
-  argTypes: {
-    name: { control: 'text' },
-    multiple: { control: 'boolean' },
-    accept: { control: 'text' },
-    icon: { control: 'text' },
-    label: { control: 'text' },
-    description: { control: 'text' },
-    hideFileList: { control: 'boolean' },
-    attachFileList: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  label?: string
-  name?: string
-  multiple?: boolean
-  accept?: string
-  icon?: string
-  description?: string
-  hideFileList?: boolean
-  attachFileList?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  label = 'select files',
-  name = 'file',
-  multiple = true,
-  accept,
-  icon,
-  description,
-  hideFileList = false,
-  attachFileList = false,
-  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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-file
-      label=${label}
-      name=${name}
-      ?multiple=${multiple}
-      ?hide-filelist=${hideFileList}
-      ?attach-filelist=${attachFileList}
-      accept=${accept}
-      icon=${icon}
-      description=${description}
-      ?disabled=${disabled}
-    >
-    </ox-input-file>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: 'select files',
-  name: 'files',
-  multiple: true,
-  hideFileList: false,
-  attachFileList: false,
-  accept: '*.*',
-  icon: 'upload',
-  description: 'drop files here!'
-}

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

@@ -1,82 +0,0 @@
-import '../src/ox-input-hashtags.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-hashtags',
-  component: 'ox-input-hashtags',
-  argTypes: {
-    placeholder: { control: 'text' },
-    name: { control: 'text' },
-    value: { control: 'array' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  placeholder?: string
-  name?: string
-  value?: string[]
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-hashtags
-      @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}
-      name=${name}
-      placeholder=${placeholder}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-hashtags>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  placeholder: 'hashtag',
-  name: 'hashtag',
-  value: ['abc', 'def']
-}

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

@@ -1,103 +0,0 @@
-import '../src/ox-input-i18n-label.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-i18n-label',
-  component: 'ox-input-i18n-label',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  disabled?: boolean
-}
-
-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" />
-  <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"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    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>
-    .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>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-i18n-label
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .languages=${[
-        {
-          code: 'ko',
-          display: '한글'
-        },
-        {
-          code: 'en',
-          display: 'English'
-        },
-        {
-          code: 'zh',
-          display: 'Chinese'
-        },
-        {
-          code: 'ja',
-          display: 'Japanese'
-        }
-      ]}
-      ?disabled=${disabled}
-    >
-    </ox-input-i18n-label>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'i18n labels',
-  value: {
-    ko: '한글 코드',
-    en: 'English code',
-    zh: 'Chinese code',
-    ja: 'Japan code'
-  }
-}