@operato/input 1.0.0-alpha.11 → 1.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/assets/images/icon-properties-line-type.png +0 -0
  3. package/assets/images/icon-properties-table.png +0 -0
  4. package/demo/index-table.html +39 -0
  5. package/demo/index-value-map.html +80 -0
  6. package/demo/index-value-ranges.html +80 -0
  7. package/demo/index.html +3 -0
  8. package/dist/src/index.d.ts +6 -3
  9. package/dist/src/index.js +6 -3
  10. package/dist/src/index.js.map +1 -1
  11. package/dist/src/ox-input-multiple-colors.d.ts +2 -2
  12. package/dist/src/ox-input-multiple-colors.js +2 -2
  13. package/dist/src/ox-input-multiple-colors.js.map +1 -1
  14. package/dist/src/ox-input-table.d.ts +8 -0
  15. package/dist/src/ox-input-table.js +379 -0
  16. package/dist/src/ox-input-table.js.map +1 -0
  17. package/dist/src/ox-input-value-map.d.ts +41 -0
  18. package/dist/src/ox-input-value-map.js +278 -0
  19. package/dist/src/ox-input-value-map.js.map +1 -0
  20. package/dist/src/ox-input-value-ranges.d.ts +41 -0
  21. package/dist/src/ox-input-value-ranges.js +298 -0
  22. package/dist/src/ox-input-value-ranges.js.map +1 -0
  23. package/dist/tsconfig.tsbuildinfo +1 -1
  24. package/package.json +12 -6
  25. package/src/index.ts +6 -3
  26. package/src/ox-input-multiple-colors.ts +2 -2
  27. package/src/ox-input-table.ts +404 -0
  28. package/src/{ox-input-keyvalues.ts.ing → ox-input-value-map.ts} +117 -88
  29. package/src/ox-input-value-ranges.ts +325 -0
  30. package/src/ox-input-background-pattern.ts.xxx +0 -163
  31. package/src/ox-input-color-gradient.ts.xxx +0 -343
  32. package/src/ox-input-fill-style.ts.xxx +0 -361
  33. package/src/ox-input-ranges.ts.ing +0 -292
