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