@operato/input 1.0.0-alpha.9 → 1.0.0-beta.2
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.
- package/CHANGELOG.md +412 -0
- package/assets/images/icon-properties-line-type.png +0 -0
- package/assets/images/icon-properties-table.png +0 -0
- package/demo/index-crontab.html +37 -0
- package/demo/index-partition-keys.html +71 -0
- package/demo/index-select.html +21 -14
- package/demo/index-table.html +39 -0
- package/demo/index-value-map.html +80 -0
- package/demo/index-value-ranges.html +80 -0
- package/demo/index-work-shift.html +59 -0
- package/demo/index.html +10 -0
- package/dist/src/index.d.ts +9 -3
- package/dist/src/index.js +9 -3
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +1 -1
- package/dist/src/ox-checkbox.js +1 -1
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-form-field.d.ts +2 -2
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-barcode.d.ts +1 -1
- package/dist/src/ox-input-barcode.js +1 -1
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +1 -1
- package/dist/src/ox-input-code.js +12 -7
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color-gradient.d.ts +4 -4
- package/dist/src/ox-input-color-gradient.js +3 -3
- package/dist/src/ox-input-color-gradient.js.map +1 -1
- package/dist/src/ox-input-color-stops.js +1 -1
- package/dist/src/ox-input-color-stops.js.map +1 -1
- package/dist/src/ox-input-crontab.d.ts +23 -0
- package/dist/src/ox-input-crontab.js +560 -0
- package/dist/src/ox-input-crontab.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js +57 -0
- package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.d.ts +4 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js +63 -0
- package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -0
- package/dist/src/ox-input-layout/ox-input-layout.d.ts +5 -0
- package/dist/src/ox-input-layout/ox-input-layout.js +73 -0
- package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -0
- package/dist/src/ox-input-multiple-colors.d.ts +2 -2
- package/dist/src/ox-input-multiple-colors.js +2 -2
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.d.ts +36 -0
- package/dist/src/ox-input-partition-keys.js +204 -0
- package/dist/src/ox-input-partition-keys.js.map +1 -0
- package/dist/src/ox-input-search.d.ts +1 -0
- package/dist/src/ox-input-search.js +7 -1
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-table.d.ts +8 -0
- package/dist/src/ox-input-table.js +379 -0
- package/dist/src/ox-input-table.js.map +1 -0
- package/dist/src/ox-input-value-map.d.ts +41 -0
- package/dist/src/ox-input-value-map.js +279 -0
- package/dist/src/ox-input-value-map.js.map +1 -0
- package/dist/src/ox-input-value-ranges.d.ts +41 -0
- package/dist/src/ox-input-value-ranges.js +298 -0
- package/dist/src/ox-input-value-ranges.js.map +1 -0
- package/dist/src/ox-input-work-shift.d.ts +33 -0
- package/dist/src/ox-input-work-shift.js +229 -0
- package/dist/src/ox-input-work-shift.js.map +1 -0
- package/dist/src/ox-select.d.ts +3 -0
- package/dist/src/ox-select.js +28 -3
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -8
- package/src/index.ts +9 -3
- package/src/ox-checkbox.ts +2 -2
- package/src/ox-form-field.ts +2 -2
- package/src/ox-input-barcode.ts +2 -3
- package/src/ox-input-code.ts +14 -8
- package/src/{ox-input-color-gradient.ts.xxx → ox-input-color-gradient.ts} +4 -4
- package/src/ox-input-color-stops.ts +1 -1
- package/src/ox-input-crontab.ts +561 -0
- package/src/ox-input-layout/ox-input-card-layout.ts +58 -0
- package/src/ox-input-layout/ox-input-grid-layout.ts +64 -0
- package/src/ox-input-layout/ox-input-layout.ts +77 -0
- package/src/ox-input-multiple-colors.ts +2 -2
- package/src/ox-input-options.ts +1 -1
- package/src/ox-input-partition-keys.ts +243 -0
- package/src/ox-input-search.ts +9 -1
- package/src/ox-input-table.ts +404 -0
- package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts} +120 -89
- package/src/ox-input-value-ranges.ts +325 -0
- package/src/ox-input-work-shift.ts +251 -0
- package/src/ox-select.ts +31 -5
- package/dist/src/ox-input-background-pattern.d.ts +0 -31
- package/dist/src/ox-input-background-pattern.js +0 -147
- package/dist/src/ox-input-background-pattern.js.map +0 -1
- package/dist/src/ox-input-fill-style.d.ts +0 -42
- package/dist/src/ox-input-fill-style.js +0 -323
- package/dist/src/ox-input-fill-style.js.map +0 -1
- package/dist/src/ox-input-id.d.ts +0 -11
- package/dist/src/ox-input-id.js +0 -68
- package/dist/src/ox-input-id.js.map +0 -1
- package/src/ox-input-background-pattern.ts.xxx +0 -163
- package/src/ox-input-fill-style.ts.xxx +0 -361
- package/src/ox-input-ranges.ts.ing +0 -292
|
@@ -0,0 +1,80 @@
|
|
|
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-value-map.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value1 = {
|
|
21
|
+
A: 'A',
|
|
22
|
+
B: 'B',
|
|
23
|
+
C: 'C',
|
|
24
|
+
default: 'B'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const value2 = {
|
|
28
|
+
A: true,
|
|
29
|
+
B: false,
|
|
30
|
+
C: true,
|
|
31
|
+
default: true
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const value3 = {
|
|
35
|
+
A: 'red',
|
|
36
|
+
B: 'yellow',
|
|
37
|
+
C: 'blue',
|
|
38
|
+
default: 'yellow'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render(
|
|
42
|
+
html`
|
|
43
|
+
<ox-input-value-map
|
|
44
|
+
name="value-map1"
|
|
45
|
+
valuetype="string"
|
|
46
|
+
keytype="string"
|
|
47
|
+
.value=${value1}
|
|
48
|
+
@change=${e => {
|
|
49
|
+
console.log(e.target.value)
|
|
50
|
+
console.log('form value', new FormData(form).get('value-map1'))
|
|
51
|
+
}}
|
|
52
|
+
></ox-input-value-map>
|
|
53
|
+
|
|
54
|
+
<ox-input-value-map
|
|
55
|
+
name="value-map2"
|
|
56
|
+
valuetype="boolean"
|
|
57
|
+
keytype="string"
|
|
58
|
+
.value=${value2}
|
|
59
|
+
@change=${e => {
|
|
60
|
+
console.log(e.target.value)
|
|
61
|
+
console.log('form value', new FormData(form).get('value-map2'))
|
|
62
|
+
}}
|
|
63
|
+
></ox-input-value-map>
|
|
64
|
+
|
|
65
|
+
<ox-input-value-map
|
|
66
|
+
name="value-map3"
|
|
67
|
+
valuetype="color"
|
|
68
|
+
keytype="string"
|
|
69
|
+
.value=${value3}
|
|
70
|
+
@change=${e => {
|
|
71
|
+
console.log(e.target.value)
|
|
72
|
+
console.log('form value', new FormData(form).get('value-map3'))
|
|
73
|
+
}}
|
|
74
|
+
></ox-input-value-map>
|
|
75
|
+
`,
|
|
76
|
+
form
|
|
77
|
+
)
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
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-value-ranges.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value1 = {
|
|
21
|
+
'0~20': 'A',
|
|
22
|
+
'20~50': 'B',
|
|
23
|
+
'50~100': 'C',
|
|
24
|
+
default: 'B'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const value2 = {
|
|
28
|
+
'0~20': true,
|
|
29
|
+
'20~50': false,
|
|
30
|
+
'50~100': true,
|
|
31
|
+
default: true
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const value3 = {
|
|
35
|
+
'0~20': 'red',
|
|
36
|
+
'20~50': 'yellow',
|
|
37
|
+
'50~100': 'blue',
|
|
38
|
+
default: 'yellow'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render(
|
|
42
|
+
html`
|
|
43
|
+
<ox-input-value-ranges
|
|
44
|
+
name="value-ranges1"
|
|
45
|
+
valuetype="string"
|
|
46
|
+
rangetype="number"
|
|
47
|
+
.value=${value1}
|
|
48
|
+
@change=${e => {
|
|
49
|
+
console.log(e.target.value)
|
|
50
|
+
console.log('form value', new FormData(form).get('value-ranges1'))
|
|
51
|
+
}}
|
|
52
|
+
></ox-input-value-ranges>
|
|
53
|
+
|
|
54
|
+
<ox-input-value-ranges
|
|
55
|
+
name="value-ranges2"
|
|
56
|
+
valuetype="boolean"
|
|
57
|
+
rangetype="number"
|
|
58
|
+
.value=${value2}
|
|
59
|
+
@change=${e => {
|
|
60
|
+
console.log(e.target.value)
|
|
61
|
+
console.log('form value', new FormData(form).get('value-ranges2'))
|
|
62
|
+
}}
|
|
63
|
+
></ox-input-value-ranges>
|
|
64
|
+
|
|
65
|
+
<ox-input-value-ranges
|
|
66
|
+
name="value-ranges3"
|
|
67
|
+
valuetype="color"
|
|
68
|
+
rangetype="number"
|
|
69
|
+
.value=${value3}
|
|
70
|
+
@change=${e => {
|
|
71
|
+
console.log(e.target.value)
|
|
72
|
+
console.log('form value', new FormData(form).get('value-ranges3'))
|
|
73
|
+
}}
|
|
74
|
+
></ox-input-value-ranges>
|
|
75
|
+
`,
|
|
76
|
+
form
|
|
77
|
+
)
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
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-work-shift.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value = [
|
|
21
|
+
{
|
|
22
|
+
name: 'DAY',
|
|
23
|
+
fromDate: -1,
|
|
24
|
+
fromTime: '22:00',
|
|
25
|
+
toDate: 0,
|
|
26
|
+
toTime: '06:00'
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: 'SWING',
|
|
30
|
+
fromDate: 0,
|
|
31
|
+
fromTime: '06:00',
|
|
32
|
+
toDate: 0,
|
|
33
|
+
toTime: '14:00'
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: 'NIGHT',
|
|
37
|
+
fromDate: 0,
|
|
38
|
+
fromTime: '14:00',
|
|
39
|
+
toDate: 0,
|
|
40
|
+
toTime: '22:00'
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
|
|
44
|
+
render(
|
|
45
|
+
html`
|
|
46
|
+
<ox-input-work-shift
|
|
47
|
+
name="work-shift"
|
|
48
|
+
rangetype="number"
|
|
49
|
+
.value=${value}
|
|
50
|
+
@change=${e => {
|
|
51
|
+
console.log(e.target.value)
|
|
52
|
+
}}
|
|
53
|
+
></ox-input-work-shift>
|
|
54
|
+
`,
|
|
55
|
+
form
|
|
56
|
+
)
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -6,11 +6,16 @@
|
|
|
6
6
|
body {
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
|
+
|
|
10
|
+
a {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
9
13
|
</style>
|
|
10
14
|
</head>
|
|
11
15
|
<body>
|
|
12
16
|
<a href="./index-3dish.html">3dish</a>
|
|
13
17
|
<a href="./index-options.html">options</a>
|
|
18
|
+
<a href="./index-table.html">table</a>
|
|
14
19
|
<a href="./index-angle.html">angle</a>
|
|
15
20
|
<a href="./index-color.html">color</a>
|
|
16
21
|
<a href="./index-multiple-colors.html">multiple-colors</a>
|
|
@@ -25,5 +30,10 @@
|
|
|
25
30
|
<a href="./index-range.html">range</a>
|
|
26
31
|
<a href="./index-select.html">select</a>
|
|
27
32
|
<a href="./index-stack.html">stack</a>
|
|
33
|
+
<a href="./index-value-map.html">value-map</a>
|
|
34
|
+
<a href="./index-value-ranges.html">value-ranges</a>
|
|
35
|
+
<a href="./index-crontab.html">crontab</a>
|
|
36
|
+
<a href="./index-partition-keys.html">partition-keys</a>
|
|
37
|
+
<a href="./index-work-shift.html">work-shift</a>
|
|
28
38
|
</body>
|
|
29
39
|
</html>
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
2
5
|
export * from './ox-input-angle.js';
|
|
3
6
|
export * from './ox-input-3dish.js';
|
|
4
7
|
export * from './ox-input-stack.js';
|
|
5
8
|
export * from './ox-input-barcode.js';
|
|
6
|
-
export * from './ox-buttons-radio.js';
|
|
7
|
-
export * from './ox-checkbox.js';
|
|
8
|
-
export * from './ox-select.js';
|
|
9
9
|
export * from './ox-input-code.js';
|
|
10
10
|
export * from './ox-input-color.js';
|
|
11
11
|
export * from './ox-input-multiple-colors.js';
|
|
12
12
|
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
13
14
|
export * from './ox-input-file.js';
|
|
14
15
|
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
15
19
|
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
package/dist/src/index.js
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
export * from './ox-form-field.js';
|
|
2
|
+
export * from './ox-buttons-radio.js';
|
|
3
|
+
export * from './ox-checkbox.js';
|
|
4
|
+
export * from './ox-select.js';
|
|
2
5
|
export * from './ox-input-angle.js';
|
|
3
6
|
export * from './ox-input-3dish.js';
|
|
4
7
|
export * from './ox-input-stack.js';
|
|
5
8
|
export * from './ox-input-barcode.js';
|
|
6
|
-
export * from './ox-buttons-radio.js';
|
|
7
|
-
export * from './ox-checkbox.js';
|
|
8
|
-
export * from './ox-select.js';
|
|
9
9
|
export * from './ox-input-code.js';
|
|
10
10
|
export * from './ox-input-color.js';
|
|
11
11
|
export * from './ox-input-multiple-colors.js';
|
|
12
12
|
export * from './ox-input-color-stops.js';
|
|
13
|
+
export * from './ox-input-color-gradient.js';
|
|
13
14
|
export * from './ox-input-file.js';
|
|
14
15
|
export * from './ox-input-image.js';
|
|
16
|
+
export * from './ox-input-value-ranges.js';
|
|
17
|
+
export * from './ox-input-value-map.js';
|
|
18
|
+
export * from './ox-input-table.js';
|
|
15
19
|
export * from './ox-input-scene-component-id.js';
|
|
20
|
+
export * from './ox-input-crontab';
|
|
21
|
+
export * from './ox-input-partition-keys';
|
|
16
22
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\nexport * from './ox-input-partition-keys'\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OxFormField } from './ox-form-field';
|
|
2
2
|
export declare class OxCheckbox extends OxFormField {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
|
-
checked: boolean;
|
|
4
|
+
checked: boolean | undefined;
|
|
5
5
|
disabled: boolean;
|
|
6
6
|
indeterminatable: boolean;
|
|
7
7
|
indeterminate: boolean;
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n [checkbox] {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n background-color: var(--ox-checkbox-background-color, #fff);\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n a {\n background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n :host([checked]) a {\n background-color: var(--ox-checkbox-checked-background-color, #fff);\n border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n }\n\n path {\n fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, #38a25b);\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n [label] {\n margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n color: var(--ox-checkbox-label-color, #3a5877);\n }\n\n :host([checked]) [label] {\n font-weight: var(--ox-checkbox-checked-font-weight, bold);\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -2,8 +2,8 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
export declare abstract class OxFormField extends LitElement {
|
|
3
3
|
name?: string;
|
|
4
4
|
value?: any;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
protected _form: HTMLFormElement | null;
|
|
6
|
+
protected _formdataEventHandler: EventListener | null;
|
|
7
7
|
connectedCallback(): void;
|
|
8
8
|
disconnectedCallback(): void;
|
|
9
9
|
protected appendFormData({ formData }: FormDataEvent): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;
|
|
1
|
+
{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE;YAC9B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SACtB;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA3C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC9C;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n @property({ type: String, attribute: true }) name?: string\n @property() value?: any\n\n protected _form: HTMLFormElement | null = null\n protected _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [this.value]\n }\n\n values.forEach((value: any) => {\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n })\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@operato/popup/ox-popup.js';
|
|
2
|
-
import { OxPopup } from '@operato/popup';
|
|
3
2
|
import { BrowserMultiFormatReader } from '@zxing/library';
|
|
4
3
|
import { OxFormField } from './ox-form-field.js';
|
|
4
|
+
import { OxPopup } from '@operato/popup';
|
|
5
5
|
export declare class OxInputBarcode extends OxFormField {
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
7
|
scannable?: boolean;
|
|
@@ -144,7 +144,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
|
|
|
144
144
|
input.focus();
|
|
145
145
|
this.value = input.value = String(result);
|
|
146
146
|
if (!this.withoutEnter) {
|
|
147
|
-
input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
|
|
147
|
+
input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }));
|
|
148
148
|
input.dispatchEvent(new CustomEvent('change', {
|
|
149
149
|
bubbles: true,
|
|
150
150
|
composed: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,WAAW,GAAG,o6CAAo6C,CAAA;AAGx7C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;aACtC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,CAAA;IAaD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QAEtB,IAAI,SAAS,CAAC,YAAY,EAAE;YAC1B,CAAC;YAAA,CAAC,KAAK,IAAI,EAAE;gBACX,IAAI;oBACF,IAAI,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAC,CAAA;oBAChG,IAAI,MAAM,EAAE;wBACV,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;wBACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;qBACtB;iBACF;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;iBACnE;YACH,CAAC,CAAC,EAAE,CAAA;SACL;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,WAAW,GAAG,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK,IAAI,EAAE;;kBAEf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;oBAC5B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;;kBAGhC,CAAC,IAAI,CAAC,SAAS;;iBAEhB,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;;;;oBAIW,GAAG,EAAE;YACf,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;;;;KAIJ,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,KAAK,CAAA;QAClD,YAAY;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAa;QACtB,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAEnB,uDAAuD;YACvD,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,WAAW,GAAG,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAA,CAAC,2BAA2B;YACtF,IAAI,CAAC,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;YAEpE,IAAI,CAAC,MAAM,GAAG,IAAI,wBAAwB,EAAE,CAAA;YAC5C,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,sBAAsB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACzF,IAAI,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC5E,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBACtB,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBAEzC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;oBACtB,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;oBACrE,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,IAAI,CAAC,KAAK;qBACnB,CAAC,CACH,CAAA;iBACF;aACF;iBAAM;gBACL,4EAA4E;gBAC5E,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;SACF;QAAC,OAAO,GAAG,EAAE;YACZ;;;eAGG;YACH,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;SAClB;gBAAS;YACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;YAElB,IAAI,CAAC,QAAQ,EAAE,CAAA;SAChB;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAElB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;QACrE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;QAElC,OAAO,IAAI,CAAC,MAAM,CAAA;QAClB,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;CACF,CAAA;AA5H8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AACS;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuB;AAEzC;IAAR,KAAK,EAAE;8CAAqB;AACpB;IAAR,KAAK,EAAE;8CAAkC;AAE1B;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AACrB;IAAlB,KAAK,CAAC,UAAU,CAAC;6CAAgB;AAClB;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AAhF7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAmM1B;SAnMY,cAAc","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,MAAM,WAAW,GAAG,o6CAAo6C,CAAA;AAGx7C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;aACtC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,CAAA;IAaD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QAEtB,IAAI,SAAS,CAAC,YAAY,EAAE;YAC1B,CAAC;YAAA,CAAC,KAAK,IAAI,EAAE;gBACX,IAAI;oBACF,IAAI,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAC,CAAA;oBAChG,IAAI,MAAM,EAAE;wBACV,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;wBACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;qBACtB;iBACF;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;iBACnE;YACH,CAAC,CAAC,EAAE,CAAA;SACL;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,WAAW,GAAG,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK,IAAI,EAAE;;kBAEf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;oBAC5B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;;kBAGhC,CAAC,IAAI,CAAC,SAAS;;iBAEhB,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;;;;oBAIW,GAAG,EAAE;YACf,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;;;;KAIJ,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,KAAK,CAAA;QAClD,YAAY;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAa;QACtB,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAEnB,uDAAuD;YACvD,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,WAAW,GAAG,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAA,CAAC,2BAA2B;YACtF,IAAI,CAAC,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;YAEpE,IAAI,CAAC,MAAM,GAAG,IAAI,wBAAwB,EAAE,CAAA;YAC5C,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,sBAAsB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACzF,IAAI,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC5E,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBACtB,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBAEzC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;oBACtB,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACnF,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,IAAI,CAAC,KAAK;qBACnB,CAAC,CACH,CAAA;iBACF;aACF;iBAAM;gBACL,4EAA4E;gBAC5E,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;SACF;QAAC,OAAO,GAAG,EAAE;YACZ;;;eAGG;YACH,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;SAClB;gBAAS;YACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;YAElB,IAAI,CAAC,QAAQ,EAAE,CAAA;SAChB;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAElB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;QACrE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;QAElC,OAAO,IAAI,CAAC,MAAM,CAAA;QAClB,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;CACF,CAAA;AA5H8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AACS;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuB;AAEzC;IAAR,KAAK,EAAE;8CAAqB;AACpB;IAAR,KAAK,EAAE;8CAAkC;AAE1B;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AACrB;IAAlB,KAAK,CAAC,UAAU,CAAC;6CAAgB;AAClB;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AAhF7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAmM1B;SAnMY,cAAc","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { BrowserMultiFormatReader } from '@zxing/library'\nimport { OxFormField } from './ox-form-field.js'\nimport { OxPopup } from '@operato/popup'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
|
|
@@ -5,8 +5,8 @@ import 'codemirror/mode/javascript/javascript';
|
|
|
5
5
|
import 'codemirror/mode/python/python';
|
|
6
6
|
import 'codemirror/addon/display/fullscreen';
|
|
7
7
|
import 'codemirror/addon/display/autorefresh';
|
|
8
|
-
import { PropertyValues } from 'lit';
|
|
9
8
|
import CodeMirror from 'codemirror';
|
|
9
|
+
import { PropertyValues } from 'lit';
|
|
10
10
|
import { OxFormField } from './ox-form-field';
|
|
11
11
|
/**
|
|
12
12
|
WEB Component for code-mirror code editor.
|
|
@@ -6,14 +6,14 @@ import 'codemirror/mode/javascript/javascript';
|
|
|
6
6
|
import 'codemirror/mode/python/python';
|
|
7
7
|
import 'codemirror/addon/display/fullscreen';
|
|
8
8
|
import 'codemirror/addon/display/autorefresh';
|
|
9
|
-
import { css, html, unsafeCSS } from 'lit';
|
|
10
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
11
|
-
import CodeMirror from 'codemirror';
|
|
12
|
-
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
13
9
|
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
10
|
+
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
14
11
|
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
15
|
-
import
|
|
12
|
+
import CodeMirror from 'codemirror';
|
|
13
|
+
import { css, html, unsafeCSS } from 'lit';
|
|
14
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
16
15
|
import { ScrollbarStyles } from '@operato/styles';
|
|
16
|
+
import { OxFormField } from './ox-form-field';
|
|
17
17
|
/**
|
|
18
18
|
WEB Component for code-mirror code editor.
|
|
19
19
|
|
|
@@ -45,10 +45,15 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
45
45
|
`,
|
|
46
46
|
css `
|
|
47
47
|
:host {
|
|
48
|
-
display:
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
49
50
|
position: relative;
|
|
50
51
|
}
|
|
51
52
|
|
|
53
|
+
.CodeMirror {
|
|
54
|
+
flex: 1;
|
|
55
|
+
}
|
|
56
|
+
|
|
52
57
|
textarea {
|
|
53
58
|
display: block;
|
|
54
59
|
height: 100%;
|
|
@@ -116,7 +121,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
116
121
|
if (!this._changed)
|
|
117
122
|
return;
|
|
118
123
|
this.value = e.getValue();
|
|
119
|
-
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
124
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
|
120
125
|
});
|
|
121
126
|
this._editor.on('change', async (e) => {
|
|
122
127
|
this._self_changing = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uCAAuC,CAAA;AAC9C,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAE7C,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/mode/javascript/javascript'\nimport 'codemirror/mode/python/python'\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\n\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport CodeMirror from 'codemirror'\nimport { css, html, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n `,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n .CodeMirror {\n flex: 1;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: String }) mode?: string\n @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n private _outside_changing: boolean = false\n private _self_changing: boolean = false\n private _editor: CodeMirror.EditorFromTextArea | null | undefined = null\n private _changed: boolean = false\n\n // private lint: any\n // private hintOptions: any\n\n updated(changes: PropertyValues<this>) {\n this._outside_changing = true\n if (changes.has('value') && this.editor && !this._self_changing) {\n this.editor?.setValue(this.value === undefined ? '' : String(this.value))\n this.editor?.refresh()\n }\n this._outside_changing = false\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n get editor() {\n if (!this._editor) {\n let textarea = this.renderRoot.querySelector('textarea')\n let mode = this.mode || 'javascript'\n let tabSize = Number(this.tabSize) || 2\n let indentUnit = tabSize\n // let lint = this.lint\n // let hintOptions = this.hintOptions\n let tabAsSpace = this.tabAsSpace\n\n if (textarea) {\n this._editor = CodeMirror.fromTextArea(textarea, {\n value: this.value,\n mode,\n // lint,\n // hintOptions,\n tabSize,\n indentUnit,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621\n Tab: tabAsSpace\n ? function (cm: CodeMirror.Editor) {\n cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))\n }\n : false\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', e => {\n if (!this._changed) return\n\n this.value = e.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n this._editor.on('change', async e => {\n this._self_changing = true\n\n this._changed = true\n\n await this.updateComplete\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -5,10 +5,10 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
5
5
|
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
|
|
6
6
|
import '@polymer/paper-listbox/paper-listbox';
|
|
7
7
|
import '@polymer/paper-item/paper-item';
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
10
|
-
import { ColorStop } from './ox-input-color-stops';
|
|
11
|
-
import { OxFormField } from './ox-form-field';
|
|
8
|
+
import '@operato/input/ox-input-angle.js';
|
|
9
|
+
import '@operato/input/ox-input-color-stops.js';
|
|
10
|
+
import { ColorStop } from './ox-input-color-stops.js';
|
|
11
|
+
import { OxFormField } from './ox-form-field.js';
|
|
12
12
|
export declare type GradientOption = {
|
|
13
13
|
type: 'linear' | 'radial';
|
|
14
14
|
rotation: number;
|
|
@@ -6,11 +6,11 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
6
6
|
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
|
|
7
7
|
import '@polymer/paper-listbox/paper-listbox';
|
|
8
8
|
import '@polymer/paper-item/paper-item';
|
|
9
|
-
import '
|
|
10
|
-
import '
|
|
9
|
+
import '@operato/input/ox-input-angle.js';
|
|
10
|
+
import '@operato/input/ox-input-color-stops.js';
|
|
11
11
|
import { css, html } from 'lit';
|
|
12
12
|
import { customElement, property } from 'lit/decorators.js';
|
|
13
|
-
import { OxFormField } from './ox-form-field';
|
|
13
|
+
import { OxFormField } from './ox-form-field.js';
|
|
14
14
|
let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|