@operato/input 7.1.27 → 7.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/package.json +7 -7
  4. package/.editorconfig +0 -29
  5. package/.storybook/main.js +0 -3
  6. package/.storybook/preview.js +0 -52
  7. package/.storybook/server.mjs +0 -8
  8. package/demo/index-3dish.html +0 -38
  9. package/demo/index-angle.html +0 -36
  10. package/demo/index-barcode.html +0 -68
  11. package/demo/index-button-radio.html +0 -42
  12. package/demo/index-checkbox.html +0 -69
  13. package/demo/index-code.html +0 -61
  14. package/demo/index-color-gradient.html +0 -35
  15. package/demo/index-color-stops.html +0 -62
  16. package/demo/index-color.html +0 -35
  17. package/demo/index-crontab.html +0 -37
  18. package/demo/index-file.html +0 -41
  19. package/demo/index-image.html +0 -40
  20. package/demo/index-multiple-colors.html +0 -52
  21. package/demo/index-options.html +0 -43
  22. package/demo/index-partition-keys.html +0 -79
  23. package/demo/index-range.html +0 -40
  24. package/demo/index-select.html +0 -136
  25. package/demo/index-stack.html +0 -33
  26. package/demo/index-table.html +0 -50
  27. package/demo/index-value-map.html +0 -80
  28. package/demo/index-value-ranges.html +0 -80
  29. package/demo/index-work-shift.html +0 -59
  30. package/demo/index.html +0 -54
  31. package/src/index.ts +0 -34
  32. package/src/locale/locale-codes.ts +0 -18
  33. package/src/locale/locale-picker.ts +0 -43
  34. package/src/locale/localization.ts +0 -15
  35. package/src/locales/en.ts +0 -30
  36. package/src/locales/ko.ts +0 -30
  37. package/src/locales/ms.ts +0 -30
  38. package/src/locales/zh.ts +0 -30
  39. package/src/ox-buttons-radio.ts +0 -140
  40. package/src/ox-checkbox.ts +0 -181
  41. package/src/ox-form-field.ts +0 -53
  42. package/src/ox-input-3axis.ts +0 -77
  43. package/src/ox-input-3dish.ts +0 -211
  44. package/src/ox-input-angle.ts +0 -73
  45. package/src/ox-input-barcode.ts +0 -318
  46. package/src/ox-input-code.ts +0 -139
  47. package/src/ox-input-color-gradient.ts +0 -349
  48. package/src/ox-input-color-stops.ts +0 -525
  49. package/src/ox-input-color.ts +0 -338
  50. package/src/ox-input-container.ts +0 -32
  51. package/src/ox-input-crontab.ts +0 -595
  52. package/src/ox-input-data.ts +0 -219
  53. package/src/ox-input-direction.ts +0 -65
  54. package/src/ox-input-duration.ts +0 -175
  55. package/src/ox-input-file.ts +0 -209
  56. package/src/ox-input-hashtags.ts +0 -185
  57. package/src/ox-input-i18n-label.ts +0 -140
  58. package/src/ox-input-image.ts +0 -168
  59. package/src/ox-input-key-values.ts +0 -301
  60. package/src/ox-input-layout/ox-input-card-layout.ts +0 -58
  61. package/src/ox-input-layout/ox-input-grid-layout.ts +0 -64
  62. package/src/ox-input-layout/ox-input-layout.ts +0 -77
  63. package/src/ox-input-mass-fraction.ts +0 -437
  64. package/src/ox-input-multiple-colors.ts +0 -135
  65. package/src/ox-input-options.ts +0 -216
  66. package/src/ox-input-partition-keys.ts +0 -303
  67. package/src/ox-input-privilege.ts +0 -163
  68. package/src/ox-input-quantifier.ts +0 -62
  69. package/src/ox-input-range.ts +0 -146
  70. package/src/ox-input-scene-component-id.ts +0 -73
  71. package/src/ox-input-search.ts +0 -126
  72. package/src/ox-input-select-buttons.ts +0 -75
  73. package/src/ox-input-signature.ts +0 -180
  74. package/src/ox-input-stack.ts +0 -136
  75. package/src/ox-input-table-column-config.ts +0 -211
  76. package/src/ox-input-table.ts +0 -404
  77. package/src/ox-input-textarea.ts +0 -86
  78. package/src/ox-input-unit-number.ts +0 -354
  79. package/src/ox-input-value-map.ts +0 -342
  80. package/src/ox-input-value-ranges.ts +0 -363
  81. package/src/ox-input-work-shift.ts +0 -290
  82. package/src/ox-select.ts +0 -219
  83. package/src/ox-zoomable-image.ts +0 -75
  84. package/stories/ox-buttons-radio.stories.ts +0 -89
  85. package/stories/ox-checkbox.stories.ts +0 -111
  86. package/stories/ox-input-3axis.stories.ts +0 -77
  87. package/stories/ox-input-3dish.stories.ts +0 -106
  88. package/stories/ox-input-angle.stories.ts +0 -84
  89. package/stories/ox-input-barcode.stories.ts +0 -117
  90. package/stories/ox-input-code.stories.ts +0 -99
  91. package/stories/ox-input-crontab.stories.ts +0 -82
  92. package/stories/ox-input-data.stories.ts +0 -82
  93. package/stories/ox-input-direction.stories.ts +0 -80
  94. package/stories/ox-input-duration.stories.ts +0 -84
  95. package/stories/ox-input-file.stories.ts +0 -111
  96. package/stories/ox-input-hashtags.stories.ts +0 -82
  97. package/stories/ox-input-i18n-label.stories.ts +0 -103
  98. package/stories/ox-input-key-values.stories.ts +0 -97
  99. package/stories/ox-input-mass-fraction.stories.ts +0 -102
  100. package/stories/ox-input-multiple-colors.stories.ts +0 -72
  101. package/stories/ox-input-options.stories.ts +0 -80
  102. package/stories/ox-input-partition-keys.stories.ts +0 -84
  103. package/stories/ox-input-privilege.stories.ts +0 -108
  104. package/stories/ox-input-quantifier.stories.ts +0 -80
  105. package/stories/ox-input-range.stories.ts +0 -89
  106. package/stories/ox-input-search.stories.ts +0 -91
  107. package/stories/ox-input-select-buttons.stories.ts +0 -118
  108. package/stories/ox-input-signature.stories.ts +0 -75
  109. package/stories/ox-input-table-column-config.stories.ts +0 -109
  110. package/stories/ox-input-unit.stories.ts +0 -151
  111. package/stories/ox-input-value-map.stories.ts +0 -92
  112. package/stories/ox-input-value-ranges.stories.ts +0 -92
  113. package/stories/ox-input-work-shift.stories.ts +0 -106
  114. package/stories/ox-select-set-options.stories.ts +0 -208
  115. package/stories/ox-select.stories.ts +0 -181
  116. package/tsconfig.json +0 -25
  117. package/web-dev-server.config.mjs +0 -27
  118. package/web-test-runner.config.mjs +0 -41
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/input",
3
3
  "description": "Webcomponents for input following open-wc recommendations",
