@operato/input 1.0.0-beta.5 → 1.0.0-beta.50

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 (189) hide show
  1. package/.storybook/main.js +2 -2
  2. package/.storybook/server.mjs +4 -4
  3. package/CHANGELOG.md +648 -0
  4. package/demo/index-multiple-colors.html +4 -1
  5. package/demo/index-partition-keys.html +2 -5
  6. package/demo/index-select.html +1 -1
  7. package/demo/index.html +4 -0
  8. package/dist/src/index.d.ts +4 -2
  9. package/dist/src/index.js +4 -2
  10. package/dist/src/index.js.map +1 -1
  11. package/dist/src/locales/en.d.ts +8 -0
  12. package/dist/src/locales/en.js +8 -0
  13. package/dist/src/locales/en.js.map +1 -1
  14. package/dist/src/locales/ko.d.ts +8 -0
  15. package/dist/src/locales/ko.js +8 -0
  16. package/dist/src/locales/ko.js.map +1 -1
  17. package/dist/src/locales/ms.d.ts +8 -0
  18. package/dist/src/locales/ms.js +8 -0
  19. package/dist/src/locales/ms.js.map +1 -1
  20. package/dist/src/locales/zh.d.ts +8 -0
  21. package/dist/src/locales/zh.js +8 -0
  22. package/dist/src/locales/zh.js.map +1 -1
  23. package/dist/src/ox-input-3dish.js +24 -8
  24. package/dist/src/ox-input-3dish.js.map +1 -1
  25. package/dist/src/ox-input-barcode.d.ts +5 -2
  26. package/dist/src/ox-input-barcode.js +61 -31
  27. package/dist/src/ox-input-barcode.js.map +1 -1
  28. package/dist/src/ox-input-color.js +16 -11
  29. package/dist/src/ox-input-color.js.map +1 -1
  30. package/dist/src/ox-input-crontab.js +28 -10
  31. package/dist/src/ox-input-crontab.js.map +1 -1
  32. package/dist/src/ox-input-data.js +1 -1
  33. package/dist/src/ox-input-data.js.map +1 -1
  34. package/dist/src/ox-input-duration.d.ts +13 -0
  35. package/dist/src/ox-input-duration.js +163 -0
  36. package/dist/src/ox-input-duration.js.map +1 -0
  37. package/dist/src/ox-input-file.js +5 -3
  38. package/dist/src/ox-input-file.js.map +1 -1
  39. package/dist/src/ox-input-key-values.d.ts +41 -0
  40. package/dist/src/ox-input-key-values.js +233 -0
  41. package/dist/src/ox-input-key-values.js.map +1 -0
  42. package/dist/src/ox-input-multiple-colors.d.ts +1 -0
  43. package/dist/src/ox-input-multiple-colors.js +29 -21
  44. package/dist/src/ox-input-multiple-colors.js.map +1 -1
  45. package/dist/src/ox-input-options.d.ts +1 -0
  46. package/dist/src/ox-input-options.js +55 -14
  47. package/dist/src/ox-input-options.js.map +1 -1
  48. package/dist/src/ox-input-partition-keys.d.ts +1 -0
  49. package/dist/src/ox-input-partition-keys.js +51 -23
  50. package/dist/src/ox-input-partition-keys.js.map +1 -1
  51. package/dist/src/ox-input-quantifier.d.ts +11 -0
  52. package/dist/src/ox-input-quantifier.js +67 -0
  53. package/dist/src/ox-input-quantifier.js.map +1 -0
  54. package/dist/src/ox-input-range.js +35 -38
  55. package/dist/src/ox-input-range.js.map +1 -1
  56. package/dist/src/ox-input-search.d.ts +1 -0
  57. package/dist/src/ox-input-search.js +27 -5
  58. package/dist/src/ox-input-search.js.map +1 -1
  59. package/dist/src/ox-input-unit.d.ts +17 -0
  60. package/dist/src/ox-input-unit.js +122 -0
  61. package/dist/src/ox-input-unit.js.map +1 -0
  62. package/dist/src/ox-input-value-map.d.ts +2 -2
  63. package/dist/src/ox-input-value-map.js +51 -15
  64. package/dist/src/ox-input-value-map.js.map +1 -1
  65. package/dist/src/ox-input-value-ranges.d.ts +2 -2
  66. package/dist/src/ox-input-value-ranges.js +50 -23
  67. package/dist/src/ox-input-value-ranges.js.map +1 -1
  68. package/dist/src/ox-input-work-shift.js +79 -44
  69. package/dist/src/ox-input-work-shift.js.map +1 -1
  70. package/dist/src/ox-select.js +12 -3
  71. package/dist/src/ox-select.js.map +1 -1
  72. package/dist/stories/ox-checkbox.stories.d.ts +39 -0
  73. package/dist/stories/ox-checkbox.stories.js +44 -0
  74. package/dist/stories/ox-checkbox.stories.js.map +1 -0
  75. package/dist/stories/ox-input-3dish.stories.d.ts +26 -0
  76. package/dist/stories/ox-input-3dish.stories.js +59 -0
  77. package/dist/stories/ox-input-3dish.stories.js.map +1 -0
  78. package/dist/stories/ox-input-barcode.stories.d.ts +43 -0
  79. package/dist/stories/ox-input-barcode.stories.js +59 -0
  80. package/dist/stories/ox-input-barcode.stories.js.map +1 -0
  81. package/dist/stories/ox-input-crontab.stories.d.ts +25 -0
  82. package/dist/stories/ox-input-crontab.stories.js +35 -0
  83. package/dist/stories/ox-input-crontab.stories.js.map +1 -0
  84. package/dist/stories/ox-input-duration.stories.d.ts +26 -0
  85. package/dist/stories/ox-input-duration.stories.js +37 -0
  86. package/dist/stories/ox-input-duration.stories.js.map +1 -0
  87. package/dist/stories/ox-input-file.stories.d.ts +49 -0
  88. package/dist/stories/ox-input-file.stories.js +48 -0
  89. package/dist/stories/ox-input-file.stories.js.map +1 -0
  90. package/dist/stories/{index.stories.d.ts → ox-input-key-values.stories.d.ts} +7 -11
  91. package/dist/stories/ox-input-key-values.stories.js +49 -0
  92. package/dist/stories/ox-input-key-values.stories.js.map +1 -0
  93. package/dist/stories/ox-input-multiple-colors.stories.d.ts +20 -0
  94. package/dist/stories/ox-input-multiple-colors.stories.js +167 -0
  95. package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -0
  96. package/dist/stories/ox-input-options.stories.d.ts +25 -0
  97. package/dist/stories/ox-input-options.stories.js +33 -0
  98. package/dist/stories/ox-input-options.stories.js.map +1 -0
  99. package/dist/stories/ox-input-partition-keys.stories.d.ts +25 -0
  100. package/dist/stories/ox-input-partition-keys.stories.js +37 -0
  101. package/dist/stories/ox-input-partition-keys.stories.js.map +1 -0
  102. package/dist/stories/ox-input-quantifier.stories.d.ts +25 -0
  103. package/dist/stories/ox-input-quantifier.stories.js +27 -0
  104. package/dist/stories/ox-input-quantifier.stories.js.map +1 -0
  105. package/dist/stories/ox-input-range.stories.d.ts +37 -0
  106. package/dist/stories/ox-input-range.stories.js +28 -0
  107. package/dist/stories/ox-input-range.stories.js.map +1 -0
  108. package/dist/stories/ox-input-search.stories.d.ts +33 -0
  109. package/dist/stories/ox-input-search.stories.js +35 -0
  110. package/dist/stories/ox-input-search.stories.js.map +1 -0
  111. package/dist/stories/ox-input-unit.stories.d.ts +40 -0
  112. package/dist/stories/ox-input-unit.stories.js +42 -0
  113. package/dist/stories/ox-input-unit.stories.js.map +1 -0
  114. package/dist/stories/ox-input-value-map.stories.d.ts +35 -0
  115. package/dist/stories/ox-input-value-map.stories.js +37 -0
  116. package/dist/stories/ox-input-value-map.stories.js.map +1 -0
  117. package/dist/stories/ox-input-value-ranges.stories.d.ts +35 -0
  118. package/dist/stories/ox-input-value-ranges.stories.js +37 -0
  119. package/dist/stories/ox-input-value-ranges.stories.js.map +1 -0
  120. package/dist/stories/ox-input-work-shift.stories.d.ts +26 -0
  121. package/dist/stories/ox-input-work-shift.stories.js +59 -0
  122. package/dist/stories/ox-input-work-shift.stories.js.map +1 -0
  123. package/dist/stories/ox-select-dynamic.stories.d.ts +28 -0
  124. package/dist/stories/ox-select-dynamic.stories.js +60 -0
  125. package/dist/stories/ox-select-dynamic.stories.js.map +1 -0
  126. package/dist/stories/ox-select.stories copy.d.ts +30 -0
  127. package/dist/stories/ox-select.stories copy.js +83 -0
  128. package/dist/stories/ox-select.stories copy.js.map +1 -0
  129. package/dist/stories/ox-select.stories.d.ts +30 -0
  130. package/dist/stories/ox-select.stories.js +83 -0
  131. package/dist/stories/ox-select.stories.js.map +1 -0
  132. package/dist/tsconfig.tsbuildinfo +1 -1
  133. package/package.json +16 -13
  134. package/src/index.ts +4 -2
  135. package/src/locales/en.ts +8 -0
  136. package/src/locales/ko.ts +8 -0
  137. package/src/locales/ms.ts +8 -0
  138. package/src/locales/zh.ts +8 -0
  139. package/src/ox-input-3dish.ts +24 -8
  140. package/src/ox-input-barcode.ts +67 -34
  141. package/src/ox-input-color.ts +17 -11
  142. package/src/ox-input-crontab.ts +30 -10
  143. package/src/ox-input-data.ts +2 -2
  144. package/src/ox-input-duration.ts +168 -0
  145. package/src/ox-input-file.ts +7 -6
  146. package/src/ox-input-key-values.ts +270 -0
  147. package/src/ox-input-multiple-colors.ts +29 -21
  148. package/src/ox-input-options.ts +54 -13
  149. package/src/ox-input-partition-keys.ts +51 -22
  150. package/src/ox-input-quantifier.ts +62 -0
  151. package/src/ox-input-range.ts +35 -38
  152. package/src/ox-input-search.ts +29 -5
  153. package/src/ox-input-unit.ts +123 -0
  154. package/src/ox-input-value-map.ts +52 -16
  155. package/src/ox-input-value-ranges.ts +52 -25
  156. package/src/ox-input-work-shift.ts +81 -44
  157. package/src/ox-select.ts +19 -5
  158. package/stories/ox-checkbox.stories.ts +69 -0
  159. package/stories/ox-input-3dish.stories.ts +73 -0
  160. package/stories/ox-input-barcode.stories.ts +85 -0
  161. package/stories/ox-input-code.stories.ts_ +51 -0
  162. package/stories/ox-input-crontab.stories.ts +49 -0
  163. package/stories/ox-input-duration.stories.ts +51 -0
  164. package/stories/ox-input-file.stories.ts +77 -0
  165. package/stories/ox-input-key-values.stories.ts +64 -0
  166. package/stories/ox-input-multiple-colors.stories.ts +178 -0
  167. package/stories/ox-input-options.stories.ts +47 -0
  168. package/stories/ox-input-partition-keys.stories.ts +51 -0
  169. package/stories/ox-input-quantifier.stories.ts +43 -0
  170. package/stories/ox-input-range.stories.ts +45 -0
  171. package/stories/ox-input-search.stories.ts +56 -0
  172. package/stories/ox-input-unit.stories.ts +66 -0
  173. package/stories/ox-input-value-map.stories.ts +58 -0
  174. package/stories/ox-input-value-ranges.stories.ts +58 -0
  175. package/stories/ox-input-work-shift.stories.ts +73 -0
  176. package/stories/ox-select.stories.ts +101 -0
  177. package/themes/app-theme.css +142 -0
  178. package/themes/input-theme.css +19 -0
  179. package/translations/en.json +45 -1
  180. package/translations/ko.json +43 -1
  181. package/translations/ms.json +43 -1
  182. package/translations/zh.json +43 -1
  183. package/xliff/en.xlf +24 -0
  184. package/xliff/ko.xlf +32 -0
  185. package/xliff/ms.xlf +24 -0
  186. package/xliff/zh.xlf +24 -0
  187. package/dist/stories/index.stories.js +0 -33
  188. package/dist/stories/index.stories.js.map +0 -1
  189. package/stories/index.stories.ts +0 -52
