@api-client/ui 0.5.38 → 0.5.40

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