@api-client/ui 0.5.39 → 0.5.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (292) hide show
  1. package/build/src/elements/contextual-menu/{internals/ContextualMenu.d.ts → ContextualMenu.d.ts} +11 -6
  2. package/build/src/elements/contextual-menu/ContextualMenu.d.ts.map +1 -0
  3. package/build/src/elements/contextual-menu/{internals/ContextualMenu.js → ContextualMenu.js} +25 -3
  4. package/build/src/elements/contextual-menu/ContextualMenu.js.map +1 -0
  5. package/build/src/elements/contextual-menu/internals/types.d.ts +16 -7
  6. package/build/src/elements/contextual-menu/internals/types.d.ts.map +1 -1
  7. package/build/src/elements/contextual-menu/internals/types.js.map +1 -1
  8. package/build/tsconfig.tsbuildinfo +1 -0
  9. package/package.json +1 -1
  10. package/src/elements/contextual-menu/{internals/ContextualMenu.ts → ContextualMenu.ts} +31 -7
  11. package/src/elements/contextual-menu/internals/types.ts +17 -7
  12. package/.aiexclude +0 -3
  13. package/.cursor/rules/html-and-css-best-practices.mdc +0 -63
  14. package/.cursor/rules/lit-best-practices.mdc +0 -89
  15. package/.editorconfig +0 -29
  16. package/.github/CONTRIBUTING.md +0 -24
  17. package/.github/instructions/html-and-css-best-practices.instructions.md +0 -70
  18. package/.github/instructions/lit-best-practices.instructions.md +0 -90
  19. package/.github/release.yml +0 -14
  20. package/.github/stale.yml +0 -23
  21. package/.github/workflows/auto-release.yml +0 -182
  22. package/.github/workflows/release.yml +0 -82
  23. package/.prettierrc.js +0 -14
  24. package/.vscode/settings.json +0 -18
  25. package/RELEASE.md +0 -163
  26. package/RELEASE_SETUP.md +0 -235
  27. package/build/src/demo/DemoPage.d.ts +0 -81
  28. package/build/src/demo/DemoPage.d.ts.map +0 -1
  29. package/build/src/demo/DemoPage.js +0 -175
  30. package/build/src/demo/DemoPage.js.map +0 -1
  31. package/build/src/demo/DemoStyles.d.ts +0 -3
  32. package/build/src/demo/DemoStyles.d.ts.map +0 -1
  33. package/build/src/demo/DemoStyles.js +0 -60
  34. package/build/src/demo/DemoStyles.js.map +0 -1
  35. package/build/src/elements/contextual-menu/internals/ContextualMenu.d.ts.map +0 -1
  36. package/build/src/elements/contextual-menu/internals/ContextualMenu.js.map +0 -1
  37. package/build/test/elements/navigation/Navigation.test.d.ts +0 -3
  38. package/build/test/elements/navigation/Navigation.test.d.ts.map +0 -1
  39. package/build/test/elements/navigation/Navigation.test.js +0 -113
  40. package/build/test/elements/navigation/Navigation.test.js.map +0 -1
  41. package/commitlint.config.cjs +0 -2
  42. package/demo/elements/authorization/AuthPlugin.js +0 -57
  43. package/demo/elements/authorization/AuthProxy.js +0 -215
  44. package/demo/elements/authorization/api-key.html +0 -27
  45. package/demo/elements/authorization/api-key.ts +0 -44
  46. package/demo/elements/authorization/basic.html +0 -27
  47. package/demo/elements/authorization/basic.ts +0 -43
  48. package/demo/elements/authorization/bearer.html +0 -27
  49. package/demo/elements/authorization/bearer.ts +0 -43
  50. package/demo/elements/authorization/env.js +0 -8
  51. package/demo/elements/authorization/index.html +0 -44
  52. package/demo/elements/authorization/ntlm.html +0 -27
  53. package/demo/elements/authorization/ntlm.ts +0 -43
  54. package/demo/elements/authorization/oauth-authorize.html +0 -75
  55. package/demo/elements/authorization/oauth-authorize.ts +0 -40
  56. package/demo/elements/authorization/oauth-error.html +0 -18
  57. package/demo/elements/authorization/oauth-error.ts +0 -10
  58. package/demo/elements/authorization/oauth-popup.html +0 -36
  59. package/demo/elements/authorization/oauth2.html +0 -27
  60. package/demo/elements/authorization/oauth2.ts +0 -100
  61. package/demo/elements/authorization/oidc.html +0 -27
  62. package/demo/elements/authorization/oidc.ts +0 -139
  63. package/demo/elements/authorization/private.crt +0 -31
  64. package/demo/elements/authorization/private.csr +0 -28
  65. package/demo/elements/authorization/private.key +0 -51
  66. package/demo/elements/authorization/private.pem +0 -31
  67. package/demo/elements/authorization/redirect.html +0 -20
  68. package/demo/elements/authorization/ssl-commands.sh +0 -30
  69. package/demo/elements/authorization/ssl.conf +0 -24
  70. package/demo/elements/autocomplete/index.html +0 -64
  71. package/demo/elements/autocomplete/index.ts +0 -171
  72. package/demo/elements/code-editor/CodeEditorDemo.ts +0 -173
  73. package/demo/elements/code-editor/index.html +0 -19
  74. package/demo/elements/context-menu/DemoIcons.ts +0 -21
  75. package/demo/elements/context-menu/basic.html +0 -25
  76. package/demo/elements/context-menu/basic.ts +0 -119
  77. package/demo/elements/context-menu/custom-data.html +0 -25
  78. package/demo/elements/context-menu/custom-data.ts +0 -62
  79. package/demo/elements/context-menu/demo.css +0 -28
  80. package/demo/elements/context-menu/enabled-state.html +0 -25
  81. package/demo/elements/context-menu/enabled-state.ts +0 -73
  82. package/demo/elements/context-menu/icons.html +0 -25
  83. package/demo/elements/context-menu/icons.ts +0 -64
  84. package/demo/elements/context-menu/index.html +0 -43
  85. package/demo/elements/context-menu/nested.html +0 -25
  86. package/demo/elements/context-menu/nestedt.ts +0 -152
  87. package/demo/elements/context-menu/no-execute.html +0 -25
  88. package/demo/elements/context-menu/no-execute.ts +0 -134
  89. package/demo/elements/context-menu/radio-menu.html +0 -25
  90. package/demo/elements/context-menu/radio-menu.ts +0 -83
  91. package/demo/elements/context-menu/separators.html +0 -25
  92. package/demo/elements/context-menu/separators.ts +0 -172
  93. package/demo/elements/currency/index.html +0 -91
  94. package/demo/elements/currency/index.ts +0 -352
  95. package/demo/elements/environment/environment-editor.html +0 -20
  96. package/demo/elements/environment/environment-editor.ts +0 -49
  97. package/demo/elements/environment/index.html +0 -33
  98. package/demo/elements/environment/server-editor.html +0 -20
  99. package/demo/elements/environment/server-editor.ts +0 -67
  100. package/demo/elements/environment/variables-editor.html +0 -20
  101. package/demo/elements/environment/variables-editor.ts +0 -94
  102. package/demo/elements/har/har-viewer.html +0 -20
  103. package/demo/elements/har/har-viewer.ts +0 -76
  104. package/demo/elements/har/har1.har +0 -3044
  105. package/demo/elements/har/har2.json +0 -439
  106. package/demo/elements/har/index.html +0 -26
  107. package/demo/elements/highlight/example.md +0 -27
  108. package/demo/elements/highlight/index.html +0 -31
  109. package/demo/elements/highlight/marked-highlight.html +0 -132
  110. package/demo/elements/highlight/marked-highlight.ts +0 -22
  111. package/demo/elements/highlight/prism-highlight.html +0 -62
  112. package/demo/elements/highlight/prism-highlight.ts +0 -17
  113. package/demo/elements/http/body-editor.html +0 -17
  114. package/demo/elements/http/body-editor.ts +0 -115
  115. package/demo/elements/http/headers.html +0 -17
  116. package/demo/elements/http/headers.ts +0 -59
  117. package/demo/elements/http/http-assertions.html +0 -20
  118. package/demo/elements/http/http-assertions.ts +0 -89
  119. package/demo/elements/http/http-flows.html +0 -23
  120. package/demo/elements/http/http-flows.ts +0 -89
  121. package/demo/elements/http/index.html +0 -45
  122. package/demo/elements/http/request-editor.html +0 -26
  123. package/demo/elements/http/request-editor.ts +0 -197
  124. package/demo/elements/http/request-log.html +0 -16
  125. package/demo/elements/http/request-log.ts +0 -136
  126. package/demo/elements/http/url-editing.html +0 -17
  127. package/demo/elements/http/url-editing.ts +0 -112
  128. package/demo/elements/icons/index.html +0 -81
  129. package/demo/elements/icons/index.ts +0 -52
  130. package/demo/elements/index.html +0 -72
  131. package/demo/elements/mention-textarea/index.html +0 -19
  132. package/demo/elements/mention-textarea/index.ts +0 -205
  133. package/demo/elements/navigation/navigation-item.html +0 -49
  134. package/demo/elements/navigation/navigation-item.ts +0 -131
  135. package/demo/elements/navigation/navigation.html +0 -20
  136. package/demo/elements/navigation/navigation.ts +0 -45
  137. package/demo/elements/project/index.html +0 -29
  138. package/demo/elements/project/project-run-report.html +0 -20
  139. package/demo/elements/project/project-run-report.ts +0 -132
  140. package/demo/elements/project/request-editor.html +0 -23
  141. package/demo/elements/project/request-editor.ts +0 -232
  142. package/demo/elements/user/user-avatar.html +0 -17
  143. package/demo/elements/user/user-avatar.ts +0 -60
  144. package/demo/env.js +0 -4
  145. package/demo/index.html +0 -34
  146. package/demo/layout/index.html +0 -94
  147. package/demo/layout/index.ts +0 -190
  148. package/demo/md/DemoStyles.ts +0 -61
  149. package/demo/md/UiDemoPage.ts +0 -6
  150. package/demo/md/buttons/button.html +0 -121
  151. package/demo/md/buttons/button.ts +0 -246
  152. package/demo/md/buttons/group.html +0 -36
  153. package/demo/md/buttons/group.ts +0 -171
  154. package/demo/md/checkbox/index.html +0 -39
  155. package/demo/md/checkbox/index.ts +0 -220
  156. package/demo/md/chip/chip.html +0 -70
  157. package/demo/md/chip/chip.ts +0 -219
  158. package/demo/md/chip/pawel6c9a.jpg +0 -0
  159. package/demo/md/collapse/CustomDetail.ts +0 -89
  160. package/demo/md/collapse/collapse.html +0 -21
  161. package/demo/md/collapse/collapse.ts +0 -78
  162. package/demo/md/date-picker/date-picker.ts +0 -336
  163. package/demo/md/date-picker/index.html +0 -171
  164. package/demo/md/dialog/confirm-dialog.html +0 -49
  165. package/demo/md/dialog/confirm-dialog.ts +0 -121
  166. package/demo/md/dialog/dialog.html +0 -25
  167. package/demo/md/dialog/dialog.ts +0 -468
  168. package/demo/md/dropdown-list/index.html +0 -31
  169. package/demo/md/dropdown-list/index.ts +0 -158
  170. package/demo/md/icon-button/index.html +0 -122
  171. package/demo/md/icon-button/index.ts +0 -132
  172. package/demo/md/index.html +0 -73
  173. package/demo/md/inputs/input.html +0 -73
  174. package/demo/md/inputs/input.ts +0 -278
  175. package/demo/md/inputs/radio.html +0 -39
  176. package/demo/md/inputs/radio.ts +0 -156
  177. package/demo/md/inputs/switch.html +0 -45
  178. package/demo/md/inputs/switch.ts +0 -144
  179. package/demo/md/list/list.html +0 -65
  180. package/demo/md/list/list.ts +0 -204
  181. package/demo/md/listbox/listbox.html +0 -31
  182. package/demo/md/listbox/listbox.ts +0 -27
  183. package/demo/md/menu/index.html +0 -19
  184. package/demo/md/menu/index.ts +0 -514
  185. package/demo/md/notification/snack.html +0 -21
  186. package/demo/md/notification/snack.ts +0 -70
  187. package/demo/md/progress/progress.html +0 -46
  188. package/demo/md/progress/progress.ts +0 -161
  189. package/demo/md/segmented-button/index.html +0 -21
  190. package/demo/md/segmented-button/index.ts +0 -55
  191. package/demo/md/select/index.html +0 -16
  192. package/demo/md/select/index.ts +0 -217
  193. package/demo/md/tabs/tabs.html +0 -40
  194. package/demo/md/tabs/tabs.ts +0 -214
  195. package/demo/oauth-popup.html +0 -36
  196. package/demo/page.css +0 -8
  197. package/demo/resources/calendar-month.png +0 -0
  198. package/demo/resources/favorite.png +0 -0
  199. package/demo/resources/fingerprint.png +0 -0
  200. package/demo/resources/home-work.png +0 -0
  201. package/demo/resources/mood.png +0 -0
  202. package/demo/resources/print.png +0 -0
  203. package/demo/resources/stars.png +0 -0
  204. package/demo/resources/theaters.png +0 -0
  205. package/demo/tsconfig.json +0 -4
  206. package/eslint.config.js +0 -97
  207. package/scripts/copy-assets.js +0 -21
  208. package/scripts/release.js +0 -66
  209. package/src/demo/DemoPage.ts +0 -169
  210. package/src/demo/DemoStyles.ts +0 -60
  211. package/test/README.md +0 -375
  212. package/test/contextual-menu/ContextMenu.test.ts +0 -760
  213. package/test/contextual-menu/ContextMenuElement.test.ts +0 -569
  214. package/test/core/activity.spec.ts +0 -413
  215. package/test/core/activity_manager.spec.ts +0 -544
  216. package/test/core/application.spec.ts +0 -218
  217. package/test/core/fragment.spec.ts +0 -565
  218. package/test/core/fragment_manager.spec.ts +0 -404
  219. package/test/core/live_data.spec.ts +0 -558
  220. package/test/core/renderer.spec.ts +0 -113
  221. package/test/dom-assertions.test.ts +0 -182
  222. package/test/elements/MonacoSetup.ts +0 -65
  223. package/test/elements/authorization/basic-method.test.ts +0 -177
  224. package/test/elements/authorization/bearer-method.test.ts +0 -143
  225. package/test/elements/authorization/ntlm-method.test.ts +0 -219
  226. package/test/elements/authorization/oauth2-client-credentials-method.test.ts +0 -334
  227. package/test/elements/authorization/oauth2-code-method.test.ts +0 -320
  228. package/test/elements/authorization/oauth2-custom-grant-method.test.ts +0 -255
  229. package/test/elements/authorization/oauth2-device-code-method.test.ts +0 -371
  230. package/test/elements/authorization/oauth2-implicit-method.test.ts +0 -407
  231. package/test/elements/authorization/oauth2-jwt-method.test.ts +0 -217
  232. package/test/elements/authorization/oauth2-password-method.test.ts +0 -275
  233. package/test/elements/authorization/openid-method.test.ts +0 -591
  234. package/test/elements/autocomplete/autocomplete-input.spec.ts +0 -646
  235. package/test/elements/code-editor/code-editor.accessibility.test.ts +0 -298
  236. package/test/elements/code-editor/code-editor.test.ts +0 -574
  237. package/test/elements/currency/CurrencyPicker.accessibility.test.ts +0 -328
  238. package/test/elements/currency/CurrencyPicker.core.test.ts +0 -318
  239. package/test/elements/currency/CurrencyPicker.integration.test.ts +0 -482
  240. package/test/elements/currency/CurrencyPicker.test.ts +0 -486
  241. package/test/elements/data-table/DataTable.browser.test.ts +0 -649
  242. package/test/elements/har/HarUtils.test.ts +0 -45
  243. package/test/elements/har/HarViewerElement.test.ts +0 -687
  244. package/test/elements/har/test-data/har1.har +0 -3044
  245. package/test/elements/highlight/MarkedHighlightElement.test.ts +0 -452
  246. package/test/elements/highlight/PrismHighlightElement.test.ts +0 -79
  247. package/test/elements/highlight/PrismHighlighter.test.ts +0 -94
  248. package/test/elements/highlight/remoteSanitization.md +0 -1
  249. package/test/elements/highlight/test.md +0 -3
  250. package/test/elements/highlight/test1.md +0 -3
  251. package/test/elements/highlight/test2.md +0 -1
  252. package/test/elements/http/BodyFormdataEditorElement.test.ts +0 -482
  253. package/test/elements/http/BodyMultipartEditorElement.test.ts +0 -658
  254. package/test/elements/http/BodyRawEditorElement.test.ts +0 -90
  255. package/test/elements/http/CertificateAdd.test.ts +0 -457
  256. package/test/elements/http/HttpAssertions.test.ts +0 -994
  257. package/test/elements/http/HttpFlows.test.ts +0 -502
  258. package/test/elements/http/UrlEncodeUtils.test.ts +0 -202
  259. package/test/elements/layout/SplitItem.test.ts +0 -440
  260. package/test/elements/layout/SplitLayoutManager.test.ts +0 -1501
  261. package/test/elements/layout/SplitPanel.test.ts +0 -1109
  262. package/test/elements/mention-textarea/MentionTextArea.basic.test.ts +0 -114
  263. package/test/elements/mention-textarea/MentionTextArea.test.ts +0 -613
  264. package/test/elements/navigation/Navigation.test.ts +0 -120
  265. package/test/env.ts +0 -15
  266. package/test/events/EventTypes.test.ts +0 -363
  267. package/test/events/EventsTestHelpers.ts +0 -16
  268. package/test/helpers/TestUtils.ts +0 -243
  269. package/test/helpers/UiMock.ts +0 -185
  270. package/test/lib/Dom.test.ts +0 -231
  271. package/test/md/button/UiButton.test.ts +0 -347
  272. package/test/md/button/UiIconButton.test.ts +0 -155
  273. package/test/md/chip/UiChip.test.ts +0 -219
  274. package/test/md/collapse/UiCollapse.test.ts +0 -250
  275. package/test/md/collapse/flex-layout.test.ts +0 -105
  276. package/test/md/date-time/DateTime.test.ts +0 -348
  277. package/test/md/dialog/UiConfirmDialog.test.ts +0 -131
  278. package/test/md/dialog/UiDialog.test.ts +0 -759
  279. package/test/md/menu/Menu.test.ts +0 -855
  280. package/test/md/menu/MenuIntegration.test.ts +0 -426
  281. package/test/md/menu/MenuItem.test.ts +0 -652
  282. package/test/md/menu/SubMenu.test.ts +0 -410
  283. package/test/md/progress/UiCircularProgressElement.test.ts +0 -481
  284. package/test/md/progress/UiProgressElement.test.ts +0 -117
  285. package/test/md/progress/UiRangeElement.test.ts +0 -156
  286. package/test/md/select/Select.test.ts +0 -925
  287. package/test/plugins/takeScreenshotPlugin.js +0 -35
  288. package/test/setup.test.ts +0 -217
  289. package/test/setup.ts +0 -117
  290. package/test/tsconfig.json +0 -7
  291. package/web-dev-server.config.js +0 -21
  292. package/web-test-runner.config.js +0 -90
