@api-client/ui 0.5.39 → 0.5.41

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 (292) hide show
  1. package/build/src/elements/contextual-menu/{internals/ContextualMenu.d.ts → ContextualMenu.d.ts} +11 -6
  2. package/build/src/elements/contextual-menu/ContextualMenu.d.ts.map +1 -0
  3. package/build/src/elements/contextual-menu/{internals/ContextualMenu.js → ContextualMenu.js} +25 -3
  4. package/build/src/elements/contextual-menu/ContextualMenu.js.map +1 -0
  5. package/build/src/elements/contextual-menu/internals/types.d.ts +16 -7
  6. package/build/src/elements/contextual-menu/internals/types.d.ts.map +1 -1
  7. package/build/src/elements/contextual-menu/internals/types.js.map +1 -1
  8. package/build/tsconfig.tsbuildinfo +1 -0
  9. package/package.json +1 -1
  10. package/src/elements/contextual-menu/{internals/ContextualMenu.ts → ContextualMenu.ts} +31 -7
  11. package/src/elements/contextual-menu/internals/types.ts +17 -7
  12. package/.aiexclude +0 -3
  13. package/.cursor/rules/html-and-css-best-practices.mdc +0 -63
  14. package/.cursor/rules/lit-best-practices.mdc +0 -89
  15. package/.editorconfig +0 -29
  16. package/.github/CONTRIBUTING.md +0 -24
  17. package/.github/instructions/html-and-css-best-practices.instructions.md +0 -70
  18. package/.github/instructions/lit-best-practices.instructions.md +0 -90
  19. package/.github/release.yml +0 -14
  20. package/.github/stale.yml +0 -23
  21. package/.github/workflows/auto-release.yml +0 -182
  22. package/.github/workflows/release.yml +0 -82
  23. package/.prettierrc.js +0 -14
  24. package/.vscode/settings.json +0 -18
  25. package/RELEASE.md +0 -163
  26. package/RELEASE_SETUP.md +0 -235
  27. package/build/src/demo/DemoPage.d.ts +0 -81
  28. package/build/src/demo/DemoPage.d.ts.map +0 -1
  29. package/build/src/demo/DemoPage.js +0 -175
  30. package/build/src/demo/DemoPage.js.map +0 -1
  31. package/build/src/demo/DemoStyles.d.ts +0 -3
  32. package/build/src/demo/DemoStyles.d.ts.map +0 -1
  33. package/build/src/demo/DemoStyles.js +0 -60
  34. package/build/src/demo/DemoStyles.js.map +0 -1
  35. package/build/src/elements/contextual-menu/internals/ContextualMenu.d.ts.map +0 -1
  36. package/build/src/elements/contextual-menu/internals/ContextualMenu.js.map +0 -1
  37. package/build/test/elements/navigation/Navigation.test.d.ts +0 -3
  38. package/build/test/elements/navigation/Navigation.test.d.ts.map +0 -1
  39. package/build/test/elements/navigation/Navigation.test.js +0 -113
  40. package/build/test/elements/navigation/Navigation.test.js.map +0 -1
  41. package/commitlint.config.cjs +0 -2
  42. package/demo/elements/authorization/AuthPlugin.js +0 -57
  43. package/demo/elements/authorization/AuthProxy.js +0 -215
  44. package/demo/elements/authorization/api-key.html +0 -27
  45. package/demo/elements/authorization/api-key.ts +0 -44
  46. package/demo/elements/authorization/basic.html +0 -27
  47. package/demo/elements/authorization/basic.ts +0 -43
  48. package/demo/elements/authorization/bearer.html +0 -27
  49. package/demo/elements/authorization/bearer.ts +0 -43
  50. package/demo/elements/authorization/env.js +0 -8
  51. package/demo/elements/authorization/index.html +0 -44
  52. package/demo/elements/authorization/ntlm.html +0 -27
  53. package/demo/elements/authorization/ntlm.ts +0 -43
  54. package/demo/elements/authorization/oauth-authorize.html +0 -75
  55. package/demo/elements/authorization/oauth-authorize.ts +0 -40
  56. package/demo/elements/authorization/oauth-error.html +0 -18
  57. package/demo/elements/authorization/oauth-error.ts +0 -10
  58. package/demo/elements/authorization/oauth-popup.html +0 -36
  59. package/demo/elements/authorization/oauth2.html +0 -27
  60. package/demo/elements/authorization/oauth2.ts +0 -100
  61. package/demo/elements/authorization/oidc.html +0 -27
  62. package/demo/elements/authorization/oidc.ts +0 -139
  63. package/demo/elements/authorization/private.crt +0 -31
  64. package/demo/elements/authorization/private.csr +0 -28
  65. package/demo/elements/authorization/private.key +0 -51
  66. package/demo/elements/authorization/private.pem +0 -31
  67. package/demo/elements/authorization/redirect.html +0 -20
  68. package/demo/elements/authorization/ssl-commands.sh +0 -30
  69. package/demo/elements/authorization/ssl.conf +0 -24
  70. package/demo/elements/autocomplete/index.html +0 -64
  71. package/demo/elements/autocomplete/index.ts +0 -171
  72. package/demo/elements/code-editor/CodeEditorDemo.ts +0 -173
  73. package/demo/elements/code-editor/index.html +0 -19
  74. package/demo/elements/context-menu/DemoIcons.ts +0 -21
  75. package/demo/elements/context-menu/basic.html +0 -25
  76. package/demo/elements/context-menu/basic.ts +0 -119
  77. package/demo/elements/context-menu/custom-data.html +0 -25
  78. package/demo/elements/context-menu/custom-data.ts +0 -62
  79. package/demo/elements/context-menu/demo.css +0 -28
  80. package/demo/elements/context-menu/enabled-state.html +0 -25
  81. package/demo/elements/context-menu/enabled-state.ts +0 -73
  82. package/demo/elements/context-menu/icons.html +0 -25
  83. package/demo/elements/context-menu/icons.ts +0 -64
  84. package/demo/elements/context-menu/index.html +0 -43
  85. package/demo/elements/context-menu/nested.html +0 -25
  86. package/demo/elements/context-menu/nestedt.ts +0 -152
  87. package/demo/elements/context-menu/no-execute.html +0 -25
  88. package/demo/elements/context-menu/no-execute.ts +0 -134
  89. package/demo/elements/context-menu/radio-menu.html +0 -25
  90. package/demo/elements/context-menu/radio-menu.ts +0 -83
  91. package/demo/elements/context-menu/separators.html +0 -25
  92. package/demo/elements/context-menu/separators.ts +0 -172
  93. package/demo/elements/currency/index.html +0 -91
  94. package/demo/elements/currency/index.ts +0 -352
  95. package/demo/elements/environment/environment-editor.html +0 -20
  96. package/demo/elements/environment/environment-editor.ts +0 -49
  97. package/demo/elements/environment/index.html +0 -33
  98. package/demo/elements/environment/server-editor.html +0 -20
  99. package/demo/elements/environment/server-editor.ts +0 -67
  100. package/demo/elements/environment/variables-editor.html +0 -20
  101. package/demo/elements/environment/variables-editor.ts +0 -94
  102. package/demo/elements/har/har-viewer.html +0 -20
  103. package/demo/elements/har/har-viewer.ts +0 -76
  104. package/demo/elements/har/har1.har +0 -3044
  105. package/demo/elements/har/har2.json +0 -439
  106. package/demo/elements/har/index.html +0 -26
  107. package/demo/elements/highlight/example.md +0 -27
  108. package/demo/elements/highlight/index.html +0 -31
  109. package/demo/elements/highlight/marked-highlight.html +0 -132
  110. package/demo/elements/highlight/marked-highlight.ts +0 -22
  111. package/demo/elements/highlight/prism-highlight.html +0 -62
  112. package/demo/elements/highlight/prism-highlight.ts +0 -17
  113. package/demo/elements/http/body-editor.html +0 -17
  114. package/demo/elements/http/body-editor.ts +0 -115
  115. package/demo/elements/http/headers.html +0 -17
  116. package/demo/elements/http/headers.ts +0 -59
  117. package/demo/elements/http/http-assertions.html +0 -20
  118. package/demo/elements/http/http-assertions.ts +0 -89
  119. package/demo/elements/http/http-flows.html +0 -23
  120. package/demo/elements/http/http-flows.ts +0 -89
  121. package/demo/elements/http/index.html +0 -45
  122. package/demo/elements/http/request-editor.html +0 -26
  123. package/demo/elements/http/request-editor.ts +0 -197
  124. package/demo/elements/http/request-log.html +0 -16
  125. package/demo/elements/http/request-log.ts +0 -136
  126. package/demo/elements/http/url-editing.html +0 -17
  127. package/demo/elements/http/url-editing.ts +0 -112
  128. package/demo/elements/icons/index.html +0 -81
  129. package/demo/elements/icons/index.ts +0 -52
  130. package/demo/elements/index.html +0 -72
  131. package/demo/elements/mention-textarea/index.html +0 -19
  132. package/demo/elements/mention-textarea/index.ts +0 -205
  133. package/demo/elements/navigation/navigation-item.html +0 -49
  134. package/demo/elements/navigation/navigation-item.ts +0 -131
  135. package/demo/elements/navigation/navigation.html +0 -20
  136. package/demo/elements/navigation/navigation.ts +0 -45
  137. package/demo/elements/project/index.html +0 -29
  138. package/demo/elements/project/project-run-report.html +0 -20
  139. package/demo/elements/project/project-run-report.ts +0 -132
  140. package/demo/elements/project/request-editor.html +0 -23
  141. package/demo/elements/project/request-editor.ts +0 -232
  142. package/demo/elements/user/user-avatar.html +0 -17
  143. package/demo/elements/user/user-avatar.ts +0 -60
  144. package/demo/env.js +0 -4
  145. package/demo/index.html +0 -34
  146. package/demo/layout/index.html +0 -94
  147. package/demo/layout/index.ts +0 -190
  148. package/demo/md/DemoStyles.ts +0 -61
  149. package/demo/md/UiDemoPage.ts +0 -6
  150. package/demo/md/buttons/button.html +0 -121
  151. package/demo/md/buttons/button.ts +0 -246
  152. package/demo/md/buttons/group.html +0 -36
  153. package/demo/md/buttons/group.ts +0 -171
  154. package/demo/md/checkbox/index.html +0 -39
  155. package/demo/md/checkbox/index.ts +0 -220
  156. package/demo/md/chip/chip.html +0 -70
  157. package/demo/md/chip/chip.ts +0 -219
  158. package/demo/md/chip/pawel6c9a.jpg +0 -0
  159. package/demo/md/collapse/CustomDetail.ts +0 -89
  160. package/demo/md/collapse/collapse.html +0 -21
  161. package/demo/md/collapse/collapse.ts +0 -78
  162. package/demo/md/date-picker/date-picker.ts +0 -336
  163. package/demo/md/date-picker/index.html +0 -171
  164. package/demo/md/dialog/confirm-dialog.html +0 -49
  165. package/demo/md/dialog/confirm-dialog.ts +0 -121
  166. package/demo/md/dialog/dialog.html +0 -25
  167. package/demo/md/dialog/dialog.ts +0 -468
  168. package/demo/md/dropdown-list/index.html +0 -31
  169. package/demo/md/dropdown-list/index.ts +0 -158
  170. package/demo/md/icon-button/index.html +0 -122
  171. package/demo/md/icon-button/index.ts +0 -132
  172. package/demo/md/index.html +0 -73
  173. package/demo/md/inputs/input.html +0 -73
  174. package/demo/md/inputs/input.ts +0 -278
  175. package/demo/md/inputs/radio.html +0 -39
  176. package/demo/md/inputs/radio.ts +0 -156
  177. package/demo/md/inputs/switch.html +0 -45
  178. package/demo/md/inputs/switch.ts +0 -144
  179. package/demo/md/list/list.html +0 -65
  180. package/demo/md/list/list.ts +0 -204
  181. package/demo/md/listbox/listbox.html +0 -31
  182. package/demo/md/listbox/listbox.ts +0 -27
  183. package/demo/md/menu/index.html +0 -19
  184. package/demo/md/menu/index.ts +0 -514
  185. package/demo/md/notification/snack.html +0 -21
  186. package/demo/md/notification/snack.ts +0 -70
  187. package/demo/md/progress/progress.html +0 -46
  188. package/demo/md/progress/progress.ts +0 -161
  189. package/demo/md/segmented-button/index.html +0 -21
  190. package/demo/md/segmented-button/index.ts +0 -55
  191. package/demo/md/select/index.html +0 -16
  192. package/demo/md/select/index.ts +0 -217
  193. package/demo/md/tabs/tabs.html +0 -40
  194. package/demo/md/tabs/tabs.ts +0 -214
  195. package/demo/oauth-popup.html +0 -36
  196. package/demo/page.css +0 -8
  197. package/demo/resources/calendar-month.png +0 -0
  198. package/demo/resources/favorite.png +0 -0
  199. package/demo/resources/fingerprint.png +0 -0
  200. package/demo/resources/home-work.png +0 -0
  201. package/demo/resources/mood.png +0 -0
  202. package/demo/resources/print.png +0 -0
  203. package/demo/resources/stars.png +0 -0
  204. package/demo/resources/theaters.png +0 -0
  205. package/demo/tsconfig.json +0 -4
  206. package/eslint.config.js +0 -97
  207. package/scripts/copy-assets.js +0 -21
  208. package/scripts/release.js +0 -66
  209. package/src/demo/DemoPage.ts +0 -169
  210. package/src/demo/DemoStyles.ts +0 -60
  211. package/test/README.md +0 -375
  212. package/test/contextual-menu/ContextMenu.test.ts +0 -760
  213. package/test/contextual-menu/ContextMenuElement.test.ts +0 -569
  214. package/test/core/activity.spec.ts +0 -413
  215. package/test/core/activity_manager.spec.ts +0 -544
  216. package/test/core/application.spec.ts +0 -218
  217. package/test/core/fragment.spec.ts +0 -565
  218. package/test/core/fragment_manager.spec.ts +0 -404
  219. package/test/core/live_data.spec.ts +0 -558
  220. package/test/core/renderer.spec.ts +0 -113
  221. package/test/dom-assertions.test.ts +0 -182
  222. package/test/elements/MonacoSetup.ts +0 -65
  223. package/test/elements/authorization/basic-method.test.ts +0 -177
  224. package/test/elements/authorization/bearer-method.test.ts +0 -143
  225. package/test/elements/authorization/ntlm-method.test.ts +0 -219
  226. package/test/elements/authorization/oauth2-client-credentials-method.test.ts +0 -334
  227. package/test/elements/authorization/oauth2-code-method.test.ts +0 -320
  228. package/test/elements/authorization/oauth2-custom-grant-method.test.ts +0 -255
  229. package/test/elements/authorization/oauth2-device-code-method.test.ts +0 -371
  230. package/test/elements/authorization/oauth2-implicit-method.test.ts +0 -407
  231. package/test/elements/authorization/oauth2-jwt-method.test.ts +0 -217
  232. package/test/elements/authorization/oauth2-password-method.test.ts +0 -275
  233. package/test/elements/authorization/openid-method.test.ts +0 -591
  234. package/test/elements/autocomplete/autocomplete-input.spec.ts +0 -646
  235. package/test/elements/code-editor/code-editor.accessibility.test.ts +0 -298
  236. package/test/elements/code-editor/code-editor.test.ts +0 -574
  237. package/test/elements/currency/CurrencyPicker.accessibility.test.ts +0 -328
  238. package/test/elements/currency/CurrencyPicker.core.test.ts +0 -318
  239. package/test/elements/currency/CurrencyPicker.integration.test.ts +0 -482
  240. package/test/elements/currency/CurrencyPicker.test.ts +0 -486
  241. package/test/elements/data-table/DataTable.browser.test.ts +0 -649
  242. package/test/elements/har/HarUtils.test.ts +0 -45
  243. package/test/elements/har/HarViewerElement.test.ts +0 -687
  244. package/test/elements/har/test-data/har1.har +0 -3044
  245. package/test/elements/highlight/MarkedHighlightElement.test.ts +0 -452
  246. package/test/elements/highlight/PrismHighlightElement.test.ts +0 -79
  247. package/test/elements/highlight/PrismHighlighter.test.ts +0 -94
  248. package/test/elements/highlight/remoteSanitization.md +0 -1
  249. package/test/elements/highlight/test.md +0 -3
  250. package/test/elements/highlight/test1.md +0 -3
  251. package/test/elements/highlight/test2.md +0 -1
  252. package/test/elements/http/BodyFormdataEditorElement.test.ts +0 -482
  253. package/test/elements/http/BodyMultipartEditorElement.test.ts +0 -658
  254. package/test/elements/http/BodyRawEditorElement.test.ts +0 -90
  255. package/test/elements/http/CertificateAdd.test.ts +0 -457
  256. package/test/elements/http/HttpAssertions.test.ts +0 -994
  257. package/test/elements/http/HttpFlows.test.ts +0 -502
  258. package/test/elements/http/UrlEncodeUtils.test.ts +0 -202
  259. package/test/elements/layout/SplitItem.test.ts +0 -440
  260. package/test/elements/layout/SplitLayoutManager.test.ts +0 -1501
  261. package/test/elements/layout/SplitPanel.test.ts +0 -1109
  262. package/test/elements/mention-textarea/MentionTextArea.basic.test.ts +0 -114
  263. package/test/elements/mention-textarea/MentionTextArea.test.ts +0 -613
  264. package/test/elements/navigation/Navigation.test.ts +0 -120
  265. package/test/env.ts +0 -15
  266. package/test/events/EventTypes.test.ts +0 -363
  267. package/test/events/EventsTestHelpers.ts +0 -16
  268. package/test/helpers/TestUtils.ts +0 -243
  269. package/test/helpers/UiMock.ts +0 -185
  270. package/test/lib/Dom.test.ts +0 -231
  271. package/test/md/button/UiButton.test.ts +0 -347
  272. package/test/md/button/UiIconButton.test.ts +0 -155
  273. package/test/md/chip/UiChip.test.ts +0 -219
  274. package/test/md/collapse/UiCollapse.test.ts +0 -250
  275. package/test/md/collapse/flex-layout.test.ts +0 -105
  276. package/test/md/date-time/DateTime.test.ts +0 -348
  277. package/test/md/dialog/UiConfirmDialog.test.ts +0 -131
  278. package/test/md/dialog/UiDialog.test.ts +0 -759
  279. package/test/md/menu/Menu.test.ts +0 -855
  280. package/test/md/menu/MenuIntegration.test.ts +0 -426
  281. package/test/md/menu/MenuItem.test.ts +0 -652
  282. package/test/md/menu/SubMenu.test.ts +0 -410
  283. package/test/md/progress/UiCircularProgressElement.test.ts +0 -481
  284. package/test/md/progress/UiProgressElement.test.ts +0 -117
  285. package/test/md/progress/UiRangeElement.test.ts +0 -156
  286. package/test/md/select/Select.test.ts +0 -925
  287. package/test/plugins/takeScreenshotPlugin.js +0 -35
  288. package/test/setup.test.ts +0 -217
  289. package/test/setup.ts +0 -117
  290. package/test/tsconfig.json +0 -7
  291. package/web-dev-server.config.js +0 -21
  292. package/web-test-runner.config.js +0 -90
