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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/input

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-beta.0",
+  "version": "8.0.0-beta.2",
   "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-beta.0",
-    "@operato/i18n": "^8.0.0-beta.0",
-    "@operato/popup": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/color-picker": "^8.0.0-beta.2",
+    "@operato/i18n": "^8.0.0-beta.2",
+    "@operato/popup": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "@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": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

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/demo/index-3dish.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-angle.js'
-      import '../dist/src/ox-input-3dish.js'
-      import '../dist/src/locale/locale-picker.js'
-
-      const form = document.querySelector('#demo')
-
-      render(
-        html`
-          <locale-picker></locale-picker>
-          <locale-picker></locale-picker>
-          <ox-input-3dish
-            name="threedish"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('threedish'))
-            }}
-          ></ox-input-3dish>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-angle.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-angle.js'
-
-      const form = document.querySelector('#demo')
-      const placeholder = 'enter a angle in degree'
-      render(
-        html`
-          <ox-input-angle
-            value="1"
-            name="angle"
-            placeholder=${placeholder}
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('angle'))
-            }}
-          ></ox-input-angle>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-barcode.html

@@ -1,68 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-
-      .customized {
-        /* checkbox default */
-        --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
-        --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
-        --ox-checkbox-border-radius: var(--border-radius, 4px);
-        --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
-        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
-        --ox-checkbox-label-margin: 0 0 0 7px;
-
-        /* checkbox checked */
-        --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
-        --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
-        --ox-checkbox-checked-font-weight: bold;
-
-        /* checkbox unchecked */
-        --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
-        --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
-
-        /* checkbox disabled */
-        --ox-checkbox-disabled-opacity: 0.5;
-
-        font-size: 1.1em;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-barcode.js'
-      const form = document.querySelector('#demo')
-
-      function onchange(e) {
-        const target = e.target
-        console.log(target.name, target.value)
-
-        const formData = new FormData(form)
-        console.log('<---- entries begins ----')
-        for (var pair of formData.entries()) {
-          console.log(pair[0] + ', ' + pair[1])
-        }
-        console.log('---- entries ends ------>')
-      }
-
-      render(
-        html`
-          <ox-input-barcode name="input-a" @change=${onchange}></ox-input-barcode>
-          <ox-input-barcode name="input-b" @change=${onchange}>hatiolab</ox-input-barcode>
-          <ox-input-barcode name="input-c" @change=${onchange}>ibex</ox-input-barcode>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-button-radio.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-buttons-radio.js'
-
-      const form = document.querySelector('#demo')
-
-      function onchange(e) {
-        const target = e.target
-        console.log(target.name, target.value)
-
-        const formData = new FormData(form)
-        for (var pair of formData.entries()) {
-          console.log(pair[0] + ', ' + pair[1])
-        }
-      }
-
-      render(
-        html`
-          <ox-buttons-radio name="group" @change=${onchange}>
-            <div data-value="top">TOP</div>
-            <div data-value="middle">MID</div>
-            <div data-value="bottom">BOT</div>
-          </ox-buttons-radio>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-checkbox.html

@@ -1,69 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-
-      .customized {
-        /* checkbox default */
-        --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
-        --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
-        --ox-checkbox-border-radius: var(--border-radius, 4px);
-        --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
-        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
-        --ox-checkbox-label-margin: 0 0 0 7px;
-
-        /* checkbox checked */
-        --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
-        --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
-        --ox-checkbox-checked-font-weight: bold;
-
-        /* checkbox unchecked */
-        --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
-        --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
-
-        /* checkbox disabled */
-        --ox-checkbox-disabled-opacity: 0.5;
-
-        font-size: 1.1em;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-checkbox.js'
-      const form = document.querySelector('#demo')
-
-      function onchange(e) {
-        const target = e.target
-        console.log(target.name, target.checked)
-
-        const formData = new FormData(form)
-        for (var pair of formData.entries()) {
-          console.log(pair[0] + ', ' + pair[1])
-        }
-      }
-
-      render(
-        html`
-          <ox-checkbox name="check-a" @change=${onchange} class=""></ox-checkbox>
-          <ox-checkbox name="check-b" @change=${onchange} class="customized">hatiolab</ox-checkbox>
-          <ox-checkbox name="check-c" @change=${onchange} class="customized" indeterminatable indeterminate
-            >hatiosea - indetarminatable</ox-checkbox
-          >
-          <ox-checkbox name="check-d" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-code.html

@@ -1,61 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-
-      .customized {
-        /* checkbox default */
-        --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
-        --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
-        --ox-checkbox-border-radius: var(--border-radius, 4px);
-        --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
-        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
-        --ox-checkbox-label-margin: 0 0 0 7px;
-
-        /* checkbox checked */
-        --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
-        --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
-        --ox-checkbox-checked-font-weight: bold;
-
-        /* checkbox unchecked */
-        --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
-        --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
-
-        /* checkbox disabled */
-        --ox-checkbox-disabled-opacity: 0.5;
-
-        font-size: 1.1em;
-      }
-    </style>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-code.js'
-      const form = document.querySelector('#demo')
-
-      function onchange(e) {
-        const target = e.target
-        console.log(target.name, target.value)
-
-        const formData = new FormData(form)
-        console.log('<---- entries begins ----')
-        for (var pair of formData.entries()) {
-          console.log(pair[0] + ', ' + pair[1])
-        }
-        console.log('---- entries ends ------>')
-      }
-
-      render(html` <ox-input-code name="input-a" @change=${onchange}></ox-input-code> `, form)
-    </script>
-  </body>
-</html>

package/demo/index-color-gradient.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-color-gradient.js'
-
-      const form = document.querySelector('#demo')
-      render(
-        html`
-          <ox-input-color-gradient
-            name="color-gradient-solid"
-            type="solid"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('color-gradient-solid'))
-            }}
-          ></ox-input-color-gradient>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-color-stops.html

@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-color-stops.js'
-
-      const value = [
-        {
-          position: 0,
-          color: 'white'
-        },
-        {
-          position: 0.5,
-          color: 'green'
-        },
-        {
-          position: 1,
-          color: 'white'
-        }
-      ]
-
-      const form = document.querySelector('#demo')
-      render(
-        html`
-          <ox-input-color-stops
-            name="color-stops-solid"
-            type="solid"
-            min="0"
-            max="100"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('color-stops-solid'))
-            }}
-          ></ox-input-color-stops>
-
-          <ox-input-color-stops
-            name="color-stops-gradient"
-            .value=${value}
-            type="gradient"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('color-stops-gradient'))
-            }}
-          ></ox-input-color-stops>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-color.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-color.js'
-
-      const form = document.querySelector('#demo')
-      render(
-        html`
-          <ox-input-color
-            value="navy"
-            name="color"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('color'))
-            }}
-          ></ox-input-color>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/demo/index-crontab.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
-    <script src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js" async></script>
-  </head>
-  <body>
-    <form id="demo"></form>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-input-crontab.js'
-
-      const form = document.querySelector('#demo')
-
-      render(
-        html`
-          <ox-input-crontab
-            value="* * * * * *"
-            name="crontab"
-            @change=${e => {
-              console.log(e.target.value)
-              console.log('form value', new FormData(form).get('crontab'))
-            }}
-          ></ox-input-crontab>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>