package/demo/elements/context-menu/enabled-state.ts DELETED
@@ -1,73 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
4
- import {
5
- ContextMenuCommand,
6
- EnabledMenuOptions,
7
- CommandExecuteOptions,
8
- } from '../../../src/elements/contextual-menu/internals/types.js'
9
- import { copy, paste } from './DemoIcons.js'
10
-
11
- interface StoreSchema {
12
- copy?: string
13
- }
14
-
15
- class ComponentPage extends DemoPage {
16
- override accessor componentName = 'Enabled state demo'
17
-
18
- override firstRender(): void {
19
- super.firstRender()
20
- this.initContextMenu()
21
- }
22
-
23
- initContextMenu(): void {
24
- const container = document.body.querySelector('#workspace') as HTMLElement
25
- const instance = new ContextualMenu<StoreSchema>(container)
26
- const commands: ContextMenuCommand<StoreSchema>[] = [
27
- {
28
- target: 'root',
29
- label: 'Paste',
30
- title: 'Paste the value',
31
- icon: paste,
32
- execute: (args: CommandExecuteOptions<StoreSchema>): void => {
33
- console.log(args)
34
- const copyId = args.store.copy
35
- console.log('Pasting', copyId)
36
- delete args.store.copy
37
- },
38
- enabled: (args: EnabledMenuOptions<StoreSchema>): boolean => {
39
- const copyId = args.store.copy
40
- return !!copyId
41
- },
42
- },
43
- {
44
- target: 'div.target',
45
- label: 'Copy',
46
- title: 'Copies the object',
47
- icon: copy,
48
- execute: (args: CommandExecuteOptions<StoreSchema>): void => {
49
- const { id } = args.target.dataset
50
- args.store.copy = id
51
- },
52
- },
53
- ]
54
- instance.registerCommands(commands)
55
- instance.connect()
56
- }
57
-
58
- contentTemplate(): TemplateResult {
59
- return html`
60
- <a href="./">Back</a>
61
- <section class="demo-section">
62
- <h2 class="title-large">Basic contextual menu</h2>
63
- <div id="workspace">
64
- <div class="target" data-id="test-value"></div>
65
- </div>
66
- <p>The "paste" command is enabled after the "copy" command on the target box is executed.</p>
67
- </section>
68
- `
69
- }
70
- }
71
-
72
- const instance = new ComponentPage()
73
- instance.render()
package/demo/elements/context-menu/icons.html DELETED
@@ -1,25 +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>Context menu with icons</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link
11
- 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"
12
- rel="stylesheet"
13
- />
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
- <link href="../../page.css" rel="stylesheet" type="text/css" />
17
- <link rel="stylesheet" href="./demo.css"/>
18
- </head>
19
-
20
- <body class="demo">
21
- <div id="app"></div>
22
- <script type="module" src="/.tmp/demo/elements/context-menu/icons.js"></script>
23
- </body>
24
-
25
- </html>
package/demo/elements/context-menu/icons.ts DELETED
@@ -1,64 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
4
- import { ContextMenuCommand, CommandExecuteOptions } from '../../../src/elements/contextual-menu/internals/types.js'
5
- import { copy, paste, flag } from './DemoIcons.js'
6
-
7
- class ComponentPage extends DemoPage {
8
- override accessor componentName = 'Icons example'
9
-
10
- override firstRender(): void {
11
- super.firstRender()
12
- this.initContextMenu()
13
- }
14
-
15
- initContextMenu(): void {
16
- const container = document.body.querySelector('#workspace') as HTMLElement
17
- const instance = new ContextualMenu(container)
18
- const commands: ContextMenuCommand[] = [
19
- {
20
- target: 'root',
21
- label: 'Paste',
22
- title: 'Paste the value',
23
- icon: paste,
24
- execute: (args: CommandExecuteOptions): void => {
25
- console.log(args)
26
- },
27
- },
28
- {
29
- target: 'root',
30
- label: 'Copy',
31
- title: 'Copies the object',
32
- icon: copy,
33
- execute: (args: CommandExecuteOptions): void => {
34
- console.log(args)
35
- },
36
- },
37
- {
38
- target: 'root',
39
- label: 'Flag',
40
- icon: flag,
41
- execute: (args: CommandExecuteOptions): void => {
42
- console.log(args)
43
- },
44
- },
45
- ]
46
- instance.registerCommands(commands)
47
- instance.connect()
48
- }
49
-
50
- contentTemplate(): TemplateResult {
51
- return html`
52
- <a href="./">Back</a>
53
- <section class="demo-section">
54
- <h2 class="title-large">Contextual menu</h2>
55
- <div id="workspace">
56
- <div class="target" data-id="test-value"></div>
57
- </div>
58
- </section>
59
- `
60
- }
61
- }
62
-
63
- const instance = new ComponentPage()
64
- instance.render()
package/demo/elements/context-menu/index.html DELETED
@@ -1,43 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Context menu</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>Context menu</h1>
17
- <a href="../">Back</a>
18
- <article>
19
- A library for highly customizable context menu for web apps.
20
- </article>
21
- <nav>
22
- <dl>
23
- <dt><a href="basic.html">Basic demo</a></dt>
24
- <dd>Context menu with basic options.</dd>
25
- <dt><a href="enabled-state.html">Enabled state</a></dt>
26
- <dd>Enabled state manipulation.</dd>
27
- <dt><a href="custom-data.html">Custom data</a></dt>
28
- <dd>Triggering the menu via DOM event with custom data.</dd>
29
- <dt><a href="icons.html">Menu icons</a></dt>
30
- <dd>Example of using icons.</dd>
31
- <dt><a href="nested.html">Nested menu</a></dt>
32
- <dd>Nested context menu.</dd>
33
- <dt><a href="no-execute.html">No execute menu</a></dt>
34
- <dd>Event based menu selection handler.</dd>
35
- <dt><a href="separators.html">Context menu with separators</a></dt>
36
- <dd>An example of using separators.</dd>
37
- <dt><a href="radio-menu.html">Context menu with radio options</a></dt>
38
- <dd>An example of using radio/checked selection.</dd>
39
- </dl>
40
- </nav>
41
- </main>
42
- </body>
43
- </html>
package/demo/elements/context-menu/nested.html DELETED
@@ -1,25 +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>Nested context menu</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link
11
- 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"
12
- rel="stylesheet"
13
- />
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
- <link href="../../page.css" rel="stylesheet" type="text/css" />
17
- <link rel="stylesheet" href="./demo.css"/>
18
- </head>
19
-
20
- <body class="demo">
21
- <div id="app"></div>
22
- <script type="module" src="/.tmp/demo/elements/context-menu/nestedt.js"></script>
23
- </body>
24
-
25
- </html>
package/demo/elements/context-menu/nestedt.ts DELETED
@@ -1,152 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
4
- import { ContextMenuCommand, CommandExecuteOptions } from '../../../src/elements/contextual-menu/internals/types.js'
5
- import { formatSize, copy, paste, title } from './DemoIcons.js'
6
-
7
- class ComponentPage extends DemoPage {
8
- override accessor componentName = 'Nested menus'
9
-
10
- constructor() {
11
- super()
12
- this.componentName = 'Nested menus'
13
- }
14
-
15
- override firstRender(): void {
16
- super.firstRender()
17
- this.initContextMenu()
18
- }
19
-
20
- initContextMenu(): void {
21
- const container = document.body.querySelector('#workspace') as HTMLElement
22
- const instance = new ContextualMenu(container)
23
- const commands: ContextMenuCommand[] = [
24
- {
25
- target: 'root',
26
- label: 'Font size',
27
- icon: formatSize,
28
- execute: (args: CommandExecuteOptions): void => {
29
- console.log('Selected font size:', args.item.id)
30
- },
31
- children: [
32
- {
33
- label: '0.75 rem',
34
- id: '0.75rem',
35
- },
36
- {
37
- label: '1 rem',
38
- id: '1rem',
39
- },
40
- {
41
- label: '1.25 rem',
42
- id: '1.25rem',
43
- },
44
- {
45
- label: '1.5 rem',
46
- id: '1.5rem',
47
- },
48
- {
49
- label: '2 rem',
50
- id: '2rem',
51
- },
52
- ],
53
- },
54
- {
55
- target: 'root',
56
- label: 'Font family',
57
- icon: title,
58
- execute: (args: CommandExecuteOptions): void => {
59
- console.log('Selected font family:', args.item.id)
60
- },
61
- children: [
62
- {
63
- label: 'Arial',
64
- id: 'Arial',
65
- },
66
- {
67
- label: 'Calibri',
68
- id: 'Calibri',
69
- },
70
- {
71
- label: 'Consolas',
72
- id: 'Consolas',
73
- },
74
- {
75
- label: 'Courier New',
76
- id: 'Courier New',
77
- },
78
- {
79
- label: 'Open Sans',
80
- id: 'Open Sans',
81
- },
82
- {
83
- label: 'Roboto',
84
- id: 'Roboto',
85
- },
86
- {
87
- label: 'Times New Roman',
88
- id: 'Times New Roman',
89
- },
90
- ],
91
- },
92
- {
93
- target: 'root',
94
- label: 'Paste',
95
- title: 'Paste the value',
96
- icon: paste,
97
- execute: (args: CommandExecuteOptions): void => {
98
- console.log(args)
99
- },
100
- },
101
- {
102
- target: 'root',
103
- label: 'Copy',
104
- title: 'Copies the object',
105
- icon: copy,
106
- execute: (args: CommandExecuteOptions): void => {
107
- console.log(args)
108
- },
109
- },
110
- {
111
- target: 'root',
112
- label: 'Add',
113
- children: [
114
- {
115
- label: 'Event',
116
- children: [
117
- {
118
- label: 'Publish event',
119
- id: 'event-publish',
120
- },
121
- {
122
- label: 'Subscribe event',
123
- id: 'event-subscribe',
124
- },
125
- ],
126
- },
127
- ],
128
- execute: (args: CommandExecuteOptions): void => {
129
- console.log(args)
130
- },
131
- },
132
- ]
133
- instance.registerCommands(commands)
134
- instance.connect()
135
- }
136
-
137
- contentTemplate(): TemplateResult {
138
- return html`
139
- <a href="./">Back</a>
140
- <section class="demo-section">
141
- <h2 class="title-large">Nested menu</h2>
142
- <div id="workspace">
143
- <div class="target" data-id="test-value"></div>
144
- </div>
145
- </section>
146
- </section>
147
- `
148
- }
149
- }
150
-
151
- const instance = new ComponentPage()
152
- instance.render()
package/demo/elements/context-menu/no-execute.html DELETED
@@ -1,25 +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>No execute function context menu</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link
11
- 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"
12
- rel="stylesheet"
13
- />
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
- <link href="../../page.css" rel="stylesheet" type="text/css" />
17
- <link rel="stylesheet" href="./demo.css"/>
18
- </head>
19
-
20
- <body class="demo">
21
- <div id="app"></div>
22
- <script type="module" src="/.tmp/demo/elements/context-menu/no-execute.js"></script>
23
- </body>
24
-
25
- </html>
package/demo/elements/context-menu/no-execute.ts DELETED
@@ -1,134 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
4
- import { ContextMenuCommand } from '../../../src/elements/contextual-menu/internals/types.js'
5
- import { formatSize, copy, paste, title } from './DemoIcons.js'
6
-
7
- class ComponentPage extends DemoPage {
8
- override accessor componentName = 'Event based menu'
9
-
10
- override firstRender(): void {
11
- super.firstRender()
12
- this.initContextMenu()
13
- }
14
-
15
- initContextMenu(): void {
16
- const container = document.body.querySelector('#workspace') as HTMLElement
17
- const instance = new ContextualMenu(container)
18
- const commands: ContextMenuCommand[] = [
19
- {
20
- target: 'root',
21
- label: 'Font size',
22
- icon: formatSize,
23
- children: [
24
- {
25
- label: '0.75 rem',
26
- id: '0.75rem',
27
- },
28
- {
29
- label: '1 rem',
30
- id: '1rem',
31
- },
32
- {
33
- label: '1.25 rem',
34
- id: '1.25rem',
35
- },
36
- {
37
- label: '1.5 rem',
38
- id: '1.5rem',
39
- },
40
- {
41
- label: '2 rem',
42
- id: '2rem',
43
- },
44
- ],
45
- },
46
- {
47
- target: 'root',
48
- label: 'Font family',
49
- icon: title,
50
- children: [
51
- {
52
- label: 'Arial',
53
- id: 'Arial',
54
- },
55
- {
56
- label: 'Calibri',
57
- id: 'Calibri',
58
- },
59
- {
60
- label: 'Consolas',
61
- id: 'Consolas',
62
- },
63
- {
64
- label: 'Courier New',
65
- id: 'Courier New',
66
- },
67
- {
68
- label: 'Open Sans',
69
- id: 'Open Sans',
70
- },
71
- {
72
- label: 'Roboto',
73
- id: 'Roboto',
74
- },
75
- {
76
- label: 'Times New Roman',
77
- id: 'Times New Roman',
78
- },
79
- ],
80
- },
81
- {
82
- target: 'root',
83
- label: 'Paste',
84
- title: 'Paste the value',
85
- icon: paste,
86
- },
87
- {
88
- target: 'root',
89
- label: 'Copy',
90
- title: 'Copies the object',
91
- icon: copy,
92
- },
93
- {
94
- target: 'root',
95
- label: 'Add',
96
- children: [
97
- {
98
- label: 'Event',
99
- children: [
100
- {
101
- label: 'Publish event',
102
- id: 'event-publish',
103
- },
104
- {
105
- label: 'Subscribe event',
106
- id: 'event-subscribe',
107
- },
108
- ],
109
- },
110
- ],
111
- },
112
- ]
113
- instance.registerCommands(commands)
114
- instance.connect()
115
- instance.addEventListener('execute', (e: Event): void => {
116
- console.log((e as CustomEvent).detail)
117
- })
118
- }
119
-
120
- contentTemplate(): TemplateResult {
121
- return html`
122
- <a href="./">Back</a>
123
- <section class="demo-section">
124
- <h2 class="title-large">No "execute" function menu</h2>
125
- <div id="workspace">
126
- <div class="target" data-id="test-value"></div>
127
- </div>
128
- </section>
129
- `
130
- }
131
- }
132
-
133
- const instance = new ComponentPage()
134
- instance.render()
package/demo/elements/context-menu/radio-menu.html DELETED
@@ -1,25 +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>Radio items context menu</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link
11
- 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"
12
- rel="stylesheet"
13
- />
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
- <link href="../../page.css" rel="stylesheet" type="text/css" />
17
- <link rel="stylesheet" href="./demo.css"/>
18
- </head>
19
-
20
- <body class="demo">
21
- <div id="app"></div>
22
- <script type="module" src="/.tmp/demo/elements/context-menu/radio-menu.js"></script>
23
- </body>
24
-
25
- </html>
package/demo/elements/context-menu/radio-menu.ts DELETED
@@ -1,83 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
- import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
4
- import {
5
- ContextMenuCommand,
6
- CheckedMenuOptions,
7
- CommandExecuteOptions,
8
- } from '../../../src/elements/contextual-menu/internals/types.js'
9
-
10
- interface StoreSchema {
11
- 'font-size': string
12
- }
13
-
14
- class ComponentPage extends DemoPage {
15
- override accessor componentName = 'Radio items context menu'
16
-
17
- override firstRender(): void {
18
- super.firstRender()
19
- this.initContextMenu()
20
- }
21
-
22
- initContextMenu(): void {
23
- const container = document.body.querySelector('#workspace') as HTMLElement
24
- const instance = new ContextualMenu<StoreSchema>(container)
25
- const commands: ContextMenuCommand<StoreSchema>[] = [
26
- {
27
- target: 'all',
28
- label: 'Font',
29
- title: 'Select a default font for the UI',
30
- execute: (ctx: CommandExecuteOptions<StoreSchema>): void => {
31
- const size = ctx.item.id.replace('font-', '')
32
- ctx.store['font-size'] = size
33
- },
34
- children: [
35
- {
36
- type: 'radio',
37
- label: 'Small',
38
- id: 'font-small',
39
- checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
40
- const fs = ctx.store['font-size']
41
- return fs === 'small'
42
- },
43
- },
44
- {
45
- type: 'radio',
46
- label: 'Normal',
47
- id: 'font-normal',
48
- checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
49
- const fs = ctx.store['font-size']
50
- return !fs || fs === 'normal'
51
- },
52
- },
53
- {
54
- type: 'radio',
55
- label: 'Large',
56
- id: 'font-large',
57
- checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
58
- const fs = ctx.store['font-size']
59
- return fs === 'large'
60
- },
61
- },
62
- ],
63
- },
64
- ]
65
- instance.registerCommands(commands)
66
- instance.connect()
67
- }
68
-
69
- contentTemplate(): TemplateResult {
70
- return html`
71
- <a href="./">Back</a>
72
- <section class="demo-section">
73
- <h2 class="title-large">Radio selection</h2>
74
- <div id="workspace">
75
- <section class="target">Section</section>
76
- </div>
77
- </section>
78
- `
79
- }
80
- }
81
-
82
- const instance = new ComponentPage()
83
- instance.render()
package/demo/elements/context-menu/separators.html DELETED
@@ -1,25 +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>Context menu with separators</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link
11
- 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"
12
- rel="stylesheet"
13
- />
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
- <link href="../../page.css" rel="stylesheet" type="text/css" />
17
- <link rel="stylesheet" href="./demo.css"/>
18
- </head>
19
-
20
- <body class="demo">
21
- <div id="app"></div>
22
- <script type="module" src="/.tmp/demo/elements/context-menu/separators.js"></script>
23
- </body>
24
-
25
- </html>