4
4
  "author": "heartyoh@hatiolab.com",
5
- "version": "7.1.27",
5
+ "version": "7.1.32",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "license": "MIT",
@@ -210,11 +210,11 @@
210
210
  "@ctrl/tinycolor": "^4.1.0",
211
211
  "@lit/localize": "^0.12.1",
212
212
  "@material/web": "^2.0.0",
213
- "@operato/color-picker": "^7.1.1",
214
- "@operato/i18n": "^7.1.1",
215
- "@operato/popup": "^7.1.27",
216
- "@operato/styles": "^7.1.27",
217
- "@operato/utils": "^7.1.1",
213
+ "@operato/color-picker": "^7.1.32",
214
+ "@operato/i18n": "^7.1.32",
215
+ "@operato/popup": "^7.1.32",
216
+ "@operato/styles": "^7.1.32",
217
+ "@operato/utils": "^7.1.32",
218
218
  "@polymer/paper-dropdown-menu": "^3.2.0",
219
219
  "@polymer/paper-item": "^3.0.1",
220
220
  "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -258,5 +258,5 @@
258
258
  "prettier --write"
259
259
  ]
260
260
  },
261
- "gitHead": "c1c3d738aa1f8462b2483cd1ebdfdfbe95d7e22a"
261
+ "gitHead": "c4f5ed0b63d49d02c5a155b592c0ecf681c92cf7"
262
262
  }
