@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
package/demo/elements/mention-textarea/index.html DELETED
@@ -1,19 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <title>Mention Textarea</title>
7
- <link
8
- 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"
9
- rel="stylesheet"
10
- />
11
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
12
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
- <link href="../../page.css" rel="stylesheet" type="text/css" />
14
- <script type="module" src="/.tmp/demo/elements/mention-textarea/index.js"></script>
15
- </head>
16
- <body>
17
- <div id="app"></div>
18
- </body>
19
- </html>
package/demo/elements/mention-textarea/index.ts DELETED
@@ -1,205 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import reactive from '../../../src/decorators/reactive.js'
3
- import { DemoPage } from '../../../src/demo/DemoPage.js'
4
- import type {
5
- MentionTextAreaElement,
6
- MentionSuggestion,
7
- MentionInsertEvent,
8
- MentionRemoveEvent,
9
- } from '../../../src/elements/mention-textarea/ui-mention-textarea.js'
10
- import '../../../src/elements/mention-textarea/ui-mention-textarea.js'
11
-
12
- class ComponentDemoPage extends DemoPage {
13
- override accessor componentName = 'Mention Textarea'
14
-
15
- @reactive() accessor value = 'Hello @{john-doe}, please review the document with @{jane-smith}.'
16
-
17
- @reactive() accessor suggestions: MentionSuggestion[] = [
18
- {
19
- id: 'john-doe',
20
- label: 'John Doe',
21
- description: 'Senior Developer',
22
- suffix: 'Engineering',
23
- },
24
- {
25
- id: 'jane-smith',
26
- label: 'Jane Smith',
27
- description: 'Product Manager',
28
- suffix: 'Product',
29
- },
30
- {
31
- id: 'bob-wilson',
32
- label: 'Bob Wilson',
33
- description: 'UI/UX Designer',
34
- suffix: 'Design',
35
- },
36
- {
37
- id: 'alice-johnson',
38
- label: 'Alice Johnson',
39
- description: 'Quality Assurance Engineer',
40
- suffix: 'QA',
41
- },
42
- {
43
- id: 'mike-brown',
44
- label: 'Mike Brown',
45
- description: 'DevOps Engineer',
46
- suffix: 'Infrastructure',
47
- },
48
- {
49
- id: 'sarah-davis',
50
- label: 'Sarah Davis',
51
- description: 'Technical Writer',
52
- suffix: 'Documentation',
53
- },
54
- ]
55
-
56
- handleMentionInsert(event: CustomEvent<MentionInsertEvent>): void {
57
- console.log('Mention inserted:', event.detail)
58
- }
59
-
60
- handleMentionRemove(event: CustomEvent<MentionRemoveEvent>): void {
61
- console.log('Mention removed:', event.detail)
62
- }
63
-
64
- handleInput(event: Event): void {
65
- const target = event.target as MentionTextAreaElement
66
- this.value = target.value
67
- console.log('Value changed:', this.value)
68
- }
69
-
70
- contentTemplate(): TemplateResult {
71
- return html`
72
- <a href="../">Back</a>
73
-
74
- <section class="demo-section">
75
- <h2 class="display-large">Basic Usage</h2>
76
- <p>
77
- Type @ to trigger mentions. The component supports rich suggestions with headline, description, and suffix.
78
- </p>
79
-
80
- <mention-textarea
81
- label="Message"
82
- supporting-text="Type @ to mention someone"
83
- .value="${this.value}"
84
- .suggestions="${this.suggestions}"
85
- @mention-insert="${this.handleMentionInsert}"
86
- @mention-remove="${this.handleMentionRemove}"
87
- @input="${this.handleInput}"
88
- ></mention-textarea>
89
-
90
- <h3 class="title-large">Current Value:</h3>
91
- <pre
92
- style="background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px; overflow-x: auto;"
93
- >
94
- ${this.value}
95
- </pre
96
- >
97
- </section>
98
-
99
- <section class="demo-section">
100
- <h2 class="display-large">Different States</h2>
101
-
102
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
103
- <mention-textarea label="Default" .suggestions="${this.suggestions}"></mention-textarea>
104
-
105
- <mention-textarea
106
- label="With placeholder"
107
- placeholder="Start typing..."
108
- .suggestions="${this.suggestions}"
109
- ></mention-textarea>
110
- </div>
111
-
112
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
113
- <mention-textarea label="Required" required .suggestions="${this.suggestions}"></mention-textarea>
114
-
115
- <mention-textarea
116
- label="Invalid"
117
- invalid
118
- supporting-text="This field has an error"
119
- .suggestions="${this.suggestions}"
120
- ></mention-textarea>
121
- </div>
122
-
123
- <mention-textarea
124
- label="Disabled"
125
- disabled
126
- value="This is disabled"
127
- .suggestions="${this.suggestions}"
128
- ></mention-textarea>
129
- </section>
130
-
131
- <section class="demo-section">
132
- <h2 class="display-large">Custom Trigger</h2>
133
- <p>This example uses '#' as the mention trigger instead of '@'.</p>
134
-
135
- <mention-textarea
136
- label="Tags"
137
- supporting-text="Type # to add tags"
138
- mention-trigger="#"
139
- .suggestions="${this.suggestions.map((s) => ({ ...s, label: s.label.toLowerCase().replace(' ', '-') }))}"
140
- ></mention-textarea>
141
- </section>
142
-
143
- <section class="demo-section">
144
- <h2 class="display-large">Minimum Query Length</h2>
145
- <p>This example requires at least 2 characters after @ before showing suggestions.</p>
146
-
147
- <mention-textarea
148
- label="Message with min query"
149
- supporting-text="Type @+ at least 2 characters"
150
- min-query-length="2"
151
- .suggestions="${this.suggestions}"
152
- ></mention-textarea>
153
- </section>
154
-
155
- <section class="demo-section">
156
- <h2 class="display-large">Overflow: Hidden Test</h2>
157
- <p>
158
- This test ensures the popover works correctly even inside containers with overflow: hidden. The Popover API
159
- should handle this properly.
160
- </p>
161
-
162
- <div
163
- style="height: 150px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px;"
164
- >
165
- <p>Container with overflow: hidden (height: 150px)</p>
166
- <mention-textarea
167
- label="Test @mentions here"
168
- supporting-text="Type @ - the suggestions should appear outside this container"
169
- .suggestions="${this.suggestions}"
170
- ></mention-textarea>
171
- </div>
172
-
173
- <div
174
- style="height: 100px; width: 300px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px; margin-top: 20px;"
175
- >
176
- <p>Small container with overflow: hidden</p>
177
- <mention-textarea label="Constrained" .suggestions="${this.suggestions}"></mention-textarea>
178
- </div>
179
- </section>
180
-
181
- <style>
182
- .demo-section {
183
- max-width: 900px;
184
- margin: 40px auto;
185
- padding: 0 20px;
186
- }
187
-
188
- mention-textarea {
189
- width: 100%;
190
- margin-bottom: 20px;
191
- }
192
-
193
- pre {
194
- font-family: 'Courier New', monospace;
195
- font-size: 14px;
196
- white-space: pre-wrap;
197
- word-break: break-all;
198
- }
199
- </style>
200
- `
201
- }
202
- }
203
-
204
- const instance = new ComponentDemoPage()
205
- instance.render()
package/demo/elements/navigation/navigation-item.html DELETED
@@ -1,49 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Navigation item Demo</title>
7
- <link
8
- 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"
9
- rel="stylesheet"
10
- />
11
- <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
12
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
14
- <link href="../../page.css" rel="stylesheet" type="text/css" />
15
- <style>
16
- .nav-rail,
17
- .nav-bar {
18
- padding: 12px;
19
- border: 1px solid var(--md-sys-color-outline-variant);
20
- border-radius: 12px;
21
- width: fit-content;
22
- }
23
-
24
- .nav-rail {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 12px;
28
- }
29
-
30
- .nav-bar {
31
- display: flex;
32
- flex-direction: row;
33
- gap: 8px;
34
- }
35
-
36
- .demo-row {
37
- gap: 16px;
38
- }
39
-
40
- .wide {
41
- width: 360px;
42
- }
43
- </style>
44
- </head>
45
- <body data-gr-ext-disabled="next">
46
- <div id="app"></div>
47
- <script type="module" src="/.tmp/demo/elements/navigation/navigation-item.js"></script>
48
- </body>
49
- </html>
package/demo/elements/navigation/navigation-item.ts DELETED
@@ -1,131 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { reactive } from '../../../src/decorators/index.js'
4
-
5
- import '../../../src/elements/navigation/ui-navigation-item.js'
6
- import '../../../src/md/icons/ui-icon.js'
7
- import '../../../src/md/checkbox/ui-checkbox.js'
8
-
9
- class ComponentDemoPage extends DemoPage {
10
- @reactive()
11
- protected accessor selected = false
12
-
13
- @reactive()
14
- protected accessor disabled = false
15
-
16
- @reactive()
17
- protected accessor iconOnly = false
18
-
19
- @reactive()
20
- protected accessor withIcon = true
21
-
22
- constructor() {
23
- super()
24
- this.componentName = '<ui-navigation-item>'
25
- }
26
-
27
- override contentTemplate(): TemplateResult {
28
- return html`
29
- <section class="demo-section">
30
- <h3>Interactive demo</h3>
31
- <div class="demo-row">
32
- <div class="nav-rail">
33
- <ui-navigation-item ?selected="${this.selected}" ?disabled="${this.disabled}" ?iconOnly="${this.iconOnly}">
34
- ${this.withIcon ? html`<ui-icon slot="icon">inbox</ui-icon>` : ''} ${this.iconOnly ? '' : 'Inbox'}
35
- </ui-navigation-item>
36
- </div>
37
- </div>
38
- <div class="demo-row">
39
- <ui-checkbox
40
- id="selected"
41
- name="selected"
42
- @change="${this._toggleBooleanOption}"
43
- .checked=${this.selected}
44
- ></ui-checkbox>
45
- <label for="selected">Selected</label>
46
- <ui-checkbox
47
- id="disabled"
48
- name="disabled"
49
- @change="${this._toggleBooleanOption}"
50
- .checked=${this.disabled}
51
- ></ui-checkbox>
52
- <label for="disabled">Disabled</label>
53
- <ui-checkbox
54
- id="iconOnly"
55
- name="iconOnly"
56
- @change="${this._toggleBooleanOption}"
57
- .checked=${this.iconOnly}
58
- ></ui-checkbox>
59
- <label for="iconOnly">Icon only</label>
60
- <ui-checkbox
61
- id="withIcon"
62
- name="withIcon"
63
- @change="${this._toggleBooleanOption}"
64
- .checked=${this.withIcon}
65
- ></ui-checkbox>
66
- <label for="withIcon">With icon</label>
67
- </div>
68
- </section>
69
-
70
- <section class="demo-section">
71
- <h3>Navigation Rail</h3>
72
- <div class="demo-row">
73
- <div class="nav-rail">
74
- <ui-navigation-item selected>
75
- <ui-icon slot="icon">inbox</ui-icon>
76
- Inbox
77
- </ui-navigation-item>
78
- <ui-navigation-item>
79
- <ui-icon slot="icon">star</ui-icon>
80
- Starred
81
- </ui-navigation-item>
82
- <ui-navigation-item>
83
- <ui-icon slot="icon">send</ui-icon>
84
- Sent
85
- </ui-navigation-item>
86
- <ui-navigation-item disabled>
87
- <ui-icon slot="icon">drafts</ui-icon>
88
- Drafts
89
- </ui-navigation-item>
90
- </div>
91
- <div class="nav-rail">
92
- <ui-navigation-item iconOnly selected>
93
- <ui-icon slot="icon">inbox</ui-icon>
94
- </ui-navigation-item>
95
- <ui-navigation-item iconOnly>
96
- <ui-icon slot="icon">star</ui-icon>
97
- </ui-navigation-item>
98
- <ui-navigation-item iconOnly>
99
- <ui-icon slot="icon">send</ui-icon>
100
- </ui-navigation-item>
101
- <ui-navigation-item iconOnly disabled>
102
- <ui-icon slot="icon">drafts</ui-icon>
103
- </ui-navigation-item>
104
- </div>
105
-
106
- <div class="nav-rail wide">
107
- <ui-navigation-item selected>
108
- <ui-icon slot="icon">inbox</ui-icon>
109
- Inbox
110
- </ui-navigation-item>
111
- <ui-navigation-item>
112
- <ui-icon slot="icon">star</ui-icon>
113
- Starred
114
- </ui-navigation-item>
115
- <ui-navigation-item>
116
- <ui-icon slot="icon">send</ui-icon>
117
- Sent
118
- </ui-navigation-item>
119
- <ui-navigation-item disabled>
120
- <ui-icon slot="icon">drafts</ui-icon>
121
- Drafts
122
- </ui-navigation-item>
123
- </div>
124
- </div>
125
- </section>
126
- `
127
- }
128
- }
129
-
130
- const instance = new ComponentDemoPage()
131
- instance.render()
package/demo/elements/navigation/navigation.html DELETED
@@ -1,20 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Navigation item Demo</title>
7
- <link
8
- 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"
9
- rel="stylesheet"
10
- />
11
- <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
12
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
14
- <link href="../../page.css" rel="stylesheet" type="text/css" />
15
- </head>
16
- <body data-gr-ext-disabled="next">
17
- <div id="app"></div>
18
- <script type="module" src="/.tmp/demo/elements/navigation/navigation.js"></script>
19
- </body>
20
- </html>
package/demo/elements/navigation/navigation.ts DELETED
@@ -1,45 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { reactive } from '../../../src/decorators/index.js'
4
-
5
- import '../../../src/elements/navigation/ui-navigation-item.js'
6
- import '../../../src/elements/navigation/ui-navigation.js'
7
- import '../../../src/md/icons/ui-icon.js'
8
- import '../../../src/md/checkbox/ui-checkbox.js'
9
-
10
- class ComponentDemoPage extends DemoPage {
11
- @reactive()
12
- protected accessor selected = false
13
-
14
- constructor() {
15
- super()
16
- this.componentName = '<ui-navigation>'
17
- }
18
-
19
- override contentTemplate(): TemplateResult {
20
- return html`
21
- <section class="demo-section">
22
- <ui-navigation aria-label="Main navigation" current="page">
23
- <ui-navigation-item selected aria-current="page">
24
- <span slot="icon" aria-hidden="true">🏠</span>
25
- Home
26
- </ui-navigation-item>
27
- <ui-navigation-item>
28
- <span slot="icon" aria-hidden="true">🔍</span>
29
- Search
30
- </ui-navigation-item>
31
- <ui-navigation-item>
32
- <span slot="icon" aria-hidden="true">📁</span>
33
- Files
34
- </ui-navigation-item>
35
- <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1" aria-label="Settings">
36
- <span slot="icon" aria-hidden="true">⚙️</span>
37
- </ui-navigation-item>
38
- </ui-navigation>
39
- </section>
40
- `
41
- }
42
- }
43
-
44
- const instance = new ComponentDemoPage()
45
- instance.render()
package/demo/elements/project/index.html DELETED
@@ -1,29 +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 project</h1>
17
- <a href="../">Back</a>
18
- <nav>
19
- <dl>
20
- <dt><a href="request-editor.html">Project request editor</a></dt>
21
- <dd>Renders a specialized HTTP editor for HTTP project.</dd>
22
-
23
- <dt><a href="project-run-report.html">Project Run Report</a></dt>
24
- <dd>A view rendering the result of project execution.</dd>
25
- </dl>
26
- </nav>
27
- </main>
28
- </body>
29
- </html>
package/demo/elements/project/project-run-report.html DELETED
@@ -1,20 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <title>Project Run Report</title>
7
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
8
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
9
- <style>
10
- project-run-report {
11
- margin: 0 20px;
12
- }
13
- </style>
14
- </head>
15
- <body>
16
- <div id="app" class="with-nav"></div>
17
-
18
- <script type="module" src="/.tmp/demo/elements/project/project-run-report.js"></script>
19
- </body>
20
- </html>
package/demo/elements/project/project-run-report.ts DELETED
@@ -1,132 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { IRequestLogInit, ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
3
- import type { IProjectExecutionIteration, IProjectExecutionLog } from '@api-client/core/models/ProjectExecution.js'
4
- import { DemoPage } from '../../../src/demo/DemoPage.js'
5
- import { reactive } from '../../../src/decorators/index.js'
6
- import '../../../src/define/http-project/project-run-report.js'
7
- import { IRequestLog } from '@api-client/core/models/RequestLog.js'
8
-
9
- interface IProjectExecutionLogInit {
10
- iterations?: {
11
- size?: number
12
- }
13
- }
14
-
15
- class ComponentDemoPage extends DemoPage {
16
- override accessor componentName = 'Project Run Report'
17
-
18
- mock = new ProjectMock()
19
-
20
- @reactive() accessor report: IProjectExecutionLog | undefined
21
-
22
- constructor() {
23
- super()
24
- this._generateReport()
25
- }
26
-
27
- protected async _generateReport(opts: IProjectExecutionLogInit = {}): Promise<void> {
28
- const started = this.mock.time.timestamp()
29
- const ended = this.mock.time.timestamp({ min: started + 1 })
30
- const report: IProjectExecutionLog = {
31
- iterations: await this._generateIterations(opts),
32
- started,
33
- ended,
34
- }
35
- this.report = report
36
- }
37
-
38
- protected async _generateIterations(opts: IProjectExecutionLogInit = {}): Promise<IProjectExecutionIteration[]> {
39
- const sizeParam = opts.iterations && opts.iterations.size
40
- const size = typeof sizeParam === 'number' ? sizeParam : this.mock.types.number({ min: 1, max: 20 })
41
- const result: IProjectExecutionIteration[] = []
42
- for (let i = 0; i < size; i++) {
43
- const item = await this._generateIteration(i)
44
- result.push(item)
45
- }
46
- return result
47
- }
48
-
49
- protected async _generateIteration(index: number): Promise<IProjectExecutionIteration> {
50
- const result: IProjectExecutionIteration = {
51
- executed: [],
52
- index,
53
- variables: {},
54
- }
55
- const size = this.mock.types.number({ min: 1, max: 20 })
56
- for (let i = 0; i < size; i++) {
57
- const item = await this.generateResponse()
58
- result.executed.push(item)
59
- }
60
- return result
61
- }
62
-
63
- protected _generatorClick(e: Event): void {
64
- const node = e.target as HTMLButtonElement
65
- const { generator, type } = node.dataset
66
- if (generator && type) {
67
- this._runGenerator(generator, type)
68
- }
69
- }
70
-
71
- protected _generatorKeydown(e: KeyboardEvent): void {
72
- if (e.key !== 'Enter' && e.key !== 'Space') {
73
- return
74
- }
75
- const node = e.target as HTMLButtonElement
76
- const { generator, type } = node.dataset
77
- if (generator && type) {
78
- this._runGenerator(generator, type)
79
- }
80
- }
81
-
82
- protected _runGenerator(generator: string, type: string): void {
83
- if (generator === 'iteration') {
84
- this._generateReportIterations(type)
85
- }
86
- }
87
-
88
- protected async _generateReportIterations(type: string): Promise<void> {
89
- const opts: IProjectExecutionLogInit = {}
90
-
91
- if (type === 'single') {
92
- opts.iterations = {
93
- size: 1,
94
- }
95
- }
96
- await this._generateReport(opts)
97
- }
98
-
99
- async generateResponse(): Promise<IRequestLog> {
100
- const init: IRequestLogInit = {
101
- response: {
102
- // statusGroup: 2,
103
- // payload: {
104
- // force: true,
105
- // },
106
- timings: true,
107
- },
108
- }
109
- const log = await this.mock.projectRequest.log(init)
110
- return log
111
- }
112
-
113
- contentTemplate(): TemplateResult {
114
- return html`
115
- <section class="centered auto-width">
116
- <project-run-report .report="${this.report}"></project-run-report>
117
- </section>
118
- `
119
- }
120
-
121
- override navigationTemplate(): TemplateResult {
122
- return html`
123
- <nav @click="${this._generatorClick}" @keydown="${this._generatorKeydown}">
124
- <button class="nav-item" data-generator="iteration" data-type="any">Random</button>
125
- <button class="nav-item" data-generator="iteration" data-type="single">Single iteration</button>
126
- </nav>
127
- `
128
- }
129
- }
130
-
131
- const instance = new ComponentDemoPage()
132
- instance.render()
package/demo/elements/project/request-editor.html DELETED
@@ -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 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
- <style>
11
- .editor-wrapper {
12
- padding: 20px;
13
- margin-bottom: 40px;
14
- }
15
- </style>
16
- </head>
17
-
18
- <body class="demo">
19
- <div id="app"></div>
20
- <script type="module" src="/.tmp/demo/elements/project/request-editor.js"></script>
21
- </body>
22
-
23
- </html>