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

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

@@ -1,89 +0,0 @@
-import '@material/web/all.js'
-import '../src/ox-buttons-radio.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 {
-  title: 'ox-buttons-radio',
-  component: 'ox-buttons-radio',
-  argTypes: {
-    value: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  value?: string
-  disabled?: boolean
-}
-
-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" />
-  <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);
-
-      padding: 20px;
-    }
-
-    ox-buttons-radio {
-      padding: 20px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-buttons-radio
-      @change=${(e: CustomEvent) => {
-        console.log('changed', e.detail)
-      }}
-      value=${ifDefined(value)}
-      ?disabled=${disabled}
-    >
-      <md-filled-button data-value="1">Option 1</md-filled-button>
-      <md-filled-button data-value="2">Option 2</md-filled-button>
-      <md-outlined-button data-value="3">Option 3</md-outlined-button>
-      <md-text-button trailing-icon>Open<md-icon slot="icon">upload</md-icon></md-text-button>
-      <md-elevated-button>Elevated</md-elevated-button>
-    </ox-buttons-radio>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  value: '',
-  disabled: false
-}

package/stories/ox-checkbox.stories.ts

@@ -1,111 +0,0 @@
-import '@material/web/all.js'
-import '../src/ox-checkbox.js'
-
-import { TemplateResult, html } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-checkbox',
-  component: 'ox-checkbox',
-  argTypes: {
-    label: { control: 'text' },
-    name: { control: 'text' },
-    value: { control: 'boolean' },
-    indeterminatable: { control: 'boolean' },
-    indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  label?: string
-  name?: string
-  value?: boolean
-  indeterminatable?: boolean
-  indeterminate?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  label = 'Checkbox',
-  name = 'hello',
-  value,
-  indeterminatable = false,
-  indeterminate = 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);
-      padding: 20px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-checkbox
-      @click=${(e: MouseEvent) => console.log('clicked')}
-      name=${name}
-      .checked=${value}
-      ?indeterminatable=${indeterminatable}
-      ?indeterminate=${indeterminate}
-      ?disabled=${disabled}
-    >
-      ${label}
-    </ox-checkbox>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: 'label',
-  name: 'label',
-  value: false
-}
-
-export const CustomActivated = Template.bind({})
-CustomActivated.args = {
-  label: 'Activated',
-  name: 'activated',
-  indeterminate: false,
-  value: true
-}
-
-export const CustomIndeterminated = Template.bind({})
-CustomIndeterminated.args = {
-  label: 'Indeterminated',
-  indeterminatable: true,
-  indeterminate: true
-}

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

@@ -1,77 +0,0 @@
-import '../src/ox-input-3axis.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-3axis',
-  component: 'ox-input-3axis',
-  argTypes: {
-    value: { control: 'object' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  value?: object
-  disabled?: boolean
-}
-
-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" />
-  <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-3axis
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-3axis>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  value: { x: 100, y: 120, z: 130 }
-}

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

@@ -1,106 +0,0 @@
-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',
-  component: 'ox-input-3dish',
-  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 = '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" />
-  <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-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({})
-Regular.args = {
-  name: '3dish',
-  value: [
-    {
-      name: 'DAY',
-      fromDate: -1,
-      fromTime: '22:00',
-      toDate: 0,
-      toTime: '06:00'
-    },
-    {
-      name: 'SWING',
-      fromDate: 0,
-      fromTime: '06:00',
-      toDate: 0,
-      toTime: '14:00'
-    },
-    {
-      name: 'NIGHT',
-      fromDate: 0,
-      fromTime: '14:00',
-      toDate: 0,
-      toTime: '22:00'
-    }
-  ]
-}

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

@@ -1,84 +0,0 @@
-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',
-  component: 'ox-input-angle',
-  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 = '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" />
-  <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-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({})
-Regular.args = {
-  name: 'angle',
-  value: 0
-}

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

@@ -1,117 +0,0 @@
-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',
-  component: 'ox-input-barcode',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'text' },
-    scannable: { control: 'boolean' },
-    withoutEnter: { control: 'boolean' },
-    englishOnly: { control: 'boolean' },
-    selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string
-  scannable?: boolean
-  withoutEnter?: boolean
-  englishOnly?: boolean
-  selectAfterChange?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'barcode',
-  scannable = true,
-  withoutEnter = true,
-  englishOnly = false,
-  selectAfterChange = 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-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({})
-Regular.args = {
-  name: 'barcode',
-  scannable: true,
-  withoutEnter: true,
-  englishOnly: false,
-  selectAfterChange: false
-}
-
-export const EnglishOnly = Template.bind({})
-EnglishOnly.args = {
-  name: 'barcode',
-  scannable: true,
-  withoutEnter: true,
-  englishOnly: true,
-  selectAfterChange: false
-}
-
-export const selectAfterChange = Template.bind({})
-selectAfterChange.args = {
-  name: 'barcode',
-  scannable: true,
-  withoutEnter: true,
-  englishOnly: true,
-  selectAfterChange: true
-}

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

@@ -1,99 +0,0 @@
-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',
-  component: 'ox-input-code',
-  argTypes: {
-    value: { control: 'text' },
-    name: { control: 'text' },
-    language: { control: 'select', options: ['javascript', 'sql', 'json'] },
-    showLineNumbers: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string
-  language: 'javascript' | 'sql' | 'json'
-  showLineNumbers?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'code',
-  language = 'javascript',
-  value = '',
-  showLineNumbers,
-  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);
-    }
-
-    ox-input-code {
-      height: 300px;
-      text-align: start;
-    }
-  </style>
-
-  <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({})
-Regular.args = {
-  name: 'code',
-  value: '',
-  language: 'javascript',
-  showLineNumbers: true
-}