@operato/input 7.1.30 → 7.1.32

package/src/ox-select.ts

@@ -1,219 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import '@operato/popup/ox-popup-list.js'
-import './ox-checkbox.js'
-
-import { css, html, render, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { OxPopupList } from '@operato/popup'
-
-import { OxFormField } from './ox-form-field.js'
-
-@customElement('ox-select')
-export class OxSelect extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        position: relative;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-
-        --ox-select-padding: var(--spacing-tiny);
-        --ox-select-font: var(--input-font);
-        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
-      }
-
-      div {
-        width: 100%;
-        box-sizing: border-box;
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        padding: var(--ox-select-padding);
-        font: var(--ox-select-font);
-        color: var(--ox-select-color);
-      }
-
-      span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        gap: 4px;
-      }
-
-      md-icon {
-        --md-icon-size: 16px;
-        display: block;
-        text-align: right;
-        color: var(--ox-select-icon-color);
-        opacity: 0.7;
-      }
-
-      div:hover md-icon {
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: String }) name: string = ''
-  @property({ type: String }) placeholder: string = ''
-
-  @state() label: string | string[] = ''
-  @state() popupContainer: HTMLElement | null = null
-  @state() observer: MutationObserver | null = null
-
-  render() {
-    const label =
-      (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||
-      (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||
-      this.placeholder ||
-      ''
-
-    return html`
-      <div @click=${this.expand}>
-        <span data-reactive-tooltip>${label}</span>
-        <md-icon>expand_more</md-icon>
-      </div>
-
-      <slot></slot>
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.setAttribute('tabindex', '0')
-
-    this.addEventListener('keydown', (e: KeyboardEvent) => {
-      e.preventDefault()
-
-      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {
-        this.expand()
-      }
-    })
-
-    this.addEventListener('click', () => this.expand())
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||
-        this.querySelector('ox-popup-list')) as OxPopupList
-
-      if (popupList) {
-        popupList.value = this.value
-        await this.requestUpdate()
-
-        this.label = popupList.getSelectedLabels()
-      }
-    }
-  }
-
-  setOptions(
-    options: string[] | { display: string; value: string }[],
-    opt: { multiple?: boolean; withSearch?: boolean } = {}
-  ) {
-    const objOptions = options.map(option => {
-      return typeof option == 'string' ? { display: option, value: option } : option
-    })
-
-    const { multiple, withSearch } = opt || {}
-
-    const template = html`
-      <ox-popup-list
-        align-left
-        nowrap
-        ?multiple=${multiple}
-        attr-selected=${multiple ? 'checked' : ''}
-        ?with-search=${withSearch}
-      >
-        ${multiple
-          ? html`<ox-checkbox
-                @change=${(e: Event) => {
-                  const target = e.target as HTMLInputElement
-                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
-                    option => !option.hasAttribute('hidden')
-                  )
-                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
-
-                  this.value = options
-                    .map(option =>
-                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined
-                    )
-                    .filter(Boolean)
-                }}
-                >set all</ox-checkbox
-              >
-              ${objOptions.map(
-                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
-              )}`
-          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}
-      </ox-popup-list>
-    `
-
-    render(template, this)
-  }
-
-  expand() {
-    if (this.disabled) {
-      return
-    }
-
-    const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || []
-
-    if (slotContent.length > 0) {
-      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList
-
-      if (popupList) {
-        const { left, bottom } = this.getBoundingClientRect()
-
-        popupList.value = this.value
-        popupList.style.width = `${this.offsetWidth}px`
-        popupList.style.textWrap = 'nowrap'
-
-        const selectHandler = async (e: Event) => {
-          this.value = (e as CustomEvent).detail
-
-          if (popupList) {
-            await this.requestUpdate()
-            this.label = popupList.getSelectedLabels()
-          }
-        }
-        popupList.addEventListener('select', selectHandler)
-
-        const closeHandler = (e: Event) => {
-          /* popup이 close될 때 change 이벤트를 발생시킨다. */
-          this.dispatchEvent(
-            new CustomEvent('change', {
-              bubbles: true,
-              composed: true,
-              detail: this.value
-            })
-          )
-          popupList.removeEventListener('select', selectHandler)
-          popupList.removeEventListener('close', closeHandler)
-
-          this.appendChild(popupList)
-        }
-        popupList.addEventListener('close', closeHandler, { once: true })
-
-        document.body.appendChild(popupList)
-
-        popupList.open({
-          left,
-          top: bottom
-        })
-      }
-    }
-  }
-}

package/src/ox-zoomable-image.ts

@@ -1,75 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-zoomable-image')
-export class OxZoomableImage extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      overflow: hidden;
-      position: relative;
-    }
-
-    img {
-      transition: transform 0.25s ease;
-      transform-origin: center;
-      cursor: grab;
-    }
-  `
-
-  @property({ type: String }) src = ''
-
-  @query('img') image!: HTMLImageElement
-
-  private scale: number = 1
-  private startX: number = 0
-  private startY: number = 0
-  private x: number = 0
-  private y: number = 0
-  private dragging: boolean = false
-
-  render() {
-    return html`
-      <img
-        id="zoomableImage"
-        src="${this.src}"
-        @wheel="${this.handleWheel}"
-        @mousedown="${this.handleMouseDown}"
-        @mousemove="${this.handleMouseMove}"
-        @mouseup="${this.handleMouseUp}"
-        @mouseleave="${this.handleMouseUp}"
-        style="transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});"
-      />
-    `
-  }
-
-  private handleWheel(event: WheelEvent) {
-    event.preventDefault()
-    const delta = event.deltaY
-    const zoomIntensity = 0.1
-    this.scale += delta > 0 ? -zoomIntensity : zoomIntensity
-    this.scale = Math.max(0.1, Math.min(this.scale, 4))
-    this.requestUpdate()
-  }
-
-  private handleMouseDown(event: MouseEvent) {
-    this.startX = event.clientX - this.x
-    this.startY = event.clientY - this.y
-    this.dragging = true
-    const img = this.image as HTMLImageElement
-    img.style.cursor = 'grabbing'
-  }
-
-  private handleMouseMove(event: MouseEvent) {
-    if (!this.dragging) return
-    this.x = event.clientX - this.startX
-    this.y = event.clientY - this.startY
-    this.requestUpdate()
-  }
-
-  private handleMouseUp() {
-    this.dragging = false
-    const img = this.image as HTMLImageElement
-    img.style.cursor = 'grab'
-  }
-}

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