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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.51",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -218,11 +218,11 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
     "@material/web": "^2.0.0",
-    "@operato/color-picker": "^8.0.0-alpha.33",
-    "@operato/i18n": "^8.0.0-alpha.37",
-    "@operato/popup": "^8.0.0-alpha.51",
-    "@operato/styles": "^8.0.0-alpha.50",
-    "@operato/utils": "^8.0.0-alpha.37",
+    "@operato/color-picker": "^8.0.0-beta.1",
+    "@operato/i18n": "^8.0.0-beta.1",
+    "@operato/popup": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -266,5 +266,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac94e729e3647d45c921be99f96f4c2e65cef797"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook'
-import baseConfig from '../web-dev-server.config.mjs'
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
-})

package/src/index.ts

@@ -1,35 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-export * from './ox-form-field.js'
-export * from './ox-buttons-radio.js'
-export * from './ox-checkbox.js'
-export * from './ox-select.js'
-export * from './ox-input-switch.js'
-export * from './ox-input-angle.js'
-export * from './ox-input-3dish.js'
-export * from './ox-input-3axis.js'
-export * from './ox-input-stack.js'
-export * from './ox-input-barcode.js'
-export * from './ox-input-code.js'
-export * from './ox-input-color.js'
-export * from './ox-input-multiple-colors.js'
-export * from './ox-input-color-stops.js'
-export * from './ox-input-color-gradient.js'
-export * from './ox-input-file.js'
-export * from './ox-input-image.js'
-export * from './ox-input-value-ranges.js'
-export * from './ox-input-value-map.js'
-export * from './ox-input-table.js'
-export * from './ox-input-scene-component-id.js'
-export * from './ox-input-crontab.js'
-export * from './ox-input-partition-keys.js'
-export * from './ox-input-duration.js'
-export * from './ox-input-quantifier.js'
-export * from './ox-input-select-buttons.js'
-export * from './ox-input-textarea.js'
-export * from './ox-input-direction.js'
-export * from './ox-input-table-column-config.js'
-export * from './ox-input-search.js'
-export * from './ox-input-signature.js'

package/src/locale/locale-codes.ts

@@ -1,18 +0,0 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize.
-
-/**
- * The locale code that templates in this source code are written in.
- */
-export const sourceLocale = `en`
-
-/**
- * The other locale codes that this application is localized into. Sorted
- * lexicographically.
- */
-export const targetLocales = [`ko`, `zh`, `ms`] as const
-
-/**
- * All valid project locale codes. Sorted lexicographically.
- */
-export const allLocales = [`en`, `ko`, `zh`, `ms`] as const

package/src/locale/locale-picker.ts

@@ -1,43 +0,0 @@
-import { html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { localized } from '@lit/localize'
-
-import { allLocales } from './locale-codes.js'
-import { getLocale, setLocaleFromUrl } from './localization.js'
-
-const localeNames: {
-  [L in typeof allLocales[number]]: string
-} = {
-  en: 'English',
-  ko: '한국어',
-  zh: '中文 (简体)',
-  ms: 'Malay'
-}
-
-// Note we use updateWhenLocaleChanges here so that we're always up to date with
-// the active locale (the result of getLocale()) when the locale changes via a
-// history navigation.
-@localized()
-@customElement('locale-picker')
-export class LocalePicker extends LitElement {
-  render() {
-    return html`
-      <select @change=${this.localeChanged}>
-        ${allLocales.map(
-          locale => html`<option value=${locale} ?selected=${locale === getLocale()}>${localeNames[locale]}</option>`
-        )}
-      </select>
-    `
-  }
-
-  localeChanged(event: Event) {
-    const newLocale = (event.target as HTMLSelectElement).value
-    if (newLocale !== getLocale()) {
-      const url = new URL(window.location.href)
-      url.searchParams.set('locale', newLocale)
-      window.history.pushState(null, '', url.toString())
-      setLocaleFromUrl()
-    }
-  }
-}

package/src/locale/localization.ts

@@ -1,15 +0,0 @@
-import { configureLocalization } from '@lit/localize'
-
-import { sourceLocale, targetLocales } from './locale-codes.js'
-
-export const { getLocale, setLocale } = configureLocalization({
-  sourceLocale,
-  targetLocales,
-  loadLocale: (locale: string) => import(`../locales/${locale}.js`)
-})
-
-export const setLocaleFromUrl = async () => {
-  const url = new URL(window.location.href)
-  const locale = url.searchParams.get('locale') || sourceLocale
-  await setLocale(locale)
-}

package/src/locales/en.ts

@@ -1,30 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'sf9b52aece5aed0f7': `x-axes`,
-'s9f41d726ecec72c2': `y-axes`,
-'s31be7a0b4a5853dd': `z-axes`,
-'sd793f87f18747a63': `dimension`,
-'s4cbf3a26fca1d74a': `position`,
-'s6aacb9fbb71a1d91': `scale`,
-'s075cb2f53173bd8a': `rotate`,
-'sb9874d345b5e590a': `tag duplicated`,
-'s5191b91c637d7da1': `special characters not allowed`,
-'sc4bcadba8e631b86': `name`,
-'s63c6e58ec805a9eb': `from date`,
-'sfcc01216c601ec9e': `from time`,
-'s685db98545dc9448': `to date`,
-'s77c8560cf63a372d': `to time`,
-'s42670fc325584e15': `The day before`,
-'s29ec9210c8a8222e': `The day`,
-'scff69aa7239287b0': `The day after`,
-    };
-  

package/src/locales/ko.ts