package/demo/index-multiple-colors.html CHANGED
@@ -7,13 +7,16 @@
7
7
  background: #fafafa;
8
8
  }
9
9
  </style>
10
+ <link href="/themes/app-theme.css" rel="stylesheet" />
11
+ <link href="/themes/input-theme.css" rel="stylesheet" />
12
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
10
13
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
14
  </head>
12
15
  <body>
13
16
  <form id="demo"></form>
14
17
 
15
18
  <script type="module">
16
- import { html, render } from 'lit'
19
+ import { html, css, render } from 'lit'
17
20
  import '../dist/src/ox-input-multiple-colors.js'
18
21
 
19
22
  const form = document.querySelector('#demo')
package/demo/index-partition-keys.html CHANGED
@@ -2,11 +2,8 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
5
+ <link href="/themes/app-theme.css" rel="stylesheet" />
6
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
10
7
  </head>
11
8
  <body>
12
9
  <form id="demo"></form>
package/demo/index-select.html CHANGED
@@ -70,7 +70,7 @@
70
70
  'B',
71
71
  'TOO LONG VALUE'
72
72
  ]}>
73
- <ox-popup-list multiple>
73
+ <ox-popup-list multiple with-search>
74
74
  <div option value="A">A</div>
75
75
  <div option value="B">B</div>