@@ -1,22 +0,0 @@
1
- import MarkdownStyles from '../../../src/elements/highlight/MarkdownStyles.js'
2
- import '../../../src/elements/highlight/marked-highlight.js'
3
-
4
- function configChangedHandler(e: Event): void {
5
- const input = e.target as HTMLInputElement
6
- const prop = input.id as 'breaks' | 'sanitize' | 'pedantic' | 'disableRemoteSanitization'
7
- const value = input.checked
8
- const nodes = document.querySelectorAll('marked-highlight')
9
- Array.from(nodes).forEach((node) => {
10
- node[prop] = value
11
- })
12
- }
13
-
14
- const nodes = document.querySelectorAll('#config input[type="checkbox"]')
15
- Array.from(nodes).forEach((node) => {
16
- node.addEventListener('change', configChangedHandler)
17
- })
18
-
19
- const style = MarkdownStyles.styleSheet
20
- if (style) {
21
- document.adoptedStyleSheets = [...document.adoptedStyleSheets, style]
22
- }
@@ -1,62 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7
- <title>prism-highlight demo</title>
8
-
9
- <style>
10
- html {
11
- --error-color: red;
12
- }
13
- </style>
14
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
15
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
16
- </head>
17
- <body>
18
- <div class="vertical-section-container centered">
19
- <h3>The prism-highlight - markdown</h3>
20
- <prism-highlight id="c1" lang="markdown"></prism-highlight>
21
- <script>
22
- document.querySelector('#c1').code = '# Test highlight\nHello world!\n[link](https://domain.com)';
23
- </script>
24
-
25
- <h3>The prism-highlight - JSON</h3>
26
- <prism-highlight id="cJson" lang="json"></prism-highlight>
27
- <script>
28
- document.querySelector('#cJson').code = '{\n\t"name": "Pawel Uchida-Psztyc",\n\t"occupation": "Software Engineer"\n}';
29
- </script>
30
-
31
- <h3>The prism-highlight - XML</h3>
32
- <prism-highlight id="cXml" lang="xml"></prism-highlight>
33
- <script>
34
- document.querySelector('#cXml').code =
35
- '<Person valid="true">\n\t<name>Pawel Uchida-Psztyc</name>\n\t<occupation>Software Engineer</occupation>\n</Person>';
36
- </script>
37
-
38
- <h3>The prism-highlight - javascript</h3>
39
- <prism-highlight id="c2" lang="javascript"></prism-highlight>
40
- <script>
41
- document.querySelector('#c2').code = 'function(param) {\n' +
42
- ' param.forEach((item) => this._parseItem(item))\n' +
43
- ' const test = null;\n' +
44
- '}';
45
- </script>
46
-
47
- <h3>The prism-highlight - HTML</h3>
48
- <prism-highlight id="c3" lang="markup"></prism-highlight>
49
- <script>
50
- // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
51
- (async () => {
52
- const response = await fetch(window.location.href);
53
- const data = await response.text();
54
- document.querySelector('#c3').code = `${data}\n${data}\n${data}`;
55
- })();
56
- </script>
57
- </div>
58
-
59
- <script type="module" src="/.tmp/demo/elements/highlight/prism-highlight.js"></script>
60
- </body>
61
-
62
- </html>
@@ -1,17 +0,0 @@
1
- /* eslint-disable @typescript-eslint/ban-ts-comment */
2
- import '../../../src/elements/highlight/prism-highlight.js'
3
-
4
- async function init(): Promise<void> {
5
- try {
6
- const response = await fetch(window.location.href)
7
- const data = await response.text()
8
- // @ts-ignore
9
- document.querySelector('#c3').code = `${data}\n`
10
- } catch (e) {
11
- // @ts-ignore
12
- document.querySelector('#c3').code = e.message
13
- }
14
- }
15
-
16
- // setTimeout(() => init(), 1000);
17
- init()
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
7
- <title>HTTP body editing</title>
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- </head>
11
-
12
- <body class="demo">
13
- <div id="app"></div>
14
- <script type="module" src="/.tmp/demo/elements/http/body-editor.js"></script>
15
- </body>
16
-
17
- </html>
@@ -1,115 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { RequestUiMeta } from '@api-client/core/models/RequestUiMeta.js'
3
- import { live } from 'lit/directives/live.js'
4
- import { ifDefined } from 'lit/directives/if-defined.js'
5
- import { DemoPage } from '../../../src/demo/DemoPage.js'
6
- import { reactive } from '../../../src/decorators/index.js'
7
- import BodyEditor from '../../../src/elements/http/BodyEditor.js'
8
- import Input from '../../../src/md/input/Input.js'
9
- import { Events } from '../../../src/events/Events.js'
10
- import '../../../src/define/http/http-body-editor.js'
11
- import '../../../src/md/text-field/ui-filled-text-field.js'
12
-
13
- const STORE_KEY = 'demo.request-ui.editor.body'
14
-
15
- class ComponentDemoPage extends DemoPage {
16
- override accessor componentName = 'Body Editing'
17
-
18
- @reactive() accessor contentType: string | undefined
19
-
20
- @reactive() accessor initialized: boolean
21
-
22
- @reactive() accessor ui = new RequestUiMeta()
23
-
24
- @reactive() accessor payload: unknown | undefined
25
-
26
- constructor() {
27
- super()
28
- this.initialized = false
29
- this.init()
30
- }
31
-
32
- async init(): Promise<void> {
33
- await this.loadMonaco()
34
- this.restoreModel()
35
- this.initialized = true
36
- }
37
-
38
- restoreModel(): void {
39
- const data = localStorage.getItem(STORE_KEY)
40
- if (!data) {
41
- return
42
- }
43
- try {
44
- this.ui = new RequestUiMeta(data)
45
- } catch {
46
- //
47
- }
48
- }
49
-
50
- storeModel(): void {
51
- const { ui } = this
52
- localStorage.setItem(STORE_KEY, JSON.stringify(ui))
53
- }
54
-
55
- handleChange(e: Event): void {
56
- const body = e.target as BodyEditor
57
- const { value, model, selected } = body
58
- if (!this.ui.body) {
59
- this.ui.body = {}
60
- }
61
- this.ui.body.model = model
62
- this.ui.body.selected = selected
63
- this.payload = value
64
-
65
- console.log('Change from the editor', value, model, selected)
66
- this.storeModel()
67
- }
68
-
69
- handleContentType(e: Event): void {
70
- const input = e.target as Input
71
- this.contentType = input.value
72
- Events.Http.Request.State.contentTypeChange(input.value)
73
- }
74
-
75
- contentTemplate(): TemplateResult {
76
- if (!this.initialized) {
77
- return html`
78
- <a href="./">Back</a>
79
- <div class="screen-loader">
80
- <p>Loading demo page</p>
81
- <progress></progress>
82
- </div>
83
- `
84
- }
85
- const { body } = this.ui
86
- const selected = body && (body.selected as 'file' | 'raw' | 'urlEncode' | 'multipart')
87
- const model = body && body.model
88
-
89
- return html`
90
- <a href="./">Back</a>
91
- <section class="demo-section">
92
- <h2 class="title-large">Setup</h2>
93
- <ui-filled-text-field
94
- label="Content type"
95
- .value="${live(this.contentType || '')}"
96
- @change="${this.handleContentType}"
97
- ></ui-filled-text-field>
98
- </section>
99
- <section class="demo-section">
100
- <h2 class="title-large">HTTP body editor</h2>
101
- <http-body-editor
102
- .contentType="${this.contentType}"
103
- .model="${model}"
104
- .value="${(!model && this.payload) || undefined}"
105
- selected="${ifDefined(selected)}"
106
- @change="${this.handleChange}"
107
- @select="${this.handleChange}"
108
- ></http-body-editor>
109
- </section>
110
- `
111
- }
112
- }
113
-
114
- const instance = new ComponentDemoPage()
115
- instance.render()
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
7
- <title>HTTP headers editing</title>
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- </head>
11
-
12
- <body class="demo">
13
- <div id="app"></div>
14
- <script type="module" src="/.tmp/demo/elements/http/headers.js"></script>
15
- </body>
16
-
17
- </html>
@@ -1,59 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { IProperty } from '@api-client/core/models/Property.js'
3
- import { DemoPage } from '../../../src/demo/DemoPage.js'
4
- import { reactive } from '../../../src/decorators/index.js'
5
- import '../../../src/define/http/http-headers-form.js'
6
- import HeadersForm from '../../../src/elements/http/HeadersForm.js'
7
-
8
- const STORE_KEY = 'demo.request-ui.editor.headers.model'
9
-
10
- class ComponentDemoPage extends DemoPage {
11
- override accessor componentName = 'Headers Editing'
12
-
13
- @reactive() accessor model: IProperty[] = []
14
-
15
- constructor() {
16
- super()
17
- this.restoreModel()
18
- }
19
-
20
- restoreModel(): void {
21
- const data = localStorage.getItem(STORE_KEY)
22
- if (!data) {
23
- return
24
- }
25
- try {
26
- const tmp = JSON.parse(data)
27
- if (Array.isArray(tmp)) {
28
- this.model = tmp as IProperty[]
29
- }
30
- } catch {
31
- //
32
- }
33
- }
34
-
35
- storeModel(): void {
36
- const { model } = this
37
- localStorage.setItem(STORE_KEY, JSON.stringify(model))
38
- }
39
-
40
- handleChange(e: Event): void {
41
- const input = e.target as HeadersForm
42
- console.log('Change from the editor', input.model)
43
- this.model = input.model
44
- this.storeModel()
45
- }
46
-
47
- contentTemplate(): TemplateResult {
48
- return html`
49
- <a href="./">Back</a>
50
- <section class="demo-section">
51
- <h2 class="title-large">HTTP headers form</h2>
52
- <http-headers-form .model="${this.model}" @change="${this.handleChange}"></http-headers-form>
53
- </section>
54
- `
55
- }
56
- }
57
-
58
- const instance = new ComponentDemoPage()
59
- instance.render()
@@ -1,20 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
7
- <title>HTTP Assertions</title>
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- <style>
11
- .surface1 { z-index: 0; }
12
- </style>
13
- </head>
14
-
15
- <body class="demo">
16
- <div id="app"></div>
17
- <script type="module" src="/.tmp/demo/elements/http/http-assertions.js"></script>
18
- </body>
19
-
20
- </html>
@@ -1,89 +0,0 @@
1
- import { html, type TemplateResult } from 'lit'
2
- import type { IHttpAssertion } from '@api-client/core/models/http-flows/HttpAssertion.js'
3
- import { DemoPage } from '../../../src/demo/DemoPage.js'
4
- import { reactive } from '../../../src/decorators/index.js'
5
- import type HttpAssertions from '../../../src/elements/http/HttpAssertions.element.js'
6
- import '../../../src/define/http/http-assertions.js'
7
-
8
- const MODEL_STORE_KEY = 'demo.request-ui.editor.assertions'
9
-
10
- class ComponentDemoPage extends DemoPage {
11
- override accessor componentName = 'HTTP Assertions'
12
-
13
- @reactive() accessor initialized: boolean
14
-
15
- @reactive() accessor model: IHttpAssertion[] = []
16
-
17
- constructor() {
18
- super()
19
- this.initialized = false
20
- this.init()
21
- }
22
-
23
- async init(): Promise<void> {
24
- await this.restoreModel()
25
- this.initialized = true
26
- }
27
-
28
- async restoreModel(): Promise<void> {
29
- const data = localStorage.getItem(MODEL_STORE_KEY)
30
- if (!data) {
31
- return
32
- }
33
- try {
34
- const tmp = JSON.parse(data)
35
- if (tmp) {
36
- const model = tmp as IHttpAssertion[]
37
- this.model = model
38
- }
39
- } catch {
40
- //
41
- }
42
- }
43
-
44
- storeModel(): void {
45
- const { model } = this
46
- localStorage.setItem(MODEL_STORE_KEY, JSON.stringify(model))
47
- }
48
-
49
- handleModelChange(e: Event): void {
50
- const node = e.target as HttpAssertions
51
- const { model = [] } = node
52
- this.model = model
53
- this.storeModel()
54
- console.log('model changed', model)
55
- }
56
-
57
- contentTemplate(): TemplateResult {
58
- if (!this.initialized) {
59
- return this.renderLoader()
60
- }
61
- return this.renderDemo()
62
- }
63
-
64
- renderLoader(): TemplateResult {
65
- return html`
66
- <a href="./">Back</a>
67
- <div class="screen-loader">
68
- <p>Loading demo page</p>
69
- <progress></progress>
70
- </div>
71
- `
72
- }
73
-
74
- renderDemo(): TemplateResult {
75
- return html`
76
- <a href="./">Back</a>
77
- <section class="demo-section">
78
- <h2 class="title-large">HTTP assertions editor</h2>
79
-
80
- <div class="editor-wrapper surface1">
81
- <http-assertions .model="${this.model}" @change="${this.handleModelChange}"></http-assertions>
82
- </div>
83
- </section>
84
- `
85
- }
86
- }
87
-
88
- const instance = new ComponentDemoPage()
89
- instance.render()
@@ -1,23 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
7
- <title>HTTP Flows</title>
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- <style>
11
- .surface1,
12
- .surface2 {
13
- z-index: 0;
14
- }
15
- </style>
16
- </head>
17
-
18
- <body class="demo">
19
- <div id="app"></div>
20
- <script type="module" src="/.tmp/demo/elements/http/http-flows.js"></script>
21
- </body>
22
-
23
- </html>
@@ -1,89 +0,0 @@
1
- import { html, type TemplateResult } from 'lit'
2
- import type { IHttpFlow } from '@api-client/core/models/http-flows/HttpFlows.js'
3
- import { DemoPage } from '../../../src/demo/DemoPage.js'
4
- import { reactive } from '../../../src/decorators/index.js'
5
- import HttpFlows from '../../../src/elements/http/HttpFlows.element.js'
6
- import '../../../src/define/http/http-flows.js'
7
-
8
- const MODEL_STORE_KEY = 'demo.request-ui.editor.flows'
9
-
10
- class ComponentDemoPage extends DemoPage {
11
- override accessor componentName = 'HTTP Flows'
12
-
13
- @reactive() accessor initialized: boolean
14
-
15
- @reactive() accessor model: IHttpFlow[] = []
16
-
17
- constructor() {
18
- super()
19
- this.initialized = false
20
- this.init()
21
- }
22
-
23
- async init(): Promise<void> {
24
- await this.restoreModel()
25
- this.initialized = true
26
- }
27
-
28
- async restoreModel(): Promise<void> {
29
- const data = localStorage.getItem(MODEL_STORE_KEY)
30
- if (!data) {
31
- return
32
- }
33
- try {
34
- const tmp = JSON.parse(data)
35
- if (tmp) {
36
- const model = tmp as IHttpFlow[]
37
- this.model = model
38
- }
39
- } catch {
40
- //
41
- }
42
- }
43
-
44
- storeModel(): void {
45
- const { model } = this
46
- localStorage.setItem(MODEL_STORE_KEY, JSON.stringify(model))
47
- }
48
-
49
- handleModelChange(e: Event): void {
50
- const node = e.target as HttpFlows
51
- const { model = [] } = node
52
- this.model = model
53
- this.storeModel()
54
- console.log('model changed', model)
55
- }
56
-
57
- contentTemplate(): TemplateResult {
58
- if (!this.initialized) {
59
- return this.renderLoader()
60
- }
61
- return this.renderDemo()
62
- }
63
-
64
- renderLoader(): TemplateResult {
65
- return html`
66
- <a href="./">Back</a>
67
- <div class="screen-loader">
68
- <p>Loading demo page</p>
69
- <progress></progress>
70
- </div>
71
- `
72
- }
73
-
74
- renderDemo(): TemplateResult {
75
- return html`
76
- <a href="./">Back</a>
77
- <section class="demo-section">
78
- <h2 class="title-large">HTTP flows editor</h2>
79
-
80
- <div class="editor-wrapper surface1">
81
- <http-flows .model="${this.model}" @change="${this.handleModelChange}"></http-flows>
82
- </div>
83
- </section>
84
- `
85
- }
86
- }
87
-
88
- const instance = new ComponentDemoPage()
89
- instance.render()
@@ -1,45 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>API Client UI</title>
6
- <link
7
- href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
8
- rel="stylesheet"
9
- />
10
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
11
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
12
- <link href="../../page.css" rel="stylesheet" type="text/css" />
13
- </head>
14
- <body>
15
- <main>
16
- <h1>The UI library for HTTP stuff</h1>
17
- <nav>
18
- <h2>Elements</h2>
19
- <a href="../">Back</a>
20
- <dl>
21
- <dt><a href="url-editing.html">URL editing</a></dt>
22
- <dd>Components to enter a request URL.</dd>
23
-
24
- <dt><a href="headers.html">Headers editing</a></dt>
25
- <dd>Components to edit HTTP headers.</dd>
26
-
27
- <dt><a href="body-editor.html">Body editing</a></dt>
28
- <dd>Components to edit HTTP payload.</dd>
29
-
30
- <dt><a href="request-editor.html">Request Editor</a></dt>
31
- <dd>The HTTP request editor. The base element for editing HTTP request.</dd>
32
-
33
- <dt><a href="request-log.html">Request Log</a></dt>
34
- <dd>The HTTP request log view.</dd>
35
-
36
- <dt><a href="http-assertions.html">http-assertions</a></dt>
37
- <dd>The HTTP assertions editor.</dd>
38
-
39
- <dt><a href="http-flows.html">http-flows</a></dt>
40
- <dd>The HTTP flows editor.</dd>
41
- </dl>
42
- </nav>
43
- </main>
44
- </body>
45
- </html>
@@ -1,26 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
7
- <title>HTTP request editor</title>
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- <style>
11
- .demo-row {
12
- margin: 20px 0;
13
- }
14
-
15
- .editor-wrapper {
16
- padding: 20px;
17
- }
18
- </style>
19
- </head>
20
-
21
- <body class="demo">
22
- <div id="app"></div>
23
- <script type="module" src="/.tmp/demo/elements/http/request-editor.js"></script>
24
- </body>
25
-
26
- </html>