@@ -1,30 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's075cb2f53173bd8a': `회전`,
-'s29ec9210c8a8222e': `당일`,
-'s31be7a0b4a5853dd': `z 축`,
-'s42670fc325584e15': `전날`,
-'s4cbf3a26fca1d74a': `위치`,
-'s5191b91c637d7da1': `특수문자는 허용되지 않습니다`,
-'s63c6e58ec805a9eb': `시작일`,
-'s685db98545dc9448': `완료일`,
-'s6aacb9fbb71a1d91': `스케일`,
-'s77c8560cf63a372d': `완료시간`,
-'s9f41d726ecec72c2': `y 축`,
-'sb9874d345b5e590a': `태그가 중복되었습니다`,
-'sc4bcadba8e631b86': `이름`,
-'scff69aa7239287b0': `다음날`,
-'sd793f87f18747a63': `체적`,
-'sf9b52aece5aed0f7': `x 축`,
-'sfcc01216c601ec9e': `시작시간`,
-    };
-  

package/src/locales/ms.ts

@@ -1,30 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'sf9b52aece5aed0f7': `x-axes`,
-'s9f41d726ecec72c2': `y-axes`,
-'s31be7a0b4a5853dd': `z-axes`,
-'sd793f87f18747a63': `dimension`,
-'s4cbf3a26fca1d74a': `position`,
-'s6aacb9fbb71a1d91': `scale`,
-'s075cb2f53173bd8a': `rotate`,
-'sb9874d345b5e590a': `tag duplicated`,
-'s5191b91c637d7da1': `special characters not allowed`,
-'sc4bcadba8e631b86': `name`,
-'s63c6e58ec805a9eb': `from date`,
-'sfcc01216c601ec9e': `from time`,
-'s685db98545dc9448': `to date`,
-'s77c8560cf63a372d': `to time`,
-'s42670fc325584e15': `The day before`,
-'s29ec9210c8a8222e': `The day`,
-'scff69aa7239287b0': `The day after`,
-    };
-  

package/src/locales/zh.ts

@@ -1,30 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'sf9b52aece5aed0f7': `x-axes`,
-'s9f41d726ecec72c2': `y-axes`,
-'s31be7a0b4a5853dd': `z-axes`,
-'sd793f87f18747a63': `dimension`,
-'s4cbf3a26fca1d74a': `position`,
-'s6aacb9fbb71a1d91': `scale`,
-'s075cb2f53173bd8a': `rotate`,
-'sb9874d345b5e590a': `tag duplicated`,
-'s5191b91c637d7da1': `special characters not allowed`,
-'sc4bcadba8e631b86': `name`,
-'s63c6e58ec805a9eb': `from date`,
-'sfcc01216c601ec9e': `from time`,
-'s685db98545dc9448': `to date`,
-'s77c8560cf63a372d': `to time`,
-'s42670fc325584e15': `The day before`,
-'s29ec9210c8a8222e': `The day`,
-'scff69aa7239287b0': `The day after`,
-    };
-  

package/src/ox-buttons-radio.ts

@@ -1,140 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxFormField } from './ox-form-field'
-
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <ox-buttons-radio
-    class="light"
-    @change=${(e: CustomEvent) => console.log(e.detail)}
-    value="1"
-  >
-    <md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
-    <md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
-    <md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
-  </ox-buttons-radio>
-*/
-@customElement('ox-buttons-radio')
-export class OxButtonsRadio extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
-
-        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
-        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        --md-outlined-button-container-height: var(--form-element-height-medium);
-        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
-        --md-outlined-button-leading-space: var(--spacing-large);
-        --md-outlined-button-trailing-space: var(--spacing-large);
-        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
-        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
-        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
-
-        --md-filled-button-container-color: var(--md-sys-color-primary);
-        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
-        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        --md-filled-button-container-height: var(--form-element-height-medium);
-        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
-        --md-filled-button-leading-space: var(--spacing-large);
-        --md-filled-button-trailing-space: var(--spacing-large);
-        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
-        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
-        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
-
-        --md-text-button-container-height: var(--form-element-height-medium);
-        --md-text-button-container-shape: var(--md-sys-shape-corner-small);
-
-        --md-elevated-button-container-height: var(--form-element-height-medium);
-        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
-      }
-    `
-  ]
-
-  /**
-   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-   */
-  @property({ type: Object }) value: Object | null = null
-  @property({ type: Boolean }) mandatory!: boolean
-
-  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {
-    this._onChanged()
-  })
-
-  render() {
-    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this._slotObserver?.observe(this, { childList: true })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._slotObserver?.disconnect()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('value') && this._onChanged()
-  }
-
-  get buttons() {
-    return Array.from(this.querySelectorAll('*'))
-  }
-
-  _onChanged() {
-    this.buttons.forEach(button => {
-      if (this.value === button.getAttribute('data-value')) {
-        button.setAttribute('active', '')
-      } else {
-        button.removeAttribute('active')
-      }
-    })
-  }
-
-  _onTapButton(e: Event) {
-    var target = e.target as HTMLElement
-    target = target.closest('[data-value]') as HTMLElement
-
-    if (!target || target === this) {
-      return
-    }
-
-    var old = this.value
-
-    if (!this.mandatory) {
-      if (!target.getAttribute('active')) {
-        this.value = target.getAttribute('data-value')
-        target.setAttribute('active', '')
-      } else {
-        this.value = null
-        target.removeAttribute('active')
-      }
-    } else {
-      this.value = target.getAttribute('data-value')
-      target.setAttribute('active', '')
-    }
-
-    if (old !== this.value) {
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true,
-          detail: this.value
-        })
-      )
-    }
-  }
-}