package/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
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.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
7
+
8
+ **Note:** Version bump only for package @operato/input
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
15
+
16
+
17
+ ### :bug: Bug Fix
18
+
19
+ * typos ([71447fa](https://github.com/hatiolab/operato/commit/71447fa2dfb52c5e45909baac735c2e195856256))
20
+
21
+
22
+
23
+ ## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
24
+
25
+
26
+ ### :rocket: New Features
27
+
28
+ * migrate input, property-editor from things-factory ([4800d85](https://github.com/hatiolab/operato/commit/4800d859473bf623325233a7f2af851e5d093dcb))
29
+
30
+
31
+
6
32
  ## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
7
33
 
8
34
  **Note:** Version bump only for package @operato/input
package/demo/index-table.html ADDED
@@ -0,0 +1,39 @@
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
+
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
12
+
13
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
14
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
15
+ </head>
16
+ <body>
17
+ <form id="demo"></form>
18
+
19
+ <script type="module">
20
+ import { html, render } from 'lit'
21
+ import '../dist/src/ox-input-table.js'
22
+
23
+ const form = document.querySelector('#demo')
24
+
25
+ render(
26
+ html`
27
+ <ox-input-table
28
+ name="table"
29
+ @change=${e => {
30
+ console.log(e.target.value)
31
+ console.log('form value', new FormData(form).get('table'))
32
+ }}
33
+ ></ox-input-table>
34
+ `,
35
+ form
36
+ )
37
+ </script>
38
+ </body>
39
+ </html>
package/demo/index-value-map.html ADDED
@@ -0,0 +1,80 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ </head>
11
+ <body>
12
+ <form id="demo"></form>
13
+
14
+ <script type="module">
15
+ import { html, render } from 'lit'
16
+ import '../dist/src/ox-input-value-map.js'
17
+
18
+ const form = document.querySelector('#demo')
19
+
20
+ const value1 = {
21
+ A: 'A',
22
+ B: 'B',
23
+ C: 'C',
24
+ default: 'B'
25
+ }
26
+
27
+ const value2 = {
28
+ A: true,
29
+ B: false,
30
+ C: true,
31
+ default: true
32
+ }
33
+
34
+ const value3 = {
35
+ A: 'red',
36
+ B: 'yellow',
37
+ C: 'blue',
38
+ default: 'yellow'
39
+ }
40
+
41
+ render(
42
+ html`
43
+ <ox-input-value-map
44
+ name="value-map1"
45
+ valuetype="string"
46
+ keytype="string"
47
+ .value=${value1}
48
+ @change=${e => {
49
+ console.log(e.target.value)
50
+ console.log('form value', new FormData(form).get('value-map1'))
51
+ }}
52
+ ></ox-input-value-map>
53
+
54
+ <ox-input-value-map
55
+ name="value-map2"
56
+ valuetype="boolean"
57
+ keytype="string"
58
+ .value=${value2}
59
+ @change=${e => {
60
+ console.log(e.target.value)
61
+ console.log('form value', new FormData(form).get('value-map2'))
62
+ }}
63
+ ></ox-input-value-map>
64
+
65
+ <ox-input-value-map
66
+ name="value-map3"
67
+ valuetype="color"
68
+ keytype="string"
69
+ .value=${value3}
70
+ @change=${e => {
71
+ console.log(e.target.value)
72
+ console.log('form value', new FormData(form).get('value-map3'))
73
+ }}
74
+ ></ox-input-value-map>
75
+ `,
76
+ form
77
+ )
78
+ </script>
79
+ </body>
80
+ </html>
package/demo/index-value-ranges.html ADDED
@@ -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>
package/demo/index.html CHANGED
@@ -11,6 +11,7 @@
11
11
  <body>
12
12
  <a href="./index-3dish.html">3dish</a>
13
13
  <a href="./index-options.html">options</a>
14
+ <a href="./index-table.html">table</a>
14
15
  <a href="./index-angle.html">angle</a>
15
16
  <a href="./index-color.html">color</a>
16
17
  <a href="./index-multiple-colors.html">multiple-colors</a>
@@ -25,5 +26,7 @@
25
26
  <a href="./index-range.html">range</a>
26
27
  <a href="./index-select.html">select</a>
27
28
  <a href="./index-stack.html">stack</a>
29
+ <a href="./index-value-map.html">value-map</a>
30
+ <a href="./index-value-ranges.html">value-ranges</a>
28
31
  </body>
29
32
  </html>
package/dist/src/index.d.ts CHANGED
@@ -1,15 +1,18 @@
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
13
  export * from './ox-input-file.js';
14
14
  export * from './ox-input-image.js';
15
+ export * from './ox-input-value-ranges.js';
16
+ export * from './ox-input-value-map.js';
17
+ export * from './ox-input-table.js';
15
18
  export * from './ox-input-scene-component-id.js';
package/dist/src/index.js CHANGED
@@ -1,16 +1,19 @@
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
13
  export * from './ox-input-file.js';
14
14
  export * from './ox-input-image.js';
15
+ export * from './ox-input-value-ranges.js';
16
+ export * from './ox-input-value-map.js';
17
+ export * from './ox-input-table.js';
15
18
  export * from './ox-input-scene-component-id.js';
16
19
  //# 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,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA","sourcesContent":["export * from './ox-form-field.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-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.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-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-scene-component-id.js'\n"]}
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,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,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-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'\n"]}
package/dist/src/ox-input-multiple-colors.d.ts CHANGED
@@ -12,8 +12,8 @@ import { OxInputColor } from './ox-input-color.js';
12
12
 
13
13
  Example:
14
14
 
15
- <ox-input-multiple-color values=${values}>
16
- </ox-input-multiple-color>
15
+ <ox-input-multiple-colors values=${values}>
16
+ </ox-input-multiple-colors>
17
17
  */
18
18
  export declare class OxInputMultipleColors extends OxFormField {
19
19
  static styles: import("lit").CSSResult;
package/dist/src/ox-input-multiple-colors.js CHANGED
@@ -14,8 +14,8 @@ import { OxFormField } from './ox-form-field.js';
14
14
 
15
15
  Example:
16
16
 
17
- <ox-input-multiple-color values=${values}>
18
- </ox-input-multiple-color>
17
+ <ox-input-multiple-colors values=${values}>
18
+ </ox-input-multiple-colors>
19
19
  */
20
20
  let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
21
21
  constructor() {
package/dist/src/ox-input-multiple-colors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGF,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,WAAW;IAAtD;;QA+B6B,UAAK,GAAa,EAAE,CAAA;IAwDjD,CAAC;aAtFQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAA;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sDAEuB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,KAAK;;uCAElE,IAAI;;gBAE3B,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;;;+BAIS,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCACpC,KAAK;;mBAErB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAErC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;gBAAE,SAAQ;;gBAC7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SAChC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,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;AAxD4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AAlClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAuFjC;SAvFY,qBAAqB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-color values=${values}>\n </ox-input-multiple-color>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 22px 1fr 22px;\n grid-gap: 5px;\n align-items: center;\n justify-content: left;\n }\n\n ox-input-color {\n height: 25px;\n width: 100%;\n }\n\n input[type='button'] {\n width: 22px;\n height: 25px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n padding-top: 0px;\n padding-bottom: 2px;\n background-color: #f1f2f4;\n color: #8f9192;\n font-size: 16px;\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <input type=\"button\" value=\"+\" @click=${() => this._appendEditorColor()} data-index=${index} />\n\n <ox-input-color .value=${item}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <input\n type=\"button\"\n value=\"-\"\n @click=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n />\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor() {\n this.value = [...this.value, 'black']\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).dataset.index)) continue\n else values.push(this.value[i])\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGF,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,WAAW;IAAtD;;QA+B6B,UAAK,GAAa,EAAE,CAAA;IAwDjD,CAAC;aAtFQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAA;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sDAEuB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,KAAK;;uCAElE,IAAI;;gBAE3B,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;;;+BAIS,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCACpC,KAAK;;mBAErB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAErC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;gBAAE,SAAQ;;gBAC7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SAChC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,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;AAxD4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AAlClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAuFjC;SAvFY,qBAAqB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 22px 1fr 22px;\n grid-gap: 5px;\n align-items: center;\n justify-content: left;\n }\n\n ox-input-color {\n height: 25px;\n width: 100%;\n }\n\n input[type='button'] {\n width: 22px;\n height: 25px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n padding-top: 0px;\n padding-bottom: 2px;\n background-color: #f1f2f4;\n color: #8f9192;\n font-size: 16px;\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <input type=\"button\" value=\"+\" @click=${() => this._appendEditorColor()} data-index=${index} />\n\n <ox-input-color .value=${item}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <input\n type=\"button\"\n value=\"-\"\n @click=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n />\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor() {\n this.value = [...this.value, 'black']\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).dataset.index)) continue\n else values.push(this.value[i])\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
package/dist/src/ox-input-table.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import '@material/mwc-icon';
5
+ import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
6
+ import '@polymer/paper-item/paper-item';
7
+ import '@operato/i18n/ox-i18n.js';
8
+ import './ox-input-color.js';