package/.editorconfig DELETED
@@ -1,29 +0,0 @@
1
- # EditorConfig helps developers define and maintain consistent
2
- # coding styles between different editors and IDEs
3
- # editorconfig.org
4
-
5
- root = true
6
-
7
-
8
- [*]
9
-
10
- # Change these settings to your own preference
11
- indent_style = space
12
- indent_size = 2
13
-
14
- # We recommend you to keep these unchanged
15
- end_of_line = lf
16
- charset = utf-8
17
- trim_trailing_whitespace = true
18
- insert_final_newline = true
19
-
20
- [*.md]
21
- trim_trailing_whitespace = false
22
-
23
- [*.json]
24
- indent_size = 2
25
-
26
- [*.{html,js,md}]
27
- block_comment_start = /**
28
- block_comment = *
29
- block_comment_end = */
package/.storybook/main.js DELETED
@@ -1,3 +0,0 @@
1
- module.exports = {
2
- stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
3
- }
package/.storybook/preview.js DELETED
@@ -1,52 +0,0 @@
1
- import { i18next } from '@operato/i18n'
2
-
3
- export const globalTypes = {
4
- locale: {
5
- name: 'Locale',
6
- description: 'Internationalization locale',
7
- toolbar: {
8
- icon: 'globe',
9
- items: [
10
- { value: 'en', right: '🇺🇸', title: 'English' },
11
- { value: 'ko', right: '🇰🇷', title: '한국어' },
12
- { value: 'zh', right: '🇨🇳', title: '中文' },
13
- { value: 'ja', right: '🇯🇵', title: '日本語' },
14
- { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
15
- ],
16
- showName: true
17
- }
18
- },
19
- theme: {
20
- name: 'Theme',
21
- description: 'Global theme for components',
22
- toolbar: {
23
- icon: 'paintbrush',
24
- items: [
25
- { value: 'light', title: 'Light' },
26
- { value: 'dark', title: 'Dark' }
27
- ],
28
- showName: true
29
- }
30
- }
31
- }
32
-
33
- export const decorators = [
34
- (Story, context) => {
35
- const { locale, theme } = context.globals
36
-
37
- if (locale) {
38
- i18next.changeLanguage(locale)
39
- }
40
-
41
- // Set the theme class for the document
42
- if (theme === 'dark') {
43
- document.documentElement.classList.add('dark')
44
- document.documentElement.classList.remove('light')
45
- } else {
46
- document.documentElement.classList.add('light')
47
- document.documentElement.classList.remove('dark')
48
- }
49
-
50
- return Story()
51
- }
52
- ]
package/.storybook/server.mjs DELETED
@@ -1,8 +0,0 @@
1
- import { storybookPlugin } from '@web/dev-server-storybook'
2
- import baseConfig from '../web-dev-server.config.mjs'
3
-
4
- export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5
- ...baseConfig,
6
- open: '/',
7
- plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
8
- })
package/demo/index-3dish.html DELETED
@@ -1,38 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-angle.js'
17
- import '../dist/src/ox-input-3dish.js'
18
- import '../dist/src/locale/locale-picker.js'
19
-
20
- const form = document.querySelector('#demo')
21
-
22
- render(
23
- html`
24
- <locale-picker></locale-picker>
25
- <locale-picker></locale-picker>
26
- <ox-input-3dish
27
- name="threedish"
28
- @change=${e => {
29
- console.log(e.target.value)
30
- console.log('form value', new FormData(form).get('threedish'))
31
- }}
32
- ></ox-input-3dish>
33
- `,
34
- form
35
- )
36
- </script>
37
- </body>
38
- </html>
package/demo/index-angle.html DELETED
@@ -1,36 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-angle.js'
17
-
18
- const form = document.querySelector('#demo')
19
- const placeholder = 'enter a angle in degree'
20
- render(
21
- html`
22
- <ox-input-angle
23
- value="1"
24
- name="angle"
25
- placeholder=${placeholder}
26
- @change=${e => {
27
- console.log(e.target.value)
28
- console.log('form value', new FormData(form).get('angle'))
29
- }}
30
- ></ox-input-angle>
31
- `,
32
- form
33
- )
34
- </script>
35
- </body>
36
- </html>
package/demo/index-barcode.html DELETED
@@ -1,68 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
-
10
- .customized {
11
- /* checkbox default */
12
- --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
13
- --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
14
- --ox-checkbox-border-radius: var(--border-radius, 4px);
15
- --ox-checkbox-size: 15px;
16
- --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
17
- --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
18
- --ox-checkbox-label-margin: 0 0 0 7px;
19
-
20
- /* checkbox checked */
21
- --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
22
- --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
23
- --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
24
- --ox-checkbox-checked-font-weight: bold;
25
-
26
- /* checkbox unchecked */
27
- --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
28
- --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
29
- --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
30
-
31
- /* checkbox disabled */
32
- --ox-checkbox-disabled-opacity: 0.5;
33
-
34
- font-size: 1.1em;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <form id="demo"></form>
40
-
41
- <script type="module">
42
- import { html, render } from 'lit'
43
- import '../dist/src/ox-input-barcode.js'
44
- const form = document.querySelector('#demo')
45
-
46
- function onchange(e) {
47
- const target = e.target
48
- console.log(target.name, target.value)
49
-
50
- const formData = new FormData(form)
51
- console.log('<---- entries begins ----')
52
- for (var pair of formData.entries()) {
53
- console.log(pair[0] + ', ' + pair[1])
54
- }
55
- console.log('---- entries ends ------>')
56
- }
57
-
58
- render(
59
- html`
60
- <ox-input-barcode name="input-a" @change=${onchange}></ox-input-barcode>
61
- <ox-input-barcode name="input-b" @change=${onchange}>hatiolab</ox-input-barcode>
62
- <ox-input-barcode name="input-c" @change=${onchange}>ibex</ox-input-barcode>
63
- `,
64
- form
65
- )
66
- </script>
67
- </body>
68
- </html>
package/demo/index-button-radio.html DELETED
@@ -1,42 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-buttons-radio.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- function onchange(e) {
21
- const target = e.target
22
- console.log(target.name, target.value)
23
-
24
- const formData = new FormData(form)
25
- for (var pair of formData.entries()) {
26
- console.log(pair[0] + ', ' + pair[1])
27
- }
28
- }
29
-
30
- render(
31
- html`
32
- <ox-buttons-radio name="group" @change=${onchange}>
33
- <div data-value="top">TOP</div>
34
- <div data-value="middle">MID</div>
35
- <div data-value="bottom">BOT</div>
36
- </ox-buttons-radio>
37
- `,
38
- form
39
- )
40
- </script>
41
- </body>
42
- </html>
package/demo/index-checkbox.html DELETED
@@ -1,69 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
-
10
- .customized {
11
- /* checkbox default */
12
- --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
13
- --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
14
- --ox-checkbox-border-radius: var(--border-radius, 4px);
15
- --ox-checkbox-size: 15px;
16
- --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
17
- --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
18
- --ox-checkbox-label-margin: 0 0 0 7px;
19
-
20
- /* checkbox checked */
21
- --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
22
- --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
23
- --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
24
- --ox-checkbox-checked-font-weight: bold;
25
-
26
- /* checkbox unchecked */
27
- --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
28
- --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
29
- --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
30
-
31
- /* checkbox disabled */
32
- --ox-checkbox-disabled-opacity: 0.5;
33
-
34
- font-size: 1.1em;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <form id="demo"></form>
40
-
41
- <script type="module">
42
- import { html, render } from 'lit'
43
- import '../dist/src/ox-checkbox.js'
44
- const form = document.querySelector('#demo')
45
-
46
- function onchange(e) {
47
- const target = e.target
48
- console.log(target.name, target.checked)
49
-
50
- const formData = new FormData(form)
51
- for (var pair of formData.entries()) {
52
- console.log(pair[0] + ', ' + pair[1])
53
- }
54
- }
55
-
56
- render(
57
- html`
58
- <ox-checkbox name="check-a" @change=${onchange} class=""></ox-checkbox>
59
- <ox-checkbox name="check-b" @change=${onchange} class="customized">hatiolab</ox-checkbox>
60
- <ox-checkbox name="check-c" @change=${onchange} class="customized" indeterminatable indeterminate
61
- >hatiosea - indetarminatable</ox-checkbox
62
- >
63
- <ox-checkbox name="check-d" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
64
- `,
65
- form
66
- )
67
- </script>
68
- </body>
69
- </html>
package/demo/index-code.html DELETED
@@ -1,61 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
-
10
- .customized {
11
- /* checkbox default */
12
- --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
13
- --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
14
- --ox-checkbox-border-radius: var(--border-radius, 4px);
15
- --ox-checkbox-size: 15px;
16
- --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
17
- --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
18
- --ox-checkbox-label-margin: 0 0 0 7px;
19
-
20
- /* checkbox checked */
21
- --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
22
- --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
23
- --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
24
- --ox-checkbox-checked-font-weight: bold;
25
-
26
- /* checkbox unchecked */
27
- --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
28
- --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
29
- --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
30
-
31
- /* checkbox disabled */
32
- --ox-checkbox-disabled-opacity: 0.5;
33
-
34
- font-size: 1.1em;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <form id="demo"></form>
40
-
41
- <script type="module">
42
- import { html, render } from 'lit'
43
- import '../dist/src/ox-input-code.js'
44
- const form = document.querySelector('#demo')
45
-
46
- function onchange(e) {
47
- const target = e.target
48
- console.log(target.name, target.value)
49
-
50
- const formData = new FormData(form)
51
- console.log('<---- entries begins ----')
52
- for (var pair of formData.entries()) {
53
- console.log(pair[0] + ', ' + pair[1])
54
- }
55
- console.log('---- entries ends ------>')
56
- }
57
-
58
- render(html` <ox-input-code name="input-a" @change=${onchange}></ox-input-code> `, form)
59
- </script>
60
- </body>
61
- </html>
package/demo/index-color-gradient.html DELETED
@@ -1,35 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
- </head>
12
- <body>
13
- <form id="demo"></form>
14
-
15
- <script type="module">
16
- import { html, render } from 'lit'
17
- import '../dist/src/ox-input-color-gradient.js'
18
-
19
- const form = document.querySelector('#demo')
20
- render(
21
- html`
22
- <ox-input-color-gradient
23
- name="color-gradient-solid"
24
- type="solid"
25
- @change=${e => {
26
- console.log(e.target.value)
27
- console.log('form value', new FormData(form).get('color-gradient-solid'))
28
- }}
29
- ></ox-input-color-gradient>
30
- `,
31
- form
32
- )
33
- </script>
34
- </body>
35
- </html>
package/demo/index-color-stops.html DELETED
@@ -1,62 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
- </head>
12
- <body>
13
- <form id="demo"></form>
14
-
15
- <script type="module">
16
- import { html, render } from 'lit'
17
- import '../dist/src/ox-input-color-stops.js'
18
-
19
- const value = [
20
- {
21
- position: 0,
22
- color: 'white'
23
- },
24
- {
25
- position: 0.5,
26
- color: 'green'
27
- },
28
- {
29
- position: 1,
30
- color: 'white'
31
- }
32
- ]
33
-
34
- const form = document.querySelector('#demo')
35
- render(
36
- html`
37
- <ox-input-color-stops
38
- name="color-stops-solid"
39
- type="solid"
40
- min="0"
41
- max="100"
42
- @change=${e => {
43
- console.log(e.target.value)
44
- console.log('form value', new FormData(form).get('color-stops-solid'))
45
- }}
46
- ></ox-input-color-stops>
47
-
48
- <ox-input-color-stops
49
- name="color-stops-gradient"
50
- .value=${value}
51
- type="gradient"
52
- @change=${e => {
53
- console.log(e.target.value)
54
- console.log('form value', new FormData(form).get('color-stops-gradient'))
55
- }}
56
- ></ox-input-color-stops>
57
- `,
58
- form
59
- )
60
- </script>
61
- </body>
62
- </html>
package/demo/index-color.html DELETED
@@ -1,35 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
- </head>
12
- <body>
13
- <form id="demo"></form>
14
-
15
- <script type="module">
16
- import { html, render } from 'lit'
17
- import '../dist/src/ox-input-color.js'
18
-
19
- const form = document.querySelector('#demo')
20
- render(
21
- html`
22
- <ox-input-color
23
- value="navy"
24
- name="color"
25
- @change=${e => {
26
- console.log(e.target.value)
27
- console.log('form value', new FormData(form).get('color'))
28
- }}
29
- ></ox-input-color>
30
- `,
31
- form
32
- )
33
- </script>
34
- </body>
35
- </html>
package/demo/index-crontab.html DELETED
@@ -1,37 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
- <script src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js" async></script>
12
- </head>
13
- <body>
14
- <form id="demo"></form>
15
-
16
- <script type="module">
17
- import { html, render } from 'lit'
18
- import '../dist/src/ox-input-crontab.js'
19
-
20
- const form = document.querySelector('#demo')
21
-
22
- render(
23
- html`
24
- <ox-input-crontab
25
- value="* * * * * *"
26
- name="crontab"
27
- @change=${e => {
28
- console.log(e.target.value)
29
- console.log('form value', new FormData(form).get('crontab'))
30
- }}
31
- ></ox-input-crontab>
32
- `,
33
- form
34
- )
35
- </script>
36
- </body>
37
- </html>
package/demo/index-file.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
-
10
- ox-input-file {
11
- max-width: 500px;
12
- max-height: 300px;
13
- }
14
- </style>
15
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
16
- </head>
17
- <body>
18
- <form id="demo"></form>
19
-
20
- <script type="module">
21
- import { html, render } from 'lit'
22
- import '../dist/src/ox-input-file.js'
23
-
24
- const form = document.querySelector('#demo')
25
- render(
26
- html`
27
- <ox-input-file
28
- .value=${['https://www.hatiolab.com/assets/img/arch-thingsboard.png']}
29
- name="file"
30
- multiple
31
- @change=${e => {
32
- console.log(e.target.value)
33
- console.log('form value', new FormData(form).get('file'))
34
- }}
35
- ></ox-input-file>
36
- `,
37
- form
38
- )
39
- </script>
40
- </body>
41
- </html>