@operato/input 7.1.27 → 7.1.32

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'
-  }
-}

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

@@ -1,97 +0,0 @@
-import '../src/ox-input-key-values.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-key-values',
-  component: 'ox-input-key-values',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    options: { control: 'object' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  options?: object
-  disabled?: boolean
-}
-
-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" />
-  <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-key-values
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .options=${options}
-      ?disabled=${disabled}
-    >
-    </ox-input-key-values>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'key-values',
-  value: {
-    A: 'A',
-    B: 'B',
-    C: 'C'
-  },
-  options: [
-    {
-      display: '초기값',
-      value: 'ABC'
-    },
-    {
-      display: '후기값',
-      value: 'XYZ'
-    }
-  ]
-}

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

@@ -1,102 +0,0 @@
-import '../src/ox-input-mass-fraction.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-mass-fraction',
-  component: 'ox-input-mass-fraction',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    defaultValue: { control: 'object' },
-    composable: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  defaultValue?: object
-  composable?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'mass-fraction',
-  value = {},
-  defaultValue = {},
-  composable = true,
-  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-mass-fraction
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .defaultValue=${defaultValue}
-      ?composable=${composable}
-      ?disabled=${disabled}
-    >
-    </ox-input-mass-fraction>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'mass-fraction',
-  value: {
-    H2O: 0.8,
-    N2O: 0.1,
-    CO2: 0.1
-  },
-  composable: true,
-  defaultValue: {
-    H2O: 0.8,
-    N2O: 0.1,
-    CO2: 0.1
-  }
-}

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

@@ -1,72 +0,0 @@
-import '../src/ox-input-multiple-colors.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-multiple-colors',
-  component: 'ox-input-multiple-colors',
-  argTypes: {
-    value: { control: 'array' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  disabled: boolean
-}
-
-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" />
-  <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-multiple-colors
-      .value=${['red', 'yellow']}
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      ?disabled=${disabled}
-    >
-    </ox-input-multiple-colors>
-  </div>
-`
-
-export const Regular = Template.bind({})

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

@@ -1,80 +0,0 @@
-import '../src/ox-input-options.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-options',
-  component: 'ox-input-options',
-  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
-  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 md-typescale-body-large-prominent">
-    <ox-input-options
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-options>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'options',
-  value: [{ text: 'SHOOSE', value: 'Shoose' }]
-}