76
76
  <div option value="C">C</div>
package/demo/index.html CHANGED
@@ -2,6 +2,7 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
5
6
  <style>
6
7
  body {
7
8
  background: #fafafa;
@@ -11,6 +12,9 @@
11
12
  display: block;
12
13
  }
13
14
  </style>
15
+ <link href="/themes/app-theme.css" rel="stylesheet" />
16
+ <link href="/themes/input-theme.css" rel="stylesheet" />
17
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
14
18
  </head>
15
19
  <body>
16
20
  <a href="./index-3dish.html">3dish</a>
package/dist/src/index.d.ts CHANGED
@@ -17,5 +17,7 @@ export * from './ox-input-value-ranges.js';
17
17
  export * from './ox-input-value-map.js';
18
18
  export * from './ox-input-table.js';
19
19
  export * from './ox-input-scene-component-id.js';
20
- export * from './ox-input-crontab';
21
- export * from './ox-input-partition-keys';
20
+ export * from './ox-input-crontab.js';
21
+ export * from './ox-input-partition-keys.js';
22
+ export * from './ox-input-duration.js';
23
+ export * from './ox-input-quantifier.js';
package/dist/src/index.js CHANGED
@@ -17,6 +17,8 @@ export * from './ox-input-value-ranges.js';
17
17
  export * from './ox-input-value-map.js';
