@operato/input 8.0.0-alpha.51 → 8.0.0-beta.1

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

package/stories/ox-select-floor.stories.ts

@@ -1,197 +0,0 @@
-import '../src/ox-select-floor.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-import { IMAGE } from './image-for-select-floor.js'
-
-export default {
-  title: 'ox-select-floor',
-  component: 'ox-select-floor',
-  argTypes: {
-    disabled: { control: 'boolean' },
-    value: { control: 'text' },
-    bottomLimit: { control: 'number' },
-    perspective: { control: 'number' },
-    rotateX: { control: 'number' },
-    rotateXForActive: { control: 'number' },
-    interval: { control: 'number' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  value?: string
-  bottomLimit?: number
-  perspective?: number
-  rotateX?: number
-  rotateXForActive?: number
-  disabled?: boolean
-  interval?: number
-}
-
-const cards = new Array(10).fill({}).map((_, index) => {
-  return {
-    image: IMAGE,
-    name: index + 1 + '층'
-  }
-})
-
-const Template: Story<ArgTypes> = ({
-  value,
-  disabled,
-  bottomLimit = 70,
-  perspective = 1200,
-  rotateX = 60,
-  rotateXForActive = 40,
-  interval = 0
-}: 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>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-
-      overscroll-behavior-y: none;
-
-      /* This is a font-stack that tries to use the system-default sans-serifs first */
-      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-
-      accent-color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-background);
-    }
-
-    .container {
-      height: 1000px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    div[status] {
-      display: flex;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      align-items: center;
-      right: 3%;
-    }
-
-    div[status] > div[content] {
-      display: flex;
-      background-color: #4e5055;
-      color: #fff;
-      padding: 5px 7px;
-      border-radius: 7px;
-      gap: 10px;
-      font-size: 14px;
-    }
-
-    div[status] span {
-      display: flex;
-      align-items: center;
-      width: 48px;
-    }
-
-    div[status] md-icon {
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-      border-radius: 5px;
-      font-size: 21px;
-      font-weight: 700;
-    }
-    div[status] md-icon[request] {
-      background-color: #f7f7f7;
-      color: #4e5055;
-    }
-    div[status] md-icon[pass] {
-      background-color: #4bbb4a;
-    }
-    div[status] md-icon[fail] {
-      background-color: #ff4444;
-    }
-
-    span[name] {
-      width: 40px;
-      color: #4e5055;
-      margin-left: 6px;
-      text-align: center;
-    }
-
-    span[name][active] {
-      color: var(--md-sys-color-on-error);
-      background-color: var(--md-sys-color-error);
-      border-radius: 999px;
-    }
-
-    ox-select-floor {
-      --ox-select-floor-rotate-x: ${rotateX}deg;
-      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;
-      --ox-select-floor-perspective: ${perspective}px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-select-floor
-      .cards=${cards}
-      .bottomLimit=${bottomLimit}
-      ?disabled=${disabled}
-      .interval=${interval}
-      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}
-    >
-      ${cards.map(
-        ({ image, name }, index) =>
-          html`<div slot="template-${index}" status>
-            <div content>
-              <span><md-icon request slot="icon">exclamation</md-icon>100</span>
-              <span><md-icon pass slot="icon">check</md-icon>50</span>
-              <span><md-icon fail slot="icon">close</md-icon>5</span>
-            </div>
-            <span name>${name}</span>
-          </div>`
-      )}
-    </ox-select-floor>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  bottomLimit: 70,
-  perspective: 1200,
-  rotateX: 60,
-  rotateXForActive: 40,
-  interval: 0
-}