@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/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>