18
18
  export * from './ox-input-table.js';
19
19
  export * from './ox-input-scene-component-id.js';
20
- export * from './ox-input-crontab';
21
- export * from './ox-input-partition-keys';
20
+ export * from './ox-input-crontab.js';
21
+ export * from './ox-input-partition-keys.js';
22
+ export * from './ox-input-duration.js';
23
+ export * from './ox-input-quantifier.js';
22
24
  //# 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,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\nexport * from './ox-input-partition-keys'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\n"]}
package/dist/src/locales/en.d.ts CHANGED
@@ -6,4 +6,12 @@ export declare const templates: {
6
6
  sf95fdd7da4fc2295: string;
7
7
  s6aacb9fbb71a1d91: string;
8
8
  s075cb2f53173bd8a: string;
9
+ sc4bcadba8e631b86: string;
10
+ s63c6e58ec805a9eb: string;
11
+ sfcc01216c601ec9e: string;
12
+ s685db98545dc9448: string;
13
+ s77c8560cf63a372d: string;
14
+ s42670fc325584e15: string;
15
+ s29ec9210c8a8222e: string;
16
+ scff69aa7239287b0: string;
9
17
  };
package/dist/src/locales/en.js CHANGED
@@ -10,5 +10,13 @@ export const templates = {
10
10
  'sf95fdd7da4fc2295': `translate`,
11
11
  's6aacb9fbb71a1d91': `scale`,
12
12
  's075cb2f53173bd8a': `rotate`,
13
+ 'sc4bcadba8e631b86': `name`,
14
+ 's63c6e58ec805a9eb': `from date`,
15
+ 'sfcc01216c601ec9e': `from time`,
16
+ 's685db98545dc9448': `to date`,
17
+ 's77c8560cf63a372d': `to time`,
18
+ 's42670fc325584e15': `The day before`,
19
+ 's29ec9210c8a8222e': `The day`,
20
+ 'scff69aa7239287b0': `The day after`,
13
21
  };
14
22
  //# sourceMappingURL=en.js.map
