@operato/input 1.0.0-alpha.9 → 1.0.0-beta.0
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 +395 -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-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-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-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":"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","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":"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","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,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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kDAAkD,CAAA;AACzD,OAAO,sCAAsC,CAAA;AAC7C,OAAO,gCAAgC,CAAA;AACvC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAqB7C,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,WAAW;IAArD;;QAgJ8B,UAAK,GAAmB;YAClD,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,CAAC;SACZ,CAAA;IA8JH,CAAC;aAjTQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6IlB,CAAA;IAQD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAwC,CAAA;QACxD,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,KAAK,CAAA;QAET,QAAQ,OAAO,CAAC,OAAO,EAAE;YACvB,KAAK,OAAO;gBACV,QAAQ,OAAO,CAAC,IAAI,EAAE;oBACpB,KAAK,UAAU;wBACb,KAAK,GAAI,OAA4B,CAAC,OAAO,CAAA;wBAC7C,MAAK;oBACP,KAAK,QAAQ;wBACX,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;wBACxD,MAAK;oBACP,KAAK,MAAM;wBACT,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;iBACtD;gBACD,MAAK;YAEP,KAAK,cAAc;gBACjB,KAAK,GAAI,OAAe,CAAC,MAAM,CAAA;gBAC/B,MAAK;YAEP,KAAK,eAAe;gBAClB,KAAK,GAAI,OAAe,CAAC,QAAQ,CAAA;gBACjC,MAAK;YAEP;gBACE,KAAK,GAAI,OAA4B,CAAC,KAAK,CAAA;gBAC3C,MAAK;SACR;QAED,IAAI,GAAG,KAAK,UAAU,EAAE;YACtB,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,KAAK;gBACb,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,SAAS;aACrB,CAAA;SACF;aAAM,IAAI,GAAG,KAAK,WAAW,EAAE;YAC9B,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG;oBACX,GAAG,IAAI,CAAC,KAAK;oBACb,SAAS,EAAE,KAAK;oBAChB,QAAQ,EAAE,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC;iBAClD,CAAA;aACF;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,KAAK;gBACb,CAAC,GAAG,CAAC,EAAE,KAAK;aACb,CAAA;SACF;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAA;QAC1D,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,OAAO,IAAI,CAAA;;wCAEyB,KAAK,CAAC,IAAI,IAAI,QAAQ;;;;;;oDAMV,KAAK,CAAC,QAAQ,IAAI,CAAC;;;;sEAID,QAAQ,IAAI,QAAQ,WAAW,KAAK,CAAC,SAAS;;gCAEpF,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;;;wBAIvC,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;sEAe+B,QAAQ,IAAI,QAAQ,WAAW,KAAK,CAAC,MAAM;;gCAEjF,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;;;wBAIvC,KAAK,CAAC,MAAM,IAAI,QAAQ;;;;;;;;;;;;4EAY4B,KAAK,CAAC,UAAU;KACvF,CAAA;IACH,CAAC;IAED,2BAA2B,CAAC,SAAiB;QAC3C,IAAI,QAAQ,CAAA;QACZ,QAAQ,SAAS,EAAE;YACjB,KAAK,wBAAwB;gBAC3B,QAAQ,GAAG,EAAE,CAAA;gBACb,MAAK;YACP,KAAK,eAAe;gBAClB,QAAQ,GAAG,EAAE,CAAA;gBACb,MAAK;YACP,KAAK,wBAAwB;gBAC3B,QAAQ,GAAG,GAAG,CAAA;gBACd,MAAK;YACP,KAAK,eAAe;gBAClB,QAAQ,GAAG,GAAG,CAAA;gBACd,MAAK;YACP,KAAK,wBAAwB;gBAC3B,QAAQ,GAAG,GAAG,CAAA;gBACd,MAAK;YACP,KAAK,eAAe;gBAClB,QAAQ,GAAG,GAAG,CAAA;gBACd,MAAK;YACP,KAAK,wBAAwB;gBAC3B,QAAQ,GAAG,GAAG,CAAA;gBACd,MAAK;YACP,KAAK,eAAe,CAAC;YACrB;gBACE,QAAQ,GAAG,CAAC,CAAA;gBACZ,MAAK;SACR;QAED,OAAO,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAA;IACvC,CAAC;CACF,CAAA;AAlK6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAI1B;AApJU,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAkThC;SAlTY,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-listbox/paper-listbox'\nimport '@polymer/paper-item/paper-item'\nimport './ox-input-angle.js'\nimport './ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops'\nimport { OxFormField } from './ox-form-field'\n\nexport type GradientOption = {\n type: 'linear' | 'radial'\n rotation: number\n direction?:\n | 'left-to-right'\n | 'lefttop-to-rightbottom'\n | 'top-to-bottom'\n | 'righttop-to-leftbottom'\n | 'right-to-left'\n | 'rightbottom-to-lefttop'\n | 'bottom-to-top'\n | 'leftbottom-to-righttop'\n | 'left-to-right'\n | 'center-to-corner'\n center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n static styles = css`\n :host {\n display: grid;\n\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n :host > label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n align-self: center;\n }\n\n :host > .icon-only-label {\n grid-column: span 1;\n }\n\n :host > input,\n :host > [editors] {\n grid-column: span 8;\n }\n\n :host > select {\n grid-column: span 4;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n :host > ox-input-angle {\n grid-column: span 3;\n }\n\n ox-input-color-stops {\n grid-column: span 10;\n }\n\n .host > input[type='checkbox'] {\n grid-column: 3 / 4;\n }\n\n .host > input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\n\n [gradient-direction] {\n overflow: hidden;\n max-width: 210px;\n }\n\n [gradient-direction] paper-item {\n background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n min-height: 32px;\n padding: 3px 5px;\n width: 30px;\n float: left;\n }\n\n [gradient-direction] [name='lefttop-to-rightbottom'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='left-top'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='top-to-bottom'] {\n background-position: 50% -46px;\n }\n\n [gradient-direction] [name='righttop-to-leftbottom'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-top'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-to-left'] {\n background-position: 50% -146px;\n }\n\n [gradient-direction] [name='rightbottom-to-lefttop'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='right-bottom'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='bottom-to-top'] {\n background-position: 50% -246px;\n }\n\n [gradient-direction] [name='leftbottom-to-righttop'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-bottom'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-to-right'] {\n background-position: 50% -346px;\n }\n\n [gradient-direction] [name='center-to-corner'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] [name='center'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] paper-item[focused] {\n background-color: rgba(255, 246, 143, 0.5);\n }\n\n .icon-only-label {\n top: 0 !important;\n width: 30px !important;\n height: 24px;\n background: url(/assets/images/icon-properties-label.png) no-repeat;\n }\n\n .icon-only-label.color {\n background-position: 70% -198px;\n }\n `\n\n @property({ type: Object }) value: GradientOption = {\n type: 'linear',\n direction: 'left-to-right',\n rotation: 0\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLElement & { type: string }\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value\n\n switch (element.tagName) {\n case 'INPUT':\n switch (element.type) {\n case 'checkbox':\n value = (element as HTMLInputElement).checked\n break\n case 'number':\n value = Number((element as HTMLInputElement).value) || 0\n break\n case 'text':\n value = String((element as HTMLInputElement).value)\n }\n break\n\n case 'PAPER-BUTTON':\n value = (element as any).active\n break\n\n case 'PAPER-LISTBOX':\n value = (element as any).selected\n break\n\n default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: value,\n direction: undefined\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value,\n rotation: this._convertDirectionToRotation(value)\n }\n }\n } else {\n this.value = {\n ...this.value,\n [key]: value\n }\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n render() {\n var selector = (this.value && this.value.type) || 'linear'\n var value = this.value || {}\n\n return html`\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${value.type || 'linear'}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label class=\"icon-only-label color\"></label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div editors>\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"direction\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.direction}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n <paper-item name=\"top-to-bottom\"></paper-item>\n <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n <paper-item name=\"right-to-left\"></paper-item>\n <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n <paper-item name=\"bottom-to-top\"></paper-item>\n <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n <paper-item name=\"left-to-right\"></paper-item>\n <paper-item name=\"center-to-corner\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"center\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.center || 'center'}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"center\"></paper-item>\n <paper-item name=\"left-top\"></paper-item>\n <paper-item name=\"right-top\"></paper-item>\n <paper-item name=\"right-bottom\"></paper-item>\n <paper-item name=\"left-bottom\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n </div>\n\n <ox-input-color-stops value-key=\"colorStops\" type=\"gradient\" .value=${value.colorStops}> </ox-input-color-stops>\n `\n }\n\n _convertDirectionToRotation(direction: string): number {\n var rotation\n switch (direction) {\n case 'lefttop-to-rightbottom':\n rotation = 45\n break\n case 'top-to-bottom':\n rotation = 90\n break\n case 'righttop-to-leftbottom':\n rotation = 135\n break\n case 'right-to-left':\n rotation = 180\n break\n case 'rightbottom-to-lefttop':\n rotation = 215\n break\n case 'bottom-to-top':\n rotation = 270\n break\n case 'leftbottom-to-righttop':\n rotation = 315\n break\n case 'left-to-right':\n default:\n rotation = 0\n break\n }\n\n return (rotation / 360) * Math.PI * 2\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-listbox/paper-listbox'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { OxFormField } from './ox-form-field.js'\n\nexport type GradientOption = {\n type: 'linear' | 'radial'\n rotation: number\n direction?:\n | 'left-to-right'\n | 'lefttop-to-rightbottom'\n | 'top-to-bottom'\n | 'righttop-to-leftbottom'\n | 'right-to-left'\n | 'rightbottom-to-lefttop'\n | 'bottom-to-top'\n | 'leftbottom-to-righttop'\n | 'left-to-right'\n | 'center-to-corner'\n center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n static styles = css`\n :host {\n display: grid;\n\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n :host > label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n align-self: center;\n }\n\n :host > .icon-only-label {\n grid-column: span 1;\n }\n\n :host > input,\n :host > [editors] {\n grid-column: span 8;\n }\n\n :host > select {\n grid-column: span 4;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n :host > ox-input-angle {\n grid-column: span 3;\n }\n\n ox-input-color-stops {\n grid-column: span 10;\n }\n\n .host > input[type='checkbox'] {\n grid-column: 3 / 4;\n }\n\n .host > input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\n\n [gradient-direction] {\n overflow: hidden;\n max-width: 210px;\n }\n\n [gradient-direction] paper-item {\n background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n min-height: 32px;\n padding: 3px 5px;\n width: 30px;\n float: left;\n }\n\n [gradient-direction] [name='lefttop-to-rightbottom'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='left-top'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='top-to-bottom'] {\n background-position: 50% -46px;\n }\n\n [gradient-direction] [name='righttop-to-leftbottom'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-top'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-to-left'] {\n background-position: 50% -146px;\n }\n\n [gradient-direction] [name='rightbottom-to-lefttop'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='right-bottom'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='bottom-to-top'] {\n background-position: 50% -246px;\n }\n\n [gradient-direction] [name='leftbottom-to-righttop'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-bottom'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-to-right'] {\n background-position: 50% -346px;\n }\n\n [gradient-direction] [name='center-to-corner'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] [name='center'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] paper-item[focused] {\n background-color: rgba(255, 246, 143, 0.5);\n }\n\n .icon-only-label {\n top: 0 !important;\n width: 30px !important;\n height: 24px;\n background: url(/assets/images/icon-properties-label.png) no-repeat;\n }\n\n .icon-only-label.color {\n background-position: 70% -198px;\n }\n `\n\n @property({ type: Object }) value: GradientOption = {\n type: 'linear',\n direction: 'left-to-right',\n rotation: 0\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLElement & { type: string }\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value\n\n switch (element.tagName) {\n case 'INPUT':\n switch (element.type) {\n case 'checkbox':\n value = (element as HTMLInputElement).checked\n break\n case 'number':\n value = Number((element as HTMLInputElement).value) || 0\n break\n case 'text':\n value = String((element as HTMLInputElement).value)\n }\n break\n\n case 'PAPER-BUTTON':\n value = (element as any).active\n break\n\n case 'PAPER-LISTBOX':\n value = (element as any).selected\n break\n\n default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: value,\n direction: undefined\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value,\n rotation: this._convertDirectionToRotation(value)\n }\n }\n } else {\n this.value = {\n ...this.value,\n [key]: value\n }\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n render() {\n var selector = (this.value && this.value.type) || 'linear'\n var value = this.value || {}\n\n return html`\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${value.type || 'linear'}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label class=\"icon-only-label color\"></label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div editors>\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"direction\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.direction}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n <paper-item name=\"top-to-bottom\"></paper-item>\n <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n <paper-item name=\"right-to-left\"></paper-item>\n <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n <paper-item name=\"bottom-to-top\"></paper-item>\n <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n <paper-item name=\"left-to-right\"></paper-item>\n <paper-item name=\"center-to-corner\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"center\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.center || 'center'}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"center\"></paper-item>\n <paper-item name=\"left-top\"></paper-item>\n <paper-item name=\"right-top\"></paper-item>\n <paper-item name=\"right-bottom\"></paper-item>\n <paper-item name=\"left-bottom\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n </div>\n\n <ox-input-color-stops value-key=\"colorStops\" type=\"gradient\" .value=${value.colorStops}> </ox-input-color-stops>\n `\n }\n\n _convertDirectionToRotation(direction: string): number {\n var rotation\n switch (direction) {\n case 'lefttop-to-rightbottom':\n rotation = 45\n break\n case 'top-to-bottom':\n rotation = 90\n break\n case 'righttop-to-leftbottom':\n rotation = 135\n break\n case 'right-to-left':\n rotation = 180\n break\n case 'rightbottom-to-lefttop':\n rotation = 215\n break\n case 'bottom-to-top':\n rotation = 270\n break\n case 'leftbottom-to-righttop':\n rotation = 315\n break\n case 'left-to-right':\n default:\n rotation = 0\n break\n }\n\n return (rotation / 360) * Math.PI * 2\n }\n}\n"]}
|