@api-client/ui 0.5.38 → 0.5.40

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 (299) hide show
  1. package/build/src/md/list/internals/ListItem.d.ts +24 -15
  2. package/build/src/md/list/internals/ListItem.d.ts.map +1 -1
  3. package/build/src/md/list/internals/ListItem.js +85 -59
  4. package/build/src/md/list/internals/ListItem.js.map +1 -1
  5. package/build/src/md/list/internals/ListItem.styles.js +11 -11
  6. package/build/src/md/list/internals/ListItem.styles.js.map +1 -1
  7. package/build/src/md/select/internals/Option.d.ts +4 -14
  8. package/build/src/md/select/internals/Option.d.ts.map +1 -1
  9. package/build/src/md/select/internals/Option.js +13 -28
  10. package/build/src/md/select/internals/Option.js.map +1 -1
  11. package/build/src/md/select/internals/Select.d.ts +1 -1
  12. package/build/src/md/select/internals/Select.d.ts.map +1 -1
  13. package/build/src/md/select/internals/Select.js +15 -5
  14. package/build/src/md/select/internals/Select.js.map +1 -1
  15. package/build/tsconfig.tsbuildinfo +1 -0
  16. package/package.json +1 -1
  17. package/src/md/list/internals/ListItem.styles.ts +11 -11
  18. package/src/md/list/internals/ListItem.ts +68 -43
  19. package/src/md/select/internals/Option.ts +14 -26
  20. package/src/md/select/internals/Select.ts +15 -5
  21. package/.aiexclude +0 -3
  22. package/.cursor/rules/html-and-css-best-practices.mdc +0 -63
  23. package/.cursor/rules/lit-best-practices.mdc +0 -89
  24. package/.editorconfig +0 -29
  25. package/.github/CONTRIBUTING.md +0 -24
  26. package/.github/instructions/html-and-css-best-practices.instructions.md +0 -70
  27. package/.github/instructions/lit-best-practices.instructions.md +0 -90
  28. package/.github/release.yml +0 -14
  29. package/.github/stale.yml +0 -23
  30. package/.github/workflows/auto-release.yml +0 -182
  31. package/.github/workflows/release.yml +0 -82
  32. package/.prettierrc.js +0 -14
  33. package/.vscode/settings.json +0 -18
  34. package/RELEASE.md +0 -163
  35. package/RELEASE_SETUP.md +0 -235
  36. package/build/src/demo/DemoPage.d.ts +0 -81
  37. package/build/src/demo/DemoPage.d.ts.map +0 -1
  38. package/build/src/demo/DemoPage.js +0 -175
  39. package/build/src/demo/DemoPage.js.map +0 -1
  40. package/build/src/demo/DemoStyles.d.ts +0 -3
  41. package/build/src/demo/DemoStyles.d.ts.map +0 -1
  42. package/build/src/demo/DemoStyles.js +0 -60
  43. package/build/src/demo/DemoStyles.js.map +0 -1
  44. package/build/test/elements/navigation/Navigation.test.d.ts +0 -3
  45. package/build/test/elements/navigation/Navigation.test.d.ts.map +0 -1
  46. package/build/test/elements/navigation/Navigation.test.js +0 -113
  47. package/build/test/elements/navigation/Navigation.test.js.map +0 -1
  48. package/commitlint.config.cjs +0 -2
  49. package/demo/elements/authorization/AuthPlugin.js +0 -57
  50. package/demo/elements/authorization/AuthProxy.js +0 -215
  51. package/demo/elements/authorization/api-key.html +0 -27
  52. package/demo/elements/authorization/api-key.ts +0 -44
  53. package/demo/elements/authorization/basic.html +0 -27
  54. package/demo/elements/authorization/basic.ts +0 -43
  55. package/demo/elements/authorization/bearer.html +0 -27
  56. package/demo/elements/authorization/bearer.ts +0 -43
  57. package/demo/elements/authorization/env.js +0 -8
  58. package/demo/elements/authorization/index.html +0 -44
  59. package/demo/elements/authorization/ntlm.html +0 -27
  60. package/demo/elements/authorization/ntlm.ts +0 -43
  61. package/demo/elements/authorization/oauth-authorize.html +0 -75
  62. package/demo/elements/authorization/oauth-authorize.ts +0 -40
  63. package/demo/elements/authorization/oauth-error.html +0 -18
  64. package/demo/elements/authorization/oauth-error.ts +0 -10
  65. package/demo/elements/authorization/oauth-popup.html +0 -36
  66. package/demo/elements/authorization/oauth2.html +0 -27
  67. package/demo/elements/authorization/oauth2.ts +0 -100
  68. package/demo/elements/authorization/oidc.html +0 -27
  69. package/demo/elements/authorization/oidc.ts +0 -139
  70. package/demo/elements/authorization/private.crt +0 -31
  71. package/demo/elements/authorization/private.csr +0 -28
  72. package/demo/elements/authorization/private.key +0 -51
  73. package/demo/elements/authorization/private.pem +0 -31
  74. package/demo/elements/authorization/redirect.html +0 -20
  75. package/demo/elements/authorization/ssl-commands.sh +0 -30
  76. package/demo/elements/authorization/ssl.conf +0 -24
  77. package/demo/elements/autocomplete/index.html +0 -64
  78. package/demo/elements/autocomplete/index.ts +0 -171
  79. package/demo/elements/code-editor/CodeEditorDemo.ts +0 -173
  80. package/demo/elements/code-editor/index.html +0 -19
  81. package/demo/elements/context-menu/DemoIcons.ts +0 -21
  82. package/demo/elements/context-menu/basic.html +0 -25
  83. package/demo/elements/context-menu/basic.ts +0 -119
  84. package/demo/elements/context-menu/custom-data.html +0 -25
  85. package/demo/elements/context-menu/custom-data.ts +0 -62
  86. package/demo/elements/context-menu/demo.css +0 -28
  87. package/demo/elements/context-menu/enabled-state.html +0 -25
  88. package/demo/elements/context-menu/enabled-state.ts +0 -73
  89. package/demo/elements/context-menu/icons.html +0 -25
  90. package/demo/elements/context-menu/icons.ts +0 -64
  91. package/demo/elements/context-menu/index.html +0 -43
  92. package/demo/elements/context-menu/nested.html +0 -25
  93. package/demo/elements/context-menu/nestedt.ts +0 -152
  94. package/demo/elements/context-menu/no-execute.html +0 -25
  95. package/demo/elements/context-menu/no-execute.ts +0 -134
  96. package/demo/elements/context-menu/radio-menu.html +0 -25
  97. package/demo/elements/context-menu/radio-menu.ts +0 -83
  98. package/demo/elements/context-menu/separators.html +0 -25
  99. package/demo/elements/context-menu/separators.ts +0 -172
  100. package/demo/elements/currency/index.html +0 -91
  101. package/demo/elements/currency/index.ts +0 -352
  102. package/demo/elements/environment/environment-editor.html +0 -20
  103. package/demo/elements/environment/environment-editor.ts +0 -49
  104. package/demo/elements/environment/index.html +0 -33
  105. package/demo/elements/environment/server-editor.html +0 -20
  106. package/demo/elements/environment/server-editor.ts +0 -67
  107. package/demo/elements/environment/variables-editor.html +0 -20
  108. package/demo/elements/environment/variables-editor.ts +0 -94
  109. package/demo/elements/har/har-viewer.html +0 -20
  110. package/demo/elements/har/har-viewer.ts +0 -76
  111. package/demo/elements/har/har1.har +0 -3044
  112. package/demo/elements/har/har2.json +0 -439
  113. package/demo/elements/har/index.html +0 -26
  114. package/demo/elements/highlight/example.md +0 -27
  115. package/demo/elements/highlight/index.html +0 -31
  116. package/demo/elements/highlight/marked-highlight.html +0 -132
  117. package/demo/elements/highlight/marked-highlight.ts +0 -22
  118. package/demo/elements/highlight/prism-highlight.html +0 -62
  119. package/demo/elements/highlight/prism-highlight.ts +0 -17
  120. package/demo/elements/http/body-editor.html +0 -17
  121. package/demo/elements/http/body-editor.ts +0 -115
  122. package/demo/elements/http/headers.html +0 -17
  123. package/demo/elements/http/headers.ts +0 -59
  124. package/demo/elements/http/http-assertions.html +0 -20
  125. package/demo/elements/http/http-assertions.ts +0 -89
  126. package/demo/elements/http/http-flows.html +0 -23
  127. package/demo/elements/http/http-flows.ts +0 -89
  128. package/demo/elements/http/index.html +0 -45
  129. package/demo/elements/http/request-editor.html +0 -26
  130. package/demo/elements/http/request-editor.ts +0 -197
  131. package/demo/elements/http/request-log.html +0 -16
  132. package/demo/elements/http/request-log.ts +0 -136
  133. package/demo/elements/http/url-editing.html +0 -17
  134. package/demo/elements/http/url-editing.ts +0 -112
  135. package/demo/elements/icons/index.html +0 -81
  136. package/demo/elements/icons/index.ts +0 -52
  137. package/demo/elements/index.html +0 -72
  138. package/demo/elements/mention-textarea/index.html +0 -19
  139. package/demo/elements/mention-textarea/index.ts +0 -205
  140. package/demo/elements/navigation/navigation-item.html +0 -49
  141. package/demo/elements/navigation/navigation-item.ts +0 -131
  142. package/demo/elements/navigation/navigation.html +0 -20
  143. package/demo/elements/navigation/navigation.ts +0 -45
  144. package/demo/elements/project/index.html +0 -29
  145. package/demo/elements/project/project-run-report.html +0 -20
  146. package/demo/elements/project/project-run-report.ts +0 -132
  147. package/demo/elements/project/request-editor.html +0 -23
  148. package/demo/elements/project/request-editor.ts +0 -232
  149. package/demo/elements/user/user-avatar.html +0 -17
  150. package/demo/elements/user/user-avatar.ts +0 -60
  151. package/demo/env.js +0 -4
  152. package/demo/index.html +0 -34
  153. package/demo/layout/index.html +0 -94
  154. package/demo/layout/index.ts +0 -190
  155. package/demo/md/DemoStyles.ts +0 -61
  156. package/demo/md/UiDemoPage.ts +0 -6
  157. package/demo/md/buttons/button.html +0 -121
  158. package/demo/md/buttons/button.ts +0 -246
  159. package/demo/md/buttons/group.html +0 -36
  160. package/demo/md/buttons/group.ts +0 -171
  161. package/demo/md/checkbox/index.html +0 -39
  162. package/demo/md/checkbox/index.ts +0 -220
  163. package/demo/md/chip/chip.html +0 -70
  164. package/demo/md/chip/chip.ts +0 -219
  165. package/demo/md/chip/pawel6c9a.jpg +0 -0
  166. package/demo/md/collapse/CustomDetail.ts +0 -89
  167. package/demo/md/collapse/collapse.html +0 -21
  168. package/demo/md/collapse/collapse.ts +0 -78
  169. package/demo/md/date-picker/date-picker.ts +0 -336
  170. package/demo/md/date-picker/index.html +0 -171
  171. package/demo/md/dialog/confirm-dialog.html +0 -49
  172. package/demo/md/dialog/confirm-dialog.ts +0 -121
  173. package/demo/md/dialog/dialog.html +0 -25
  174. package/demo/md/dialog/dialog.ts +0 -468
  175. package/demo/md/dropdown-list/index.html +0 -31
  176. package/demo/md/dropdown-list/index.ts +0 -158
  177. package/demo/md/icon-button/index.html +0 -122
  178. package/demo/md/icon-button/index.ts +0 -132
  179. package/demo/md/index.html +0 -73
  180. package/demo/md/inputs/input.html +0 -73
  181. package/demo/md/inputs/input.ts +0 -278
  182. package/demo/md/inputs/radio.html +0 -39
  183. package/demo/md/inputs/radio.ts +0 -156
  184. package/demo/md/inputs/switch.html +0 -45
  185. package/demo/md/inputs/switch.ts +0 -144
  186. package/demo/md/list/list.html +0 -65
  187. package/demo/md/list/list.ts +0 -204
  188. package/demo/md/listbox/listbox.html +0 -31
  189. package/demo/md/listbox/listbox.ts +0 -27
  190. package/demo/md/menu/index.html +0 -19
  191. package/demo/md/menu/index.ts +0 -514
  192. package/demo/md/notification/snack.html +0 -21
  193. package/demo/md/notification/snack.ts +0 -70
  194. package/demo/md/progress/progress.html +0 -46
  195. package/demo/md/progress/progress.ts +0 -161
  196. package/demo/md/segmented-button/index.html +0 -21
  197. package/demo/md/segmented-button/index.ts +0 -55
  198. package/demo/md/select/index.html +0 -16
  199. package/demo/md/select/index.ts +0 -207
  200. package/demo/md/tabs/tabs.html +0 -40
  201. package/demo/md/tabs/tabs.ts +0 -214
  202. package/demo/oauth-popup.html +0 -36
  203. package/demo/page.css +0 -8
  204. package/demo/resources/calendar-month.png +0 -0
  205. package/demo/resources/favorite.png +0 -0
  206. package/demo/resources/fingerprint.png +0 -0
  207. package/demo/resources/home-work.png +0 -0
  208. package/demo/resources/mood.png +0 -0
  209. package/demo/resources/print.png +0 -0
  210. package/demo/resources/stars.png +0 -0
  211. package/demo/resources/theaters.png +0 -0
  212. package/demo/tsconfig.json +0 -4
  213. package/eslint.config.js +0 -97
  214. package/scripts/copy-assets.js +0 -21
  215. package/scripts/release.js +0 -66
  216. package/src/demo/DemoPage.ts +0 -169
  217. package/src/demo/DemoStyles.ts +0 -60
  218. package/test/README.md +0 -375
  219. package/test/contextual-menu/ContextMenu.test.ts +0 -760
  220. package/test/contextual-menu/ContextMenuElement.test.ts +0 -569
  221. package/test/core/activity.spec.ts +0 -413
  222. package/test/core/activity_manager.spec.ts +0 -544
  223. package/test/core/application.spec.ts +0 -218
  224. package/test/core/fragment.spec.ts +0 -565
  225. package/test/core/fragment_manager.spec.ts +0 -404
  226. package/test/core/live_data.spec.ts +0 -558
  227. package/test/core/renderer.spec.ts +0 -113
  228. package/test/dom-assertions.test.ts +0 -182
  229. package/test/elements/MonacoSetup.ts +0 -65
  230. package/test/elements/authorization/basic-method.test.ts +0 -177
  231. package/test/elements/authorization/bearer-method.test.ts +0 -143
  232. package/test/elements/authorization/ntlm-method.test.ts +0 -219
  233. package/test/elements/authorization/oauth2-client-credentials-method.test.ts +0 -334
  234. package/test/elements/authorization/oauth2-code-method.test.ts +0 -320
  235. package/test/elements/authorization/oauth2-custom-grant-method.test.ts +0 -255
  236. package/test/elements/authorization/oauth2-device-code-method.test.ts +0 -371
  237. package/test/elements/authorization/oauth2-implicit-method.test.ts +0 -407
  238. package/test/elements/authorization/oauth2-jwt-method.test.ts +0 -217
  239. package/test/elements/authorization/oauth2-password-method.test.ts +0 -275
  240. package/test/elements/authorization/openid-method.test.ts +0 -591
  241. package/test/elements/autocomplete/autocomplete-input.spec.ts +0 -646
  242. package/test/elements/code-editor/code-editor.accessibility.test.ts +0 -298
  243. package/test/elements/code-editor/code-editor.test.ts +0 -574
  244. package/test/elements/currency/CurrencyPicker.accessibility.test.ts +0 -328
  245. package/test/elements/currency/CurrencyPicker.core.test.ts +0 -318
  246. package/test/elements/currency/CurrencyPicker.integration.test.ts +0 -482
  247. package/test/elements/currency/CurrencyPicker.test.ts +0 -486
  248. package/test/elements/data-table/DataTable.browser.test.ts +0 -649
  249. package/test/elements/har/HarUtils.test.ts +0 -45
  250. package/test/elements/har/HarViewerElement.test.ts +0 -687
  251. package/test/elements/har/test-data/har1.har +0 -3044
  252. package/test/elements/highlight/MarkedHighlightElement.test.ts +0 -452
  253. package/test/elements/highlight/PrismHighlightElement.test.ts +0 -79
  254. package/test/elements/highlight/PrismHighlighter.test.ts +0 -94
  255. package/test/elements/highlight/remoteSanitization.md +0 -1
  256. package/test/elements/highlight/test.md +0 -3
  257. package/test/elements/highlight/test1.md +0 -3
  258. package/test/elements/highlight/test2.md +0 -1
  259. package/test/elements/http/BodyFormdataEditorElement.test.ts +0 -482
  260. package/test/elements/http/BodyMultipartEditorElement.test.ts +0 -658
  261. package/test/elements/http/BodyRawEditorElement.test.ts +0 -90
  262. package/test/elements/http/CertificateAdd.test.ts +0 -457
  263. package/test/elements/http/HttpAssertions.test.ts +0 -994
  264. package/test/elements/http/HttpFlows.test.ts +0 -502
  265. package/test/elements/http/UrlEncodeUtils.test.ts +0 -202
  266. package/test/elements/layout/SplitItem.test.ts +0 -440
  267. package/test/elements/layout/SplitLayoutManager.test.ts +0 -1501
  268. package/test/elements/layout/SplitPanel.test.ts +0 -1109
  269. package/test/elements/mention-textarea/MentionTextArea.basic.test.ts +0 -114
  270. package/test/elements/mention-textarea/MentionTextArea.test.ts +0 -613
  271. package/test/elements/navigation/Navigation.test.ts +0 -120
  272. package/test/env.ts +0 -15
  273. package/test/events/EventTypes.test.ts +0 -363
  274. package/test/events/EventsTestHelpers.ts +0 -16
  275. package/test/helpers/TestUtils.ts +0 -243
  276. package/test/helpers/UiMock.ts +0 -185
  277. package/test/lib/Dom.test.ts +0 -231
  278. package/test/md/button/UiButton.test.ts +0 -347
  279. package/test/md/button/UiIconButton.test.ts +0 -155
  280. package/test/md/chip/UiChip.test.ts +0 -219
  281. package/test/md/collapse/UiCollapse.test.ts +0 -250
  282. package/test/md/collapse/flex-layout.test.ts +0 -105
  283. package/test/md/date-time/DateTime.test.ts +0 -348
  284. package/test/md/dialog/UiConfirmDialog.test.ts +0 -131
  285. package/test/md/dialog/UiDialog.test.ts +0 -759
  286. package/test/md/menu/Menu.test.ts +0 -855
  287. package/test/md/menu/MenuIntegration.test.ts +0 -426
  288. package/test/md/menu/MenuItem.test.ts +0 -652
  289. package/test/md/menu/SubMenu.test.ts +0 -410
  290. package/test/md/progress/UiCircularProgressElement.test.ts +0 -481
  291. package/test/md/progress/UiProgressElement.test.ts +0 -117
  292. package/test/md/progress/UiRangeElement.test.ts +0 -156
  293. package/test/md/select/Select.test.ts +0 -925
  294. package/test/plugins/takeScreenshotPlugin.js +0 -35
  295. package/test/setup.test.ts +0 -217
  296. package/test/setup.ts +0 -117
  297. package/test/tsconfig.json +0 -7
  298. package/web-dev-server.config.js +0 -21
  299. 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>