package/dist/src/locales/en.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n };\n "]}
1
+ {"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
package/dist/src/locales/ko.d.ts CHANGED
@@ -1,9 +1,17 @@
1
1
  export declare const templates: {
2
2
  s075cb2f53173bd8a: string;
3
+ s29ec9210c8a8222e: string;
3
4
  s31be7a0b4a5853dd: string;
5
+ s42670fc325584e15: string;
6
+ s63c6e58ec805a9eb: string;
7
+ s685db98545dc9448: string;
4
8
  s6aacb9fbb71a1d91: string;
9
+ s77c8560cf63a372d: string;
5
10
  s9f41d726ecec72c2: string;
11
+ sc4bcadba8e631b86: string;
12
+ scff69aa7239287b0: string;
6
13
  sd793f87f18747a63: string;
7
14
  sf95fdd7da4fc2295: string;
8
15
  sf9b52aece5aed0f7: string;
16
+ sfcc01216c601ec9e: string;
9
17
  };
package/dist/src/locales/ko.js CHANGED
@@ -4,11 +4,19 @@
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
6
  's075cb2f53173bd8a': `회전`,
7
+ 's29ec9210c8a8222e': `당일`,
7
8
  's31be7a0b4a5853dd': `z 축`,
9
+ 's42670fc325584e15': `전날`,
10
+ 's63c6e58ec805a9eb': `시작일`,
11
+ 's685db98545dc9448': `완료일`,
8
12
  's6aacb9fbb71a1d91': `스케일`,
13
+ 's77c8560cf63a372d': `완료시간`,
9
14
  's9f41d726ecec72c2': `y 축`,
15
+ 'sc4bcadba8e631b86': `이름`,
16
+ 'scff69aa7239287b0': `다음날`,
10
17
  'sd793f87f18747a63': `체적`,
11
18
  'sf95fdd7da4fc2295': `변환`,
12
19
  'sf9b52aece5aed0f7': `x 축`,
20
+ 'sfcc01216c601ec9e': `시작시간`,
13
21
  };
14
22
  //# sourceMappingURL=ko.js.map
package/dist/src/locales/ko.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ko.js","sourceRoot":"","sources":["../../../src/locales/ko.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;CACrB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `회전`,\n's31be7a0b4a5853dd': `z 축`,\n's6aacb9fbb71a1d91': `스케일`,\n's9f41d726ecec72c2': `y 축`,\n'sd793f87f18747a63': `체적`,\n'sf95fdd7da4fc2295': `변환`,\n'sf9b52aece5aed0f7': `x 축`,\n };\n "]}
1
+ {"version":3,"file":"ko.js","sourceRoot":"","sources":["../../../src/locales/ko.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;CACtB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `회전`,\n's29ec9210c8a8222e': `당일`,\n's31be7a0b4a5853dd': `z 축`,\n's42670fc325584e15': `전날`,\n's63c6e58ec805a9eb': `시작일`,\n's685db98545dc9448': `완료일`,\n's6aacb9fbb71a1d91': `스케일`,\n's77c8560cf63a372d': `완료시간`,\n's9f41d726ecec72c2': `y 축`,\n'sc4bcadba8e631b86': `이름`,\n'scff69aa7239287b0': `다음날`,\n'sd793f87f18747a63': `체적`,\n'sf95fdd7da4fc2295': `변환`,\n'sf9b52aece5aed0f7': `x 축`,\n'sfcc01216c601ec9e': `시작시간`,\n };\n "]}
package/dist/src/locales/ms.d.ts CHANGED
@@ -6,4 +6,12 @@ export declare const templates: {
6
6
  sf95fdd7da4fc2295: string;
7
7
  s6aacb9fbb71a1d91: string;
8
8
  s075cb2f53173bd8a: string;
9
+ sc4bcadba8e631b86: string;
10
+ s63c6e58ec805a9eb: string;
11
+ sfcc01216c601ec9e: string;
12
+ s685db98545dc9448: string;
13
+ s77c8560cf63a372d: string;
14
+ s42670fc325584e15: string;
15
+ s29ec9210c8a8222e: string;
16
+ scff69aa7239287b0: string;
9
17
  };
package/dist/src/locales/ms.js CHANGED
@@ -10,5 +10,13 @@ export const templates = {
10
10
  'sf95fdd7da4fc2295': `translate`,
11
11
  's6aacb9fbb71a1d91': `scale`,
12
12
  's075cb2f53173bd8a': `rotate`,
13
+ 'sc4bcadba8e631b86': `name`,
14
+ 's63c6e58ec805a9eb': `from date`,
15
+ 'sfcc01216c601ec9e': `from time`,
16
+ 's685db98545dc9448': `to date`,
17
+ 's77c8560cf63a372d': `to time`,
18
+ 's42670fc325584e15': `The day before`,
19
+ 's29ec9210c8a8222e': `The day`,
20
+ 'scff69aa7239287b0': `The day after`,
13
21
  };
