@operato/input 0.3.4 → 0.3.13
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 +74 -0
- package/demo/index-select.html +17 -17
- package/demo/index.html +83 -29
- package/dist/src/ox-buttons-radio.d.ts +0 -1
- package/dist/src/ox-buttons-radio.js +0 -3
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +1 -0
- package/dist/src/ox-checkbox.js +4 -0
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-form-field.d.ts +1 -1
- package/dist/src/ox-form-field.js +10 -2
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-3dish.d.ts +0 -1
- package/dist/src/ox-input-3dish.js +0 -3
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-id.d.ts +11 -0
- package/dist/src/ox-input-id.js +68 -0
- package/dist/src/ox-input-id.js.map +1 -0
- package/dist/src/ox-input-stack.d.ts +0 -1
- package/dist/src/ox-input-stack.js +0 -3
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.d.ts +0 -1
- package/dist/src/ox-select.js +5 -6
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/ox-buttons-radio.ts +0 -4
- package/src/ox-checkbox.ts +1 -0
- package/src/ox-form-field.ts +14 -2
- package/src/ox-input-3dish.ts +0 -4
- package/src/ox-input-id.ts +68 -0
- package/src/ox-input-ranges.ts.ing +1 -1
- package/src/ox-input-stack.ts +0 -4
- package/src/ox-select.ts +6 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,80 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [0.3.13](https://github.com/hatiolab/operato/compare/v0.3.12...v0.3.13) (2022-01-15)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [0.3.12](https://github.com/hatiolab/operato/compare/v0.3.11...v0.3.12) (2022-01-15)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/input
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### [0.3.11](https://github.com/hatiolab/operato/compare/v0.3.10...v0.3.11) (2022-01-15)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @operato/input
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### [0.3.10](https://github.com/hatiolab/operato/compare/v0.3.9...v0.3.10) (2022-01-15)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @operato/input
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### [0.3.9](https://github.com/hatiolab/operato/compare/v0.3.8...v0.3.9) (2022-01-15)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @operato/input
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
### [0.3.8](https://github.com/hatiolab/operato/compare/v0.3.7...v0.3.8) (2022-01-14)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
### :bug: Bug Fix
|
|
50
|
+
|
|
51
|
+
* ox-popup-list ([1e5af96](https://github.com/hatiolab/operato/commit/1e5af96cbd959ffbe7e4b8bf041971bb4e88dd0a))
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### [0.3.7](https://github.com/hatiolab/operato/compare/v0.3.6...v0.3.7) (2022-01-09)
|
|
56
|
+
|
|
57
|
+
**Note:** Version bump only for package @operato/input
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
### [0.3.6](https://github.com/hatiolab/operato/compare/v0.3.5...v0.3.6) (2022-01-09)
|
|
64
|
+
|
|
65
|
+
**Note:** Version bump only for package @operato/input
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
### [0.3.5](https://github.com/hatiolab/operato/compare/v0.3.4...v0.3.5) (2022-01-09)
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
### :rocket: New Features
|
|
75
|
+
|
|
76
|
+
* data-grist filter-form support queryFilters property ([e477ede](https://github.com/hatiolab/operato/commit/e477ede184dac7bc6c40d4aab73c2f8156edaef6))
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
6
80
|
### [0.3.4](https://github.com/hatiolab/operato/compare/v0.3.3...v0.3.4) (2022-01-03)
|
|
7
81
|
|
|
8
82
|
**Note:** Version bump only for package @operato/input
|
package/demo/index-select.html
CHANGED
|
@@ -58,38 +58,38 @@
|
|
|
58
58
|
render(
|
|
59
59
|
html`
|
|
60
60
|
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
61
|
-
<ox-popup-list>
|
|
62
|
-
<div option value="A"
|
|
63
|
-
<div option value="B"
|
|
64
|
-
<div option value="C"
|
|
65
|
-
<div option value="TOO LONG VALUE"
|
|
61
|
+
<ox-popup-list align-left nowrap>
|
|
62
|
+
<div option value="A">A</div>
|
|
63
|
+
<div option value="B">B</div>
|
|
64
|
+
<div option value="C">C</div>
|
|
65
|
+
<div option value="TOO LONG VALUE">TOO LONG VALUE</div>
|
|
66
66
|
</ox-popup-list>
|
|
67
67
|
</ox-select>
|
|
68
68
|
|
|
69
69
|
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select">
|
|
70
70
|
<ox-popup-list multiple>
|
|
71
|
-
<div option value="A"
|
|
72
|
-
<div option value="B"
|
|
73
|
-
<div option value="C"
|
|
71
|
+
<div option value="A">A</div>
|
|
72
|
+
<div option value="B">B</div>
|
|
73
|
+
<div option value="C">C</div>
|
|
74
74
|
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
75
75
|
</ox-popup-list>
|
|
76
76
|
</ox-select>
|
|
77
77
|
|
|
78
78
|
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox">
|
|
79
|
-
<ox-popup-list attr-selected="checked" multiple>
|
|
79
|
+
<ox-popup-list attr-selected="checked" multiple with-search>
|
|
80
80
|
<ox-checkbox option @change=${e => {
|
|
81
81
|
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
82
82
|
console.log(options)
|
|
83
83
|
options.forEach(option => (option.checked = e.target.checked))
|
|
84
84
|
}}>set all</ox-checkbox>
|
|
85
|
-
<ox-checkbox option value="A"
|
|
86
|
-
<ox-checkbox option value="B"
|
|
87
|
-
<ox-checkbox option value="C"
|
|
88
|
-
<ox-checkbox option value="D"
|
|
89
|
-
<ox-checkbox option value="E"
|
|
90
|
-
<ox-checkbox option value="F"
|
|
91
|
-
<ox-checkbox option value="G"
|
|
92
|
-
<ox-checkbox option value="TOO LONG VALUE"
|
|
85
|
+
<ox-checkbox option value="A">A</ox-checkbox>
|
|
86
|
+
<ox-checkbox option value="B">B</ox-checkbox>
|
|
87
|
+
<ox-checkbox option value="C"checked >C</ox-checkbox>
|
|
88
|
+
<ox-checkbox option value="D">D</ox-checkbox>
|
|
89
|
+
<ox-checkbox option value="E">E</ox-checkbox>
|
|
90
|
+
<ox-checkbox option value="F">F</ox-checkbox>
|
|
91
|
+
<ox-checkbox option value="G">G</ox-checkbox>
|
|
92
|
+
<ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
|
|
93
93
|
</ox-popup-list>
|
|
94
94
|
</ox-select>
|
|
95
95
|
|
package/demo/index.html
CHANGED
|
@@ -7,56 +7,110 @@
|
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
15
|
-
--ox-checkbox-size: 15px;
|
|
16
|
-
--ox-checkbox-background-color: var(--theme-white-color, #fff);
|
|
17
|
-
--ox-checkbox-label-color: var(--primary-text-color, #3a5877);
|
|
18
|
-
--ox-checkbox-label-margin: 0 0 0 7px;
|
|
19
|
-
|
|
20
|
-
/* checkbox checked */
|
|
21
|
-
--ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
|
|
22
|
-
--ox-checkbox-checked-color: var(--primary-color, #38a25b);
|
|
23
|
-
--ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
|
|
24
|
-
--ox-checkbox-checked-font-weight: bold;
|
|
25
|
-
|
|
26
|
-
/* checkbox unchecked */
|
|
27
|
-
--ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
|
|
28
|
-
--ox-checkbox-unchecked-border: var(--ox-checkbox-border);
|
|
29
|
-
--ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
|
|
10
|
+
ox-select {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
width: 100px;
|
|
13
|
+
}
|
|
30
14
|
|
|
31
|
-
|
|
32
|
-
|
|
15
|
+
ox-popup-list {
|
|
16
|
+
max-height: 200px;
|
|
17
|
+
overflow: auto;
|
|
18
|
+
}
|
|
33
19
|
|
|
34
|
-
|
|
20
|
+
::-webkit-scrollbar {
|
|
21
|
+
width: 5px;
|
|
22
|
+
height: 5px;
|
|
23
|
+
}
|
|
24
|
+
::-webkit-scrollbar-track {
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
}
|
|
27
|
+
::-webkit-scrollbar-thumb {
|
|
28
|
+
background-color: var(--scrollbar-thumb-color, rgba(0, 0, 0, 0.2));
|
|
29
|
+
}
|
|
30
|
+
::-webkit-scrollbar-thumb:hover {
|
|
31
|
+
background-color: var(--scrollbar-thumb-hover-color, #aa866a);
|
|
35
32
|
}
|
|
36
33
|
</style>
|
|
34
|
+
|
|
35
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
36
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
37
37
|
</head>
|
|
38
38
|
<body>
|
|
39
39
|
<form id="demo"></form>
|
|
40
40
|
|
|
41
41
|
<script type="module">
|
|
42
42
|
import { html, render } from 'lit'
|
|
43
|
-
import '../dist/src/ox-
|
|
43
|
+
import '../dist/src/ox-select.js'
|
|
44
|
+
import '../dist/src/ox-checkbox.js'
|
|
45
|
+
|
|
44
46
|
const form = document.querySelector('#demo')
|
|
45
47
|
|
|
46
|
-
function
|
|
48
|
+
function onchanged(e) {
|
|
47
49
|
const target = e.target
|
|
48
|
-
console.log(target.name,
|
|
50
|
+
console.log(target, target.name, e.detail)
|
|
49
51
|
|
|
50
52
|
const formData = new FormData(form)
|
|
51
|
-
console.log('<---- entries begins ----')
|
|
52
53
|
for (var pair of formData.entries()) {
|
|
53
54
|
console.log(pair[0] + ', ' + pair[1])
|
|
54
55
|
}
|
|
55
|
-
console.log('---- entries ends ------>')
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
render(
|
|
59
|
-
html`
|
|
59
|
+
html`
|
|
60
|
+
<ox-select name="single" @change=${onchanged} placeholder="single select">
|
|
61
|
+
<ox-popup-list align-left nowrap>
|
|
62
|
+
<div option value="A">A</div>
|
|
63
|
+
<div option value="B">B</div>
|
|
64
|
+
<div option value="C">C</div>
|
|
65
|
+
<div option value="TOO LONG VALUE">TOO LONG VALUE</div>
|
|
66
|
+
</ox-popup-list>
|
|
67
|
+
</ox-select>
|
|
68
|
+
|
|
69
|
+
<ox-select name="multiple" @change=${onchanged} placeholder="multiple select">
|
|
70
|
+
<ox-popup-list multiple>
|
|
71
|
+
<div option value="A">A</div>
|
|
72
|
+
<div option value="B">B</div>
|
|
73
|
+
<div option value="C">C</div>
|
|
74
|
+
<div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
|
|
75
|
+
</ox-popup-list>
|
|
76
|
+
</ox-select>
|
|
77
|
+
|
|
78
|
+
<ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox">
|
|
79
|
+
<ox-popup-list attr-selected="checked" multiple with-search>
|
|
80
|
+
<ox-checkbox option @change=${e => {
|
|
81
|
+
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
82
|
+
console.log(options)
|
|
83
|
+
options.forEach(option => (option.checked = e.target.checked))
|
|
84
|
+
}}>set all</ox-checkbox>
|
|
85
|
+
<ox-checkbox option value="A">A</ox-checkbox>
|
|
86
|
+
<ox-checkbox option value="B">B</ox-checkbox>
|
|
87
|
+
<ox-checkbox option value="C"checked >C</ox-checkbox>
|
|
88
|
+
<ox-checkbox option value="D">D</ox-checkbox>
|
|
89
|
+
<ox-checkbox option value="E">E</ox-checkbox>
|
|
90
|
+
<ox-checkbox option value="F">F</ox-checkbox>
|
|
91
|
+
<ox-checkbox option value="G">G</ox-checkbox>
|
|
92
|
+
<ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
|
|
93
|
+
</ox-popup-list>
|
|
94
|
+
</ox-select>
|
|
95
|
+
|
|
96
|
+
<ox-select name="multiple with input" @change=${onchanged} placeholder="multiple with checkbox">
|
|
97
|
+
<ox-popup-list attr-selected="checked" multiple>
|
|
98
|
+
<input type="checkbox" option @change=${e => {
|
|
99
|
+
const options = e.target.parentElement.querySelectorAll('[option]')
|
|
100
|
+
console.log(options)
|
|
101
|
+
options.forEach(option => (option.checked = e.target.checked))
|
|
102
|
+
}}>set all
|
|
103
|
+
<input type="checkbox" option value="A" />A
|
|
104
|
+
<input type="checkbox" option value="B" />B
|
|
105
|
+
<input type="checkbox" option value="C" />C
|
|
106
|
+
<input type="checkbox" option value="D" />D
|
|
107
|
+
<input type="checkbox" option value="E" />E
|
|
108
|
+
<input type="checkbox" option value="F" />F
|
|
109
|
+
<input type="checkbox" option value="G" />G
|
|
110
|
+
<input type="checkbox" option value="TOO LONG VALUE" />TOO LONG VALUE
|
|
111
|
+
</ox-popup-list>
|
|
112
|
+
</ox-select>
|
|
113
|
+
`,
|
|
60
114
|
form
|
|
61
115
|
)
|
|
62
116
|
</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C;;;;;;;;;;EAUE;AAEF,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,WAAW;IAArD;;QASE;;WAEG;QACyB,UAAK,GAAkB,IAAI,CAAA;QAG9C,kBAAa,GAAqB,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC1E,IAAI,CAAC,UAAU,EAAE,CAAA;QACnB,CAAC,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n <div value=\"top\"></div>\n <div value=\"middle\"></div>\n <div value=\"bottom\"></div>\n </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class PropertyButtonsRadio extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n `\n ]\n\n /**\n * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n */\n @property({ type: Object }) value: Object | null = null\n @property({ type: Boolean }) mandatory!: boolean\n\n @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n this._onChanged()\n })\n\n render() {\n return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this._slotObserver?.observe(this, { childList: true })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChanged()\n }\n\n get buttons() {\n return Array.from(this.querySelectorAll('*'))\n }\n\n _onChanged() {\n this.buttons.forEach(button => {\n if (this.value === button.getAttribute('data-value')) {\n button.setAttribute('active', '')\n } else {\n button.removeAttribute('active')\n }\n })\n }\n\n _onTapButton(e: Event) {\n var target = e.target as HTMLElement\n target = target.closest('[data-value]') as HTMLElement\n\n if (!target || target === this) {\n return\n }\n\n var old = this.value\n\n if (!this.mandatory) {\n if (!target.getAttribute('active')) {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n } else {\n this.value = null\n target.removeAttribute('active')\n }\n } else {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n }\n\n if (old !== this.value) {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n }\n}\n"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -10,6 +10,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this.checked = false;
|
|
12
12
|
this.disabled = false;
|
|
13
|
+
this.indeterminate = false;
|
|
13
14
|
this._hasInner = !!this.innerHTML.trim().length;
|
|
14
15
|
}
|
|
15
16
|
render() {
|
|
@@ -133,6 +134,9 @@ __decorate([
|
|
|
133
134
|
__decorate([
|
|
134
135
|
property({ type: Boolean })
|
|
135
136
|
], OxCheckbox.prototype, "disabled", void 0);
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Boolean, attribute: 'indeterminate' })
|
|
139
|
+
], OxCheckbox.prototype, "indeterminate", void 0);
|
|
136
140
|
__decorate([
|
|
137
141
|
state()
|
|
138
142
|
], OxCheckbox.prototype, "_hasInner", void 0);
|
|
@@ -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,GAAY,KAAK,CAAA;QAC7D,aAAQ,GAAY,KAAK,CAAA;
|
|
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: block;\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 = false\n @property({ type: Boolean }) disabled: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate' }) 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.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 this.checked = !this.checked\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 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 && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement } from 'lit
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
export class OxFormField extends LitElement {
|
|
5
5
|
constructor() {
|
|
@@ -26,7 +26,15 @@ export class OxFormField extends LitElement {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
appendFormData({ formData }) {
|
|
29
|
-
|
|
29
|
+
if (!this.name)
|
|
30
|
+
return;
|
|
31
|
+
var values = this.value;
|
|
32
|
+
if (!(values instanceof Array)) {
|
|
33
|
+
values = [this.value];
|
|
34
|
+
}
|
|
35
|
+
values.forEach((value) => {
|
|
36
|
+
formData.append(this.name, typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value));
|
|
37
|
+
});
|
|
30
38
|
}
|
|
31
39
|
}
|
|
32
40
|
__decorate([
|
|
@@ -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,
|
|
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;;QAIU,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC5D,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 private _form: HTMLFormElement | null = null\n private _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"]}
|
|
@@ -120,9 +120,6 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
120
120
|
<ox-input-angle id="rz" .value=${this.rotate?.z}></ox-input-angle>
|
|
121
121
|
`;
|
|
122
122
|
}
|
|
123
|
-
appendFormData({ formData }) {
|
|
124
|
-
this.name && formData.append(this.name, JSON.stringify(this.value));
|
|
125
|
-
}
|
|
126
123
|
};
|
|
127
124
|
OxInput3Dish.styles = [
|
|
128
125
|
css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputAngle } from './ox-input-angle'\n\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(4, minmax(50px, 1fr));\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n :host > * {\n grid-column: span 1;\n }\n\n label {\n text-align: right;\n }\n\n span {\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.translatex = {\n ...this.translatex,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('translate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.translatex\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n translate: this.translatex,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n return html`\n <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n <label><i18n-msg msgid=\"label.scale\">scale</i18n-msg></label>\n <input type=\"number\" id=\"sx\" .value=${this.scale?.x} />\n <input type=\"number\" id=\"sy\" .value=${this.scale?.y} />\n <input type=\"number\" id=\"sz\" .value=${this.scale?.z} />\n\n <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n <ox-input-angle id=\"rx\" .value=${this.rotate?.x}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${this.rotate?.y}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${this.rotate?.z}></ox-input-angle>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { OxFormField } from './ox-form-field';
|
|
2
|
+
export declare class OxInputId extends OxFormField {
|
|
3
|
+
static styles: import("lit").CSSResult;
|
|
4
|
+
property: {
|
|
5
|
+
component?: string;
|
|
6
|
+
} | null | undefined;
|
|
7
|
+
_ids: Array<string>;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
_onInputFocused(e: FocusEvent): void;
|
|
10
|
+
_onInputChanged(e: InputEvent): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { customElement, property, state } from 'lit/decorators';
|
|
4
|
+
import { OxFormField } from './ox-form-field';
|
|
5
|
+
let OxInputId = class OxInputId extends OxFormField {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this._ids = [];
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
const ids = this._ids || [];
|
|
12
|
+
return html `
|
|
13
|
+
<input
|
|
14
|
+
id="text"
|
|
15
|
+
type="text"
|
|
16
|
+
.value=${this.value || ''}
|
|
17
|
+
@focusin=${(e) => this._onInputFocused(e)}
|
|
18
|
+
@change=${(e) => this._onInputChanged(e)}
|
|
19
|
+
.placeholder=${this.getAttribute('placeholder') || ''}
|
|
20
|
+
list="ids"
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<datalist id="ids">${ids.map(id => html ` <option value=${id}></option> `)}</datalist>
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
_onInputFocused(e) {
|
|
27
|
+
var { component } = this.property || {};
|
|
28
|
+
document.dispatchEvent(new CustomEvent('get-all-scene-component-ids', {
|
|
29
|
+
detail: {
|
|
30
|
+
component,
|
|
31
|
+
callback: (ids) => {
|
|
32
|
+
this._ids = ids;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
_onInputChanged(e) {
|
|
38
|
+
e.stopPropagation();
|
|
39
|
+
this.value = e.target.value;
|
|
40
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
OxInputId.styles = css `
|
|
44
|
+
:host {
|
|
45
|
+
position: relative;
|
|
46
|
+
display: inline-flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: flex-end;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
input {
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
__decorate([
|
|
59
|
+
property({ type: Object })
|
|
60
|
+
], OxInputId.prototype, "property", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
state()
|
|
63
|
+
], OxInputId.prototype, "_ids", void 0);
|
|
64
|
+
OxInputId = __decorate([
|
|
65
|
+
customElement('ox-input-id')
|
|
66
|
+
], OxInputId);
|
|
67
|
+
export { OxInputId };
|
|
68
|
+
//# sourceMappingURL=ox-input-id.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-id.js","sourceRoot":"","sources":["../../src/ox-input-id.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAmBW,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;IAxCC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;;2BAIlC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA5DQ,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AAEtE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6DrB;SA7DY,SAAS","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-id')\nexport class OxInputId extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n\n @property({ type: Object }) property: { component?: string } | null | undefined\n\n @state() _ids: Array<string> = []\n\n render() {\n const ids = this._ids || []\n\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n @change=${(e: InputEvent) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n list=\"ids\"\n />\n\n <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n\n _onInputFocused(e: FocusEvent) {\n var { component } = this.property || {}\n\n document.dispatchEvent(\n new CustomEvent('get-all-scene-component-ids', {\n detail: {\n component,\n callback: (ids: string[]) => {\n this._ids = ids\n }\n }\n })\n )\n }\n\n _onInputChanged(e: InputEvent) {\n e.stopPropagation()\n\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -71,9 +71,6 @@ let OxInputStack = class OxInputStack extends OxFormField {
|
|
|
71
71
|
this.requestUpdate();
|
|
72
72
|
this._notifyChange();
|
|
73
73
|
}
|
|
74
|
-
appendFormData({ formData }) {
|
|
75
|
-
this.name && formData.append(this.name, JSON.stringify(this.value));
|
|
76
|
-
}
|
|
77
74
|
};
|
|
78
75
|
OxInputStack.styles = [
|
|
79
76
|
css `
|