@operato/input 1.0.0-alpha.4 → 1.0.0-alpha.8
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 +34 -0
- package/demo/index-file.html +41 -0
- package/demo/index-image.html +1 -1
- package/demo/index-options.html +43 -0
- package/demo/index-range.html +40 -0
- package/demo/index.html +12 -56
- package/dist/src/ox-checkbox.js +1 -1
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-data.d.ts +1 -1
- package/dist/src/ox-input-data.js +1 -1
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-file.d.ts +2 -0
- package/dist/src/ox-input-file.js +6 -1
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-options.d.ts +22 -0
- package/dist/src/ox-input-options.js +137 -0
- package/dist/src/ox-input-options.js.map +1 -0
- package/dist/src/ox-input-range.d.ts +4 -0
- package/dist/src/ox-input-range.js +161 -0
- package/dist/src/ox-input-range.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -5
- package/src/ox-checkbox.ts +1 -1
- package/src/ox-input-data.ts +4 -4
- package/src/ox-input-file.ts +8 -3
- package/src/ox-input-options.ts +165 -0
- package/src/ox-input-range.ts +147 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,40 @@
|
|
|
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
|
+
## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/input
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @operato/input
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### :rocket: New Features
|
|
34
|
+
|
|
35
|
+
* migrate property-editor from things-factory ([272cdaa](https://github.com/hatiolab/operato/commit/272cdaafd74f3c3c597403f88655cb5cf4a81313))
|
|
36
|
+
* migrated property-editors from things-factory ([9d0b73a](https://github.com/hatiolab/operato/commit/9d0b73a8c05187e7ca8db874ddde8c977ec52a55))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
6
40
|
## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
|
|
7
41
|
|
|
8
42
|
**Note:** Version bump only for package @operato/input
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<style>
|
|
6
|
+
body {
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
ox-input-file {
|
|
11
|
+
max-width: 500px;
|
|
12
|
+
max-height: 300px;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<form id="demo"></form>
|
|
19
|
+
|
|
20
|
+
<script type="module">
|
|
21
|
+
import { html, render } from 'lit'
|
|
22
|
+
import '../dist/src/ox-input-file.js'
|
|
23
|
+
|
|
24
|
+
const form = document.querySelector('#demo')
|
|
25
|
+
render(
|
|
26
|
+
html`
|
|
27
|
+
<ox-input-file
|
|
28
|
+
.value=${['https://www.hatiolab.com/assets/img/arch-thingsboard.png']}
|
|
29
|
+
name="file"
|
|
30
|
+
multiple
|
|
31
|
+
@change=${e => {
|
|
32
|
+
console.log(e.target.value)
|
|
33
|
+
console.log('form value', new FormData(form).get('file'))
|
|
34
|
+
}}
|
|
35
|
+
></ox-input-file>
|
|
36
|
+
`,
|
|
37
|
+
form
|
|
38
|
+
)
|
|
39
|
+
</script>
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
package/demo/index-image.html
CHANGED
|
@@ -0,0 +1,43 @@
|
|
|
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-options.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
|
|
20
|
+
const value = [{ text: 'SHOOSE', value: 'Shoose' }]
|
|
21
|
+
|
|
22
|
+
const sort = () => {
|
|
23
|
+
const input = document.querySelector('ox-input-options')
|
|
24
|
+
input.sort()
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
render(
|
|
28
|
+
html`
|
|
29
|
+
<ox-input-options
|
|
30
|
+
name="options"
|
|
31
|
+
.value=${value}
|
|
32
|
+
@change=${e => {
|
|
33
|
+
console.log(e.target.value)
|
|
34
|
+
console.log('form value', new FormData(form).get('options'))
|
|
35
|
+
}}
|
|
36
|
+
></ox-input-options>
|
|
37
|
+
<input type="button" value="Sort" @click=${e => sort()}></input>
|
|
38
|
+
`,
|
|
39
|
+
form
|
|
40
|
+
)
|
|
41
|
+
</script>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -0,0 +1,40 @@
|
|
|
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-range.js'
|
|
17
|
+
|
|
18
|
+
const form = document.querySelector('#demo')
|
|
19
|
+
const placeholder = 'enter a range in degree'
|
|
20
|
+
|
|
21
|
+
render(
|
|
22
|
+
html`
|
|
23
|
+
<ox-input-range
|
|
24
|
+
value="1"
|
|
25
|
+
name="range"
|
|
26
|
+
step="10"
|
|
27
|
+
min="-300"
|
|
28
|
+
max="300"
|
|
29
|
+
placeholder=${placeholder}
|
|
30
|
+
@change=${e => {
|
|
31
|
+
console.log(e.target.value)
|
|
32
|
+
console.log('form value', new FormData(form).get('range'))
|
|
33
|
+
}}
|
|
34
|
+
></ox-input-range>
|
|
35
|
+
`,
|
|
36
|
+
form
|
|
37
|
+
)
|
|
38
|
+
</script>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -6,64 +6,20 @@
|
|
|
6
6
|
body {
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
.customized {
|
|
11
|
-
/* checkbox default */
|
|
12
|
-
--ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
|
|
13
|
-
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
|
14
|
-
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
15
|
-
--ox-checkbox-size: 15px;
|
|
16
|
-
--ox-checkbox-background-color: var(--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);
|
|
30
|
-
|
|
31
|
-
/* checkbox disabled */
|
|
32
|
-
--ox-checkbox-disabled-opacity: 0.5;
|
|
33
|
-
|
|
34
|
-
font-size: 1.1em;
|
|
35
|
-
}
|
|
36
9
|
</style>
|
|
37
10
|
</head>
|
|
38
11
|
<body>
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
for (var pair of formData.entries()) {
|
|
52
|
-
console.log(pair[0] + ', ' + pair[1])
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
render(
|
|
57
|
-
html`
|
|
58
|
-
<ox-checkbox name="check-a" @change=${onchange} class=""></ox-checkbox>
|
|
59
|
-
<ox-checkbox name="check-b" @change=${onchange} class="customized">hatiolab</ox-checkbox>
|
|
60
|
-
<ox-checkbox name="check-c" @change=${onchange} class="customized" indeterminatable indeterminate
|
|
61
|
-
>hatiosea - indetarminatable</ox-checkbox
|
|
62
|
-
>
|
|
63
|
-
<ox-checkbox name="check-d" @change=${onchange} class="customized" disabled>ibex</ox-checkbox>
|
|
64
|
-
`,
|
|
65
|
-
form
|
|
66
|
-
)
|
|
67
|
-
</script>
|
|
12
|
+
<a href="./index-3dish.html">3dish</a>
|
|
13
|
+
<a href="./index-options.html">options</a>
|
|
14
|
+
<a href="./index-angle.html">angle</a>
|
|
15
|
+
<a href="./index-barcode.html">barcode</a>
|
|
16
|
+
<a href="./index-button-radio.html">button-radio</a>
|
|
17
|
+
<a href="./index-checkbox.html">checkbox</a>
|
|
18
|
+
<a href="./index-code.html">code</a>
|
|
19
|
+
<a href="./index-image.html">image</a>
|
|
20
|
+
<a href="./index-file.html">file</a>
|
|
21
|
+
<a href="./index-range.html">range</a>
|
|
22
|
+
<a href="./index-select.html">select</a>
|
|
23
|
+
<a href="./index-stack.html">stack</a>
|
|
68
24
|
</body>
|
|
69
25
|
</html>
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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 = 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 = false\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"]}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import './ox-input-code';
|
|
6
6
|
import { css, html } from 'lit';
|
|
7
|
+
import { OxFormField } from './ox-form-field.js';
|
|
7
8
|
import { customElement } from 'lit/decorators.js';
|
|
8
|
-
import { OxFormField } from './ox-form-field';
|
|
9
9
|
/**
|
|
10
10
|
WEB Component for code-mirror based data editor.
|
|
11
11
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { PropertyValues, css, html } from 'lit'\n\nimport { OxFormField } from './ox-form-field.js'\nimport OxInputCode from './ox-input-code.js'\nimport { customElement } from 'lit/decorators.js'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport default class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div[datatype] {\n display: flex;\n align-items: center;\n padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n />object\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n this.value = target.value\n }\n\n const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n this._setDataType(type)\n })\n }\n\n udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\n }\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value !== type) {\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n this.value = String(value || '')\n break\n case 'number':\n if (!isNaN(value)) {\n this.value = Number(value)\n }\n break\n case 'object':\n this.value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getData(data: any) {\n return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n }\n\n _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import '@material/mwc-icon';
|
|
2
|
+
import { PropertyValues } from 'lit';
|
|
2
3
|
import { OxFormField } from './ox-form-field.js';
|
|
3
4
|
export declare class OxInputFile extends OxFormField {
|
|
4
5
|
static styles: import("lit").CSSResult[];
|
|
@@ -11,6 +12,7 @@ export declare class OxInputFile extends OxFormField {
|
|
|
11
12
|
attachFileList: boolean;
|
|
12
13
|
fileInput: HTMLInputElement;
|
|
13
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
|
+
updated(changes: PropertyValues<this>): void;
|
|
14
16
|
firstUpdated(): void;
|
|
15
17
|
get files(): any;
|
|
16
18
|
reset(): void;
|
|
@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
3
|
import { css, html } from 'lit';
|
|
4
4
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
5
|
-
import { ScrollbarStyles } from '@operato/styles';
|
|
6
5
|
import { FileDropHelper } from '@operato/utils';
|
|
7
6
|
import { OxFormField } from './ox-form-field.js';
|
|
7
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
8
8
|
let OxInputFile = class OxInputFile extends OxFormField {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
@@ -122,6 +122,11 @@ let OxInputFile = class OxInputFile extends OxFormField {
|
|
|
122
122
|
: html ``}
|
|
123
123
|
`;
|
|
124
124
|
}
|
|
125
|
+
updated(changes) {
|
|
126
|
+
if (changes.has('value') && !(this.value instanceof Array)) {
|
|
127
|
+
this.value = !this.value ? [] : [this.value];
|
|
128
|
+
}
|
|
129
|
+
}
|
|
125
130
|
firstUpdated() {
|
|
126
131
|
FileDropHelper.set(this);
|
|
127
132
|
this.addEventListener('file-drop', (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\nimport { OxFormField } from './ox-form-field.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--border-radius);\n align-items: center;\n justify-content: center;\n padding: var(--padding-default, 9px);\n min-height: 100px;\n text-transform: capitalize;\n\n border: var(--file-uploader-border);\n background-color: var(--main-section-background-color);\n font: var(--file-uploader-font) !important;\n color: var(--file-uploader-color);\n }\n :host > mwc-icon {\n color: var(--file-uploader-icon-color);\n --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n }\n\n :host(.candrop) {\n background-color: var(--file-uploader-candrop-background-color);\n }\n\n #input-file {\n display: none;\n }\n\n label {\n position: relative;\n width: auto;\n border: none;\n text-transform: capitalize;\n\n padding: var(--file-uploader-label-padding);\n border-radius: var(--file-uploader-label-border-radius);\n background-color: var(--file-uploader-label-background-color);\n color: var(--file-uploader-label-color);\n font: var(--file-uploader-label-font) !important;\n }\n\n ul {\n max-width: 500px;\n width: 100%;\n list-style: none;\n margin: 5px 0 0 0;\n padding: 0;\n max-height: 46px;\n overflow: auto;\n background-color: rgba(var(--primary-color-rgb), 0.1);\n }\n li {\n text-align: left;\n\n padding: 3px 5px 2px 5px;\n border-bottom: var(--file-uploader-li-border-bottom);\n font: normal 14px var(--theme-font);\n }\n li mwc-icon {\n float: right;\n cursor: pointer;\n margin: var(--file-uploader-li-icon-margin);\n font-size: 1em;\n }\n li mwc-icon:hover,\n li mwc-icon:active {\n color: var(--file-uploader-li-icon-focus-color);\n }\n `\n ]\n\n @property({ type: Boolean }) multiple?: boolean\n @property({ type: String }) accept?: string\n @property({ type: String }) icon?: string\n @property({ type: String }) label?: string\n @property({ type: String }) description?: string\n @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n hideFileList: boolean = false\n @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n attachFileList: boolean = false\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n var files: File[] = this.value || []\n\n return html`\n <mwc-icon>upload</mwc-icon>\n\n <span>drop files here!</span>\n\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n\n <label for=\"input-file\">${this.label || 'select files'}</label>\n\n ${!this.hideFileList && files?.length\n ? html` <ul>\n ${files.map(\n file => html`\n <li>\n - ${file.name}\n <mwc-icon\n @click=${(e: Event) => {\n files.splice(files.indexOf(file), 1)\n this.value = [...files]\n this._notifyChange()\n }}\n >delete_outline</mwc-icon\n >\n </li>\n `\n )}\n </ul>`\n : html``}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && !(this.value instanceof Array)) {\n this.value = !this.value ? [] : [this.value]\n }\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n\n this.addEventListener('file-drop', (e: Event) => {\n const detail = (e as CustomEvent).detail\n this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n this._notifyChange()\n })\n }\n\n get files() {\n return this.value\n }\n\n reset() {\n this.fileInput.value = ''\n this.value = []\n\n this._notifyChange()\n }\n\n _onChangeValue(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const files = this.value || []\n\n this.value = this.attachFileList\n ? [...files, ...Array.from(fileInput.files as FileList)]\n : [...Array.from(fileInput.files as FileList)]\n\n fileInput.files = null\n\n this._notifyChange()\n }\n\n _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { OxFormField } from './ox-form-field';
|
|
5
|
+
declare type Option = {
|
|
6
|
+
text: string;
|
|
7
|
+
value: string;
|
|
8
|
+
};
|
|
9
|
+
export declare class OxInputOptions extends OxFormField {
|
|
10
|
+
static styles: import("lit").CSSResult;
|
|
11
|
+
value: Option[];
|
|
12
|
+
firstUpdated(): void;
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
private _changingNow;
|
|
15
|
+
_onChange(e: Event): void;
|
|
16
|
+
_build(includeNewRecord?: any): void;
|
|
17
|
+
sort(): void;
|
|
18
|
+
_add(): void;
|
|
19
|
+
_delete(e: Event): void;
|
|
20
|
+
protected appendFormData({ formData }: FormDataEvent): void;
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import { css, html } from 'lit';
|
|
6
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { OxFormField } from './ox-form-field';
|
|
8
|
+
let OxInputOptions = class OxInputOptions extends OxFormField {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.value = [];
|
|
12
|
+
this._changingNow = false;
|
|
13
|
+
}
|
|
14
|
+
static { this.styles = css `
|
|
15
|
+
div {
|
|
16
|
+
display: grid;
|
|
17
|
+
grid-template-columns: repeat(10, 1fr);
|
|
18
|
+
grid-gap: 5px;
|
|
19
|
+
grid-auto-rows: minmax(24px, auto);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
input[data-text] {
|
|
23
|
+
grid-column: span 5;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
input[data-value] {
|
|
27
|
+
grid-column: span 4;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
button {
|
|
31
|
+
grid-column: span 1;
|
|
32
|
+
}
|
|
33
|
+
`; }
|
|
34
|
+
firstUpdated() {
|
|
35
|
+
this.renderRoot.addEventListener('change', this._onChange.bind(this));
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
const options = this.value instanceof Array ? this.value : [];
|
|
39
|
+
return html `
|
|
40
|
+
${(options || []).map(item => html `
|
|
41
|
+
<div data-record="">
|
|
42
|
+
<input type="text" data-text="" placeholder="text" .value=${item.text} />
|
|
43
|
+
<input type="text" data-value="" placeholder="value" .value=${item.value} />
|
|
44
|
+
<button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">-</button>
|
|
45
|
+
</div>
|
|
46
|
+
`)}
|
|
47
|
+
|
|
48
|
+
<div data-record-new="">
|
|
49
|
+
<input type="text" data-text="" placeholder="text" value="" />
|
|
50
|
+
<input type="text" data-value="" placeholder="value" value="" @change=${(e) => this._add()} />
|
|
51
|
+
<button class="record-action" @click=${(e) => this._add()} tabindex="-1">+</button>
|
|
52
|
+
</div>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
_onChange(e) {
|
|
56
|
+
if (this._changingNow)
|
|
57
|
+
return;
|
|
58
|
+
this._changingNow = true;
|
|
59
|
+
var input = e.target;
|
|
60
|
+
var value = input.value;
|
|
61
|
+
var div = input.parentElement;
|
|
62
|
+
if (div && div.hasAttribute('data-record')) {
|
|
63
|
+
var dataList = div.querySelectorAll('[data-value]:not([hidden])');
|
|
64
|
+
for (var i = 0; i < dataList.length; i++) {
|
|
65
|
+
if (dataList[i] !== input) {
|
|
66
|
+
dataList[i].value = value || '';
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (div && div.hasAttribute('data-record'))
|
|
71
|
+
this._build(true);
|
|
72
|
+
else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value'))
|
|
73
|
+
this._add();
|
|
74
|
+
e.stopPropagation();
|
|
75
|
+
this._changingNow = false;
|
|
76
|
+
}
|
|
77
|
+
_build(includeNewRecord) {
|
|
78
|
+
if (includeNewRecord) {
|
|
79
|
+
var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
var records = this.renderRoot.querySelectorAll('[data-record]');
|
|
83
|
+
}
|
|
84
|
+
var newoptions = [];
|
|
85
|
+
for (var i = 0; i < records.length; i++) {
|
|
86
|
+
var record = records[i];
|
|
87
|
+
var text = record.querySelector('[data-text]').value;
|
|
88
|
+
var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])');
|
|
89
|
+
if (!inputs || inputs.length == 0)
|
|
90
|
+
continue;
|
|
91
|
+
var input = inputs[inputs.length - 1];
|
|
92
|
+
var value = input.value;
|
|
93
|
+
if (text)
|
|
94
|
+
newoptions.push({ text: text, value: value || text });
|
|
95
|
+
}
|
|
96
|
+
this.value = newoptions;
|
|
97
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
|
98
|
+
}
|
|
99
|
+
sort() {
|
|
100
|
+
var sorter = function (a, b) {
|
|
101
|
+
return b.text < a.text ? 1 : -1;
|
|
102
|
+
};
|
|
103
|
+
this.value = [...this.value.sort(sorter)];
|
|
104
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
|
105
|
+
}
|
|
106
|
+
_add() {
|
|
107
|
+
this._build(true);
|
|
108
|
+
var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])');
|
|
109
|
+
for (var i = 0; i < inputs.length; i++) {
|
|
110
|
+
let input = inputs[i];
|
|
111
|
+
input.value = '';
|
|
112
|
+
}
|
|
113
|
+
inputs[0].focus();
|
|
114
|
+
}
|
|
115
|
+
_delete(e) {
|
|
116
|
+
const record = e.target.parentElement;
|
|
117
|
+
const input = record && record.querySelector('[data-text]');
|
|
118
|
+
if (input) {
|
|
119
|
+
input.value = '';
|
|
120
|
+
}
|
|
121
|
+
this._build();
|
|
122
|
+
}
|
|
123
|
+
appendFormData({ formData }) {
|
|
124
|
+
if (!this.name)
|
|
125
|
+
return;
|
|
126
|
+
const value = this.value;
|
|
127
|
+
formData.append(this.name, typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value));
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
__decorate([
|
|
131
|
+
property({ type: Array })
|
|
132
|
+
], OxInputOptions.prototype, "value", void 0);
|
|
133
|
+
OxInputOptions = __decorate([
|
|
134
|
+
customElement('ox-input-options')
|
|
135
|
+
], OxInputOptions);
|
|
136
|
+
export { OxInputOptions };
|
|
137
|
+
//# sourceMappingURL=ox-input-options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAc,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAK7C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;IAA/C;;QAsB6B,UAAK,GAAa,EAAE,CAAA;QA4BvC,iBAAY,GAAY,KAAK,CAAA;IAsGvC,CAAC;aAvJQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,CAAA;IAID,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAE7D,OAAO,IAAI,CAAA;QACP,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;wEAEoD,IAAI,CAAC,IAAI;0EACP,IAAI,CAAC,KAAK;mDACjC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;SAE5E,CACF;;;;gFAIyE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;+CAC1D,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;KAExE,CAAA;IACH,CAAC;IAID,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAM;QAE7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,IAAI,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QACxC,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;QAEvB,IAAI,GAAG,GAAG,KAAK,CAAC,aAAa,CAAA;QAE7B,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;YAC1C,IAAI,QAAQ,GAAG,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAiC,CAAA;YAEjG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACxC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;oBACzB,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAA;iBAChC;aACF;SACF;QAED,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;aACxD,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE,CAAA;QAEpG,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAED,MAAM,CAAC,gBAAsB;QAC3B,IAAI,gBAAgB,EAAE;YACpB,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAA4B,CAAA;SAC7G;aAAM;YACL,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAA4B,CAAA;SAC3F;QAED,IAAI,UAAU,GAAa,EAAE,CAAA;QAE7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;YAEvB,IAAI,IAAI,GAAI,MAAM,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAC,KAAK,CAAA;YAC1E,IAAI,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,4CAA4C,CAAiC,CAAA;YAClH,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,SAAQ;YAE3C,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;YACrC,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAEvB,IAAI,IAAI;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,CAAA;SAChE;QAED,IAAI,CAAC,KAAK,GAAG,UAAU,CAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;IAED,IAAI;QACF,IAAI,MAAM,GAAG,UAAU,CAAS,EAAE,CAAS;YACzC,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,CAAC,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QAEzC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC3C,uDAAuD,CACxB,CAAA;QAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;SACjB;QAED,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,MAAM,MAAM,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAA;QACtD,MAAM,KAAK,GAAG,MAAM,IAAK,MAAM,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAA;QAEjF,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;SACjB;QAED,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,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;IACH,CAAC;CACF,CAAA;AAlI4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAqB;AAtBpC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwJ1B;SAxJY,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n static styles = css`\n div {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n }\n\n input[data-text] {\n grid-column: span 5;\n }\n\n input[data-value] {\n grid-column: span 4;\n }\n\n button {\n grid-column: span 1;\n }\n `\n\n @property({ type: Array }) value: Option[] = []\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const options = this.value instanceof Array ? this.value : []\n\n return html`\n ${(options || []).map(\n item => html`\n <div data-record=\"\">\n <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} />\n <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">-</button>\n </div>\n `\n )}\n\n <div data-record-new=\"\">\n <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">+</button>\n </div>\n `\n }\n\n private _changingNow: boolean = false\n\n _onChange(e: Event) {\n if (this._changingNow) return\n\n this._changingNow = true\n\n var input = e.target as HTMLInputElement\n var value = input.value\n\n var div = input.parentElement\n\n if (div && div.hasAttribute('data-record')) {\n var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n for (var i = 0; i < dataList.length; i++) {\n if (dataList[i] !== input) {\n dataList[i].value = value || ''\n }\n }\n }\n\n if (div && div.hasAttribute('data-record')) this._build(true)\n else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()\n\n e.stopPropagation()\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: any) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newoptions: Option[] = []\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n if (!inputs || inputs.length == 0) continue\n\n var input = inputs[inputs.length - 1]\n var value = input.value\n\n if (text) newoptions.push({ text: text, value: value || text })\n }\n\n this.value = newoptions\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n sort() {\n var sorter = function (a: Option, b: Option) {\n return b.text < a.text ? 1 : -1\n }\n\n this.value = [...this.value.sort(sorter)]\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _add() {\n this._build(true)\n\n var inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: Event) {\n const record = (e.target as HTMLElement).parentElement\n const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n if (input) {\n input.value = ''\n }\n\n this._build()\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n const value = this.value\n\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n }\n}\n"]}
|