14
22
  //# sourceMappingURL=ms.js.map
package/dist/src/locales/ms.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n };\n "]}
1
+ {"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
package/dist/src/locales/zh.d.ts CHANGED
@@ -6,4 +6,12 @@ export declare const templates: {
6
6
  sf95fdd7da4fc2295: string;
7
7
  s6aacb9fbb71a1d91: string;
8
8
  s075cb2f53173bd8a: string;
9
+ sc4bcadba8e631b86: string;
10
+ s63c6e58ec805a9eb: string;
11
+ sfcc01216c601ec9e: string;
12
+ s685db98545dc9448: string;
13
+ s77c8560cf63a372d: string;
14
+ s42670fc325584e15: string;
15
+ s29ec9210c8a8222e: string;
16
+ scff69aa7239287b0: string;
9
17
  };
package/dist/src/locales/zh.js CHANGED
@@ -10,5 +10,13 @@ export const templates = {
10
10
  'sf95fdd7da4fc2295': `translate`,
11
11
  's6aacb9fbb71a1d91': `scale`,
12
12
  's075cb2f53173bd8a': `rotate`,
13
+ 'sc4bcadba8e631b86': `name`,
14
+ 's63c6e58ec805a9eb': `from date`,
15
+ 'sfcc01216c601ec9e': `from time`,
16
+ 's685db98545dc9448': `to date`,
17
+ 's77c8560cf63a372d': `to time`,
18
+ 's42670fc325584e15': `The day before`,
19
+ 's29ec9210c8a8222e': `The day`,
20
+ 'scff69aa7239287b0': `The day after`,
13
21
  };
14
22
  //# sourceMappingURL=zh.js.map
package/dist/src/locales/zh.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n };\n "]}
1
+ {"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
package/dist/src/ox-input-3dish.js CHANGED
@@ -11,21 +11,37 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
11
11
  css `
12
12
  :host {
13
13
  display: grid;
14
- grid-template-columns: repeat(4, minmax(50px, 1fr));
15
- grid-gap: 5px;
16
- grid-auto-rows: minmax(24px, auto);
17
- }
18
-
19
- :host > * {
20
- grid-column: span 1;
14
+ grid-template-columns: repeat(7, minmax(50px, 1fr));
15
+ grid-gap: var(--margin-default);
21
16
  }
22
17
 
23
18
  label {
24
19
  text-align: right;
20
+ align-self: center;
21
+ font: var(--label-font);
22
+ color: var(--label-color);
23
+ text-transform: var(--label-text-transform);
24
+ grid-column: span 1;
25
25
  }
26
26
 
27
27
  span {
28
+ grid-column: span 2;
28
29
  text-align: center;
30
+ font: var(--label-font);
31
+ color: var(--legend-color);
32
+ }
33
+
34
+ input {
35
+ grid-column: span 2;
36
+ border: 0;
37
+ border-bottom: var(--border-dark-color);
38
+ padding: var(--input-padding);
39
+ font: var(--input-font);
40
+ color: var(--primary-text-color);
41
+ }
42
+ input:focus {
43
+ outline: none;
44
+ border-bottom: 1px solid var(--primary-color);
29
45
  }
30
46
  `
31
47
  ]; }
@@ -118,7 +134,7 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
118
134
  }
