@operato/input 7.1.27 → 7.1.32

package/stories/ox-input-table-column-config.stories.ts

@@ -1,109 +0,0 @@
-import '../src/ox-input-table-column-config.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-table-column-config',
-  component: 'ox-input-table-column-config',
-  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 = 'table-column-config', 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-table-column-config
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-table-column-config>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'table-column-config',
-  value: [
-    {
-      name: 'section',
-      label: 'Section',
-      visible: true,
-      width: 100,
-      order: 1
-    },
-    {
-      name: 'title',
-      label: 'Title',
-      visible: true,
-      width: 110,
-      order: 2
-    },
-    {
-      name: 'startDate',
-      label: 'Start Date',
-      visible: true,
-      width: 150,
-      order: 3
-    },
-    {
-      name: 'endDate',
-      label: 'End Date',
-      visible: true,
-      width: 200,
-      order: 4
-    }
-  ]
-}

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

@@ -1,151 +0,0 @@
-import '../src/ox-input-unit-number.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-unit-number',
-  component: 'ox-input-unit-number',
-  argTypes: {
-    placeholder: { control: 'text' },
-    name: { control: 'text' },
-    value: { control: 'number' },
-    stdUnit: {
-      control: 'select',
-      options: [
-        'kg',
-        'rad',
-        'm',
-        'g/mol',
-        'm2',
-        'm3',
-        'kg/m3',
-        'm/sec',
-        'N',
-        'Pa',
-        'kg/sec',
-        'kg/m2/sec',
-        'mol/sec',
-        'mol/m2/sec',
-        'Sm3/sec',
-        'Nm3/sec',
-        'J',
-        'W',
-        'W/m2',
-        'J/kg',
-        'J/kg/K',
-        'W/m/K',
-        'W/m2/K',
-        'N sec/m2',
-        'm2 oC/W',
-        '%',
-        'K'
-      ]
-    },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  placeholder?: string
-  name?: string
-  value?: number
-  stdUnit: string
-  userUnit: string
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  placeholder = 'unit',
-  name = 'hello',
-  value = 0,
-  stdUnit = 'kg',
-  userUnit,
-  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-unit-number
-      name=${name}
-      placeholder=${placeholder}
-      .value=${value}
-      std-unit=${stdUnit}
-      user-unit=${userUnit}
-      @change=${(e: CustomEvent) => console.log(e.detail)}
-      ?disabled=${disabled}
-    >
-    </ox-input-unit-number>
-  </div>
-`
-
-export const Weight = Template.bind({})
-Weight.args = {
-  placeholder: 'weight',
-  name: 'weight',
-  value: 0,
-  stdUnit: 'kg'
-}
-
-export const Angle = Template.bind({})
-Angle.args = {
-  placeholder: 'angle',
-  name: 'angle',
-  value: 0,
-  stdUnit: 'rad'
-}
-
-export const Temperature = Template.bind({})
-Temperature.args = {
-  placeholder: 'temperature',
-  name: 'temperature',
-  value: 0,
-  stdUnit: 'K',
-  userUnit: '°C'
-}
-
-export const Percentage = Template.bind({})
-Percentage.args = {
-  placeholder: 'percentage',
-  name: 'percentage',
-  value: 0,
-  stdUnit: '%'
-}

package/stories/ox-input-value-map.stories.ts

@@ -1,92 +0,0 @@
-import '../src/ox-input-value-map.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-value-map',
-  component: 'ox-input-value-map',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    keytype: { control: 'select', options: ['string', 'number'] },
-    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  valuetype?: string
-  keytype?: string
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'values',
-  value = {},
-  keytype = 'string',
-  valuetype = 'string',
-  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-value-map
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      keytype=${keytype}
-      valuetype=${valuetype}
-      ?disabled=${disabled}
-    >
-    </ox-input-value-map>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'values',
-  value: {}
-}

package/stories/ox-input-value-ranges.stories.ts

@@ -1,92 +0,0 @@
-import '../src/ox-input-value-ranges.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-value-ranges',
-  component: 'ox-input-value-ranges',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    keytype: { control: 'select', options: ['string', 'number'] },
-    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  valuetype?: string
-  keytype?: string
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'values',
-  value = {},
-  keytype = 'string',
-  valuetype = 'string',
-  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-value-ranges
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      keytype=${keytype}
-      valuetype=${valuetype}
-      ?disabled=${disabled}
-    >
-    </ox-input-value-ranges>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'values',
-  value: {}
-}

package/stories/ox-input-work-shift.stories.ts

@@ -1,106 +0,0 @@
-import '../src/ox-input-work-shift.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-work-shift',
-  component: 'ox-input-work-shift',
-  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 = 'work-shift', 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-work-shift
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-work-shift>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'work-shift',
-  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'
-    }
-  ]
-}