119
135
  render() {
120
136
  return html `
121
- <span></span> <span>${msg('x-axes')}</span>
137
+ <label></label> <span>${msg('x-axes')}</span>
122
138
  <span>${msg('y-axes')}</span>
123
139
  <span>${msg('z-axes')}</span>
124
140
 
package/dist/src/ox-input-3dish.js.map CHANGED
@@ -1 +1 @@
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 */\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputAngle } from './ox-input-angle'\n\n@localized()\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>${msg('x-axes')}</span>\n <span>${msg('y-axes')}</span>\n <span>${msg('z-axes')}</span>\n\n <label>${msg('dimension')}</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>${msg('translate')}</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>${msg('scale')}</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>${msg('rotate')}</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"]}
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 */\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputAngle } from './ox-input-angle'\n\n@localized()\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(7, minmax(50px, 1fr));\n grid-gap: var(--margin-default);\n }\n\n label {\n text-align: right;\n align-self: center;\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n grid-column: span 1;\n }\n\n span {\n grid-column: span 2;\n text-align: center;\n font: var(--label-font);\n color: var(--legend-color);\n }\n\n input {\n grid-column: span 2;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\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 <label></label> <span>${msg('x-axes')}</span>\n <span>${msg('y-axes')}</span>\n <span>${msg('z-axes')}</span>\n\n <label>${msg('dimension')}</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>${msg('translate')}</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>${msg('scale')}</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>${msg('rotate')}</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"]}
package/dist/src/ox-input-barcode.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import '@operato/popup/ox-popup.js';
2
+ import { OxPopup } from '@operato/popup';
2
3
  import { BrowserMultiFormatReader } from '@zxing/library';
3
4
  import { OxFormField } from './ox-form-field.js';
4
- import { OxPopup } from '@operato/popup';
5
5
  export declare class OxInputBarcode extends OxFormField {
6
6
  static styles: import("lit").CSSResult[];
7
7
  scannable?: boolean;
8
8
  withoutEnter?: boolean;
9
9
  value?: string;
10
+ englishOnly?: boolean;
11
+ selectAfterChange?: boolean;
10
12
  stream?: MediaStream;
11
13
  reader?: BrowserMultiFormatReader;
12
14
  input: HTMLInputElement;
@@ -15,7 +17,8 @@ export declare class OxInputBarcode extends OxFormField {
15
17
  connectedCallback(): void;
16
18
  disconnectedCallback(): void;
17
19
  render(): import("lit-html").TemplateResult<1>;
18
- onChange(e: Event): void;
20
+ onInputChange(e: Event): void;
21
+ onInputKeyDown(e: KeyboardEvent): void;
19
22
  scan(e: MouseEvent): Promise<void>;
20
23
  stopScan(): void;
21
24
  }
package/dist/src/ox-input-barcode.js CHANGED
@@ -12,10 +12,6 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
12
12
  display: flex;
13
13
  align-items: center;
14
14
  border: none;
15
- overflow: hidden;
16
- background-color: #fff;
17
-
18
- padding: var(--custom-input-barcode-field-padding) !important;
19
15
  }
20
16
 
21
17
  * {
@@ -27,23 +23,27 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
27
23
  }
28
24
 
29
25
  input {
30
- flex: 1 !important;
31
- border: none;
32
- font: var(--custom-input-barcode-field-font);
33
- width: 10px;
34
- flex-grow: 1;
26
+ flex: 1;
27
+ width: 10px; /* intentionally width set */
28
+ border: 0;
29
+ border-bottom: var(--border-dark-color);
30
+ padding: var(--input-padding);
31
+ padding-right: 35px;
32
+ font: var(--input-font);
33
+ color: var(--primary-text-color);
34
+ }
35
+ input:focus {
36
+ outline: none;
37
+ border-bottom: 1px solid var(--primary-color);
35
38
  }
36
39
 
37
40
  #scan-button {
38
41
  display: block;
42
+ position: relative;
43
+ margin-left: -30px;
39
44
  width: 30px;
40
- height: 100%;
41
- min-height: 24px;
42
45
  border: none;
43
- background-color: transparent;
44
- background-repeat: no-repeat;
45
- background-position: center;
46
- background-image: var(--barcodescan-input-button-icon);
46
+ background: var(--barcodescan-input-button-icon) no-repeat center center;
47
47
  }
48
48
 
49
49
  #scan-button[hidden] {
@@ -103,9 +103,8 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
103
103
  <input
104
104
  type="text"
105
105
  .value=${this.value || ''}
106
- maxlength="50"
107
- @change=${(e) => this.onChange(e)}
108
- @keypress=${(e) => this.onChange(e)}
106
+ @change=${(e) => this.onInputChange(e)}
107
+ @keydown=${(e) => this.onInputKeyDown(e)}
109
108
  />
110
109
  <button
111
110
  ?hidden=${!this.scannable}
@@ -124,11 +123,41 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
124
123
  </ox-popup>
125
124
  `;
126
125
  }
127
- onChange(e) {
126
+ onInputChange(e) {
128
127
  e.stopPropagation();
129
- this.value = e.target?.value;
130
- //@ts-ignore
131
- this.dispatchEvent(new e.constructor(e.type, e));
128
+ if (this.englishOnly) {
129
+ /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */
130
+ this.value = this.input.value = this.input.value?.replace(/[^\x00-\x7F]/g, '');
131
+ }
132
+ else {
133
+ this.value = this.input.value;
134
+ }
135
+ if (this.selectAfterChange) {
136
+ requestAnimationFrame(() => {
137
+ this.input.select();
138
+ });
139
+ }
140
+ this.dispatchEvent(new CustomEvent('change', {
141
+ detail: this.value
142
+ }));
143
+ }
144
+ onInputKeyDown(e) {
145
+ if (e.key === 'Enter' && !e.isComposing) {
146
+ /* Even if the value has not changed, the enter key triggers a change event. */
147
+ e.preventDefault(); /* Prevent change event from occurring twice. */
148
+ this.input.dispatchEvent(new CustomEvent('change'));
149
+ }
150
+ else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {
151
+ e.stopPropagation();
152
+ e.preventDefault();
153
+ /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */
154
+ const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase();
155
+ const value = this.input.value;
156
+ const start = this.input.selectionStart || 0;
157
+ const end = this.input.selectionEnd || start;
158
+ this.input.value = [value.substring(0, start), key, value.substring(end)].join('');
159
+ this.input.setSelectionRange(start + 1, start + 1);
160
+ }
132
161
  }
133
162
  async scan(e) {
134
163
  try {
@@ -144,12 +173,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
144
173
  input.focus();
145
174
  this.value = input.value = String(result);
146
175
  if (!this.withoutEnter) {
147
- input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }));
148
- input.dispatchEvent(new CustomEvent('change', {
149
- bubbles: true,
150
- composed: true,
151
- detail: this.value
152
- }));
176
+ input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
153
177
  }
154
178
  }
155
179
  else {
@@ -170,9 +194,9 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
170
194
  }
171
195
  }
172
196
  stopScan() {
173
- this.video.pause();
174
- this.stream && this.stream.getTracks().forEach(track => track.stop());
175
- this.reader && this.reader.reset();
197
+ this.video?.pause();
198
+ this.stream?.getTracks().forEach(track => track.stop());
199
+ this.reader?.reset();
176
200
  delete this.stream;
177
201
  delete this.reader;
178
202
  }
@@ -186,6 +210,12 @@ __decorate([
186
210
  __decorate([
187
211
  property({ type: String })
188
212
  ], OxInputBarcode.prototype, "value", void 0);
213
+ __decorate([
214
+ property({ attribute: 'english-only', type: Boolean })
215
+ ], OxInputBarcode.prototype, "englishOnly", void 0);
216
+ __decorate([
217
+ property({ attribute: 'select-after-change', type: Boolean })
218
+ ], OxInputBarcode.prototype, "selectAfterChange", void 0);
189
219
  __decorate([
190
220
  state()
191
221
  ], OxInputBarcode.prototype, "stream", void 0);
package/dist/src/ox-input-barcode.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { BrowserMultiFormatReader } from '@zxing/library'\nimport { OxFormField } from './ox-form-field.js'\nimport { OxPopup } from '@operato/popup'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1;\n width: 10px; /* intentionally width set */\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n padding-right: 35px;\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n #scan-button {\n display: block;\n position: relative;\n margin-left: -30px;\n width: 30px;\n border: none;\n background: var(--barcodescan-input-button-icon) no-repeat center center;\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this.onInputChange(e)}\n @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onInputChange(e: Event) {\n e.stopPropagation()\n\n if (this.englishOnly) {\n /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n } else {\n this.value = this.input.value\n }\n\n if (this.selectAfterChange) {\n requestAnimationFrame(() => {\n this.input.select()\n })\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value\n })\n )\n }\n\n onInputKeyDown(e: KeyboardEvent) {\n if (e.key === 'Enter' && !e.isComposing) {\n /* Even if the value has not changed, the enter key triggers a change event. */\n e.preventDefault() /* Prevent change event from occurring twice. */\n\n this.input.dispatchEvent(new CustomEvent('change'))\n } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n e.stopPropagation()\n e.preventDefault()\n\n /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n const value = this.input.value\n\n const start = this.input.selectionStart || 0\n const end = this.input.selectionEnd || start\n\n this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n this.input.setSelectionRange(start + 1, start + 1)\n }\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video?.pause()\n\n this.stream?.getTracks().forEach(track => track.stop())\n this.reader?.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}