@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/md/list/list.html DELETED
@@ -1,65 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <title>UI list</title>
7
- <link 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" rel="stylesheet">
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- <style>
11
- .demo-row {
12
- margin: 20px 0;
13
- }
14
-
15
- .grid-5 {
16
- display: grid;
17
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
18
- justify-items: center;
19
- }
20
-
21
- .grid-4 {
22
- display: grid;
23
- grid-template-columns: 1fr 1fr 1fr 1fr;
24
- justify-items: center;
25
- }
26
-
27
- .grid-3 {
28
- display: grid;
29
- grid-template-columns: 1fr 1fr 1fr;
30
- justify-items: center;
31
- }
32
-
33
- .demo-row > api-list-item {
34
- margin-bottom: 40px;;
35
- }
36
-
37
- .avatar {
38
- background-color: var(--md-sys-color-surface-variant);
39
- color: var(--md-sys-color-on-surface-variant);
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- border-radius: 50%;
44
- }
45
-
46
- .video-image {
47
- position: relative;
48
- overflow: hidden;
49
- display: flex;
50
- justify-content: center;
51
- align-items: center;
52
- background-color: var(--md-sys-color-inverse-primary);
53
- }
54
-
55
- .video-image > img {
56
- max-width: 100%;
57
- }
58
- </style>
59
- </head>
60
- <body>
61
- <div id="app"></div>
62
-
63
- <script type="module" src="/.tmp/demo/md/list/list.js"></script>
64
- </body>
65
- </html>
package/demo/md/list/list.ts DELETED
@@ -1,204 +0,0 @@
1
- /* eslint-disable max-len */
2
- import { html, svg, TemplateResult } from 'lit'
3
- import * as EventUtils from '@api-client/core/lib/events/Utils.js'
4
- import { DemoPage } from '../../../src/demo/DemoPage.js'
5
- import { iconWrapper } from '../../../src/md/icons/Icons.js'
6
-
7
- import '../../../src/md/list/ui-list.js'
8
- import '../../../src/md/list/ui-list-item.js'
9
- import '../../../src/md/checkbox/ui-checkbox.js'
10
-
11
- const chatIcon = iconWrapper(
12
- svg`<path d="M6 14h8v-2H6Zm0-3h12V9H6Zm0-3h12V6H6ZM2 22V4q0-.825.588-1.413Q3.175 2 4 2h16q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18H6Zm2-4.825L5.175 16H20V4H4ZM4 4v13.175Z"/>`
13
- )
14
-
15
- class ComponentDemoPage extends DemoPage {
16
- constructor() {
17
- super()
18
- this.componentName = 'UI list'
19
- }
20
-
21
- supportingText =
22
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
23
-
24
- contentTemplate(): TemplateResult {
25
- return html`
26
- <a href="../">Back</a>
27
- <section class="demo-section">
28
- <h2 class="title-large">Single line</h2>
29
-
30
- <div class="demo-row">
31
- <ui-list-item>Single list item</ui-list-item>
32
- <ui-list-item>
33
- <span slot="start">${chatIcon}</span>
34
- Single list item with an icon
35
- </ui-list-item>
36
- <ui-list-item image="avatar">
37
- <span slot="start" class="avatar">PUP</span>
38
- Pawel Uchida-Psztyc
39
- <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
40
- </ui-list-item>
41
- <ui-list-item image="image">
42
- <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
43
- <p slot="end-text">100+</p>
44
- Image element
45
- </ui-list-item>
46
-
47
- <ui-list-item image="video">
48
- <span slot="start" class="video-image">
49
- <img src="../chip/pawel6c9a.jpg" alt="video" />
50
- </span>
51
- Video image element
52
- <ui-checkbox
53
- slot="end"
54
- @click="${EventUtils.cancelEvent}"
55
- @pointerdown="${EventUtils.cancelEvent}"
56
- ></ui-checkbox>
57
- </ui-list-item>
58
- </div>
59
-
60
- <h3 class="title-medium">List example</h3>
61
- <div class="demo-row">
62
- <ui-list selectActive>
63
- <ui-list-item image="avatar">
64
- <span slot="start" class="avatar">PUP</span>
65
- Pawel Uchida-Psztyc
66
- <ui-checkbox slot="end"></ui-checkbox>
67
- </ui-list-item>
68
- <ui-list-item image="avatar">
69
- <span slot="start" class="avatar">PUP</span>
70
- Highlighted item
71
- <ui-checkbox slot="end"></ui-checkbox>
72
- </ui-list-item>
73
- <ui-list-item image="avatar">
74
- <span slot="start" class="avatar">PUP</span>
75
- Selected item
76
- <ui-checkbox slot="end"></ui-checkbox>
77
- </ui-list-item>
78
- </ui-list>
79
- </div>
80
- </section>
81
-
82
- <section class="demo-section">
83
- <h2 class="title-large">Two lines</h2>
84
- <div class="demo-row">
85
- <ui-list-item lines="two">
86
- <span slot="start">${chatIcon}</span>
87
- Two list item with an icon
88
- <p slot="supporting-text">${this.supportingText}</p>
89
- </ui-list-item>
90
- <ui-list-item image="avatar" lines="two">
91
- <span slot="start" class="avatar">PUP</span>
92
- Pawel Uchida-Psztyc
93
- <p slot="supporting-text">${this.supportingText}</p>
94
- <ui-checkbox
95
- slot="end"
96
- @click="${EventUtils.cancelEvent}"
97
- @pointerdown="${EventUtils.cancelEvent}"
98
- ></ui-checkbox>
99
- </ui-list-item>
100
- <ui-list-item image="image" lines="two">
101
- <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
102
- <p slot="end-text">100+</p>
103
- <p slot="supporting-text">${this.supportingText}</p>
104
- Image element
105
- </ui-list-item>
106
-
107
- <ui-list-item image="video" lines="two">
108
- <span slot="start" class="video-image">
109
- <img src="../chip/pawel6c9a.jpg" alt="video" />
110
- </span>
111
- <p slot="supporting-text">${this.supportingText}</p>
112
- Video image element
113
- <ui-checkbox
114
- slot="end"
115
- @click="${EventUtils.cancelEvent}"
116
- @pointerdown="${EventUtils.cancelEvent}"
117
- ></ui-checkbox>
118
- </ui-list-item>
119
- </div>
120
- </section>
121
-
122
- <section class="demo-section">
123
- <h2 class="title-large">Three lines</h2>
124
- <div class="demo-row">
125
- <ui-list-item lines="three">
126
- <span slot="start">${chatIcon}</span>
127
- Two list item with an icon
128
- <p slot="supporting-text">${this.supportingText}</p>
129
- </ui-list-item>
130
- <ui-list-item image="avatar" lines="three">
131
- <span slot="start" class="avatar">PUP</span>
132
- Pawel Uchida-Psztyc
133
- <p slot="supporting-text">${this.supportingText}</p>
134
- <ui-checkbox
135
- slot="end"
136
- @click="${EventUtils.cancelEvent}"
137
- @pointerdown="${EventUtils.cancelEvent}"
138
- ></ui-checkbox>
139
- </ui-list-item>
140
- <ui-list-item image="image" lines="three">
141
- <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
142
- <p slot="end-text">100+</p>
143
- <p slot="supporting-text">${this.supportingText}</p>
144
- Image element
145
- </ui-list-item>
146
-
147
- <ui-list-item image="video" lines="three">
148
- <span slot="start" class="video-image">
149
- <img src="../chip/pawel6c9a.jpg" alt="video" />
150
- </span>
151
- <p slot="supporting-text">${this.supportingText}</p>
152
- Video image element
153
- <ui-checkbox
154
- slot="end"
155
- @click="${EventUtils.cancelEvent}"
156
- @pointerdown="${EventUtils.cancelEvent}"
157
- ></ui-checkbox>
158
- </ui-list-item>
159
- </div>
160
-
161
- <h2 class="title-large">Static (no interaction)</h2>
162
-
163
- <div class="demo-row">
164
- <ui-list-item static>Single list item</ui-list-item>
165
- <ui-list-item static>
166
- <span slot="start">${chatIcon}</span>
167
- Single list item with an icon
168
- </ui-list-item>
169
- <ui-list-item image="avatar" static>
170
- <span slot="start" class="avatar">PUP</span>
171
- Pawel Uchida-Psztyc
172
- <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
173
- </ui-list-item>
174
- <ui-list-item image="image" static>
175
- <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
176
- <p slot="end-text">100+</p>
177
- Image element
178
- </ui-list-item>
179
-
180
- <ui-list-item image="video" static>
181
- <span slot="start" class="video-image">
182
- <img src="../chip/pawel6c9a.jpg" alt="video" />
183
- </span>
184
- Video image element
185
- <ui-checkbox
186
- slot="end"
187
- @click="${EventUtils.cancelEvent}"
188
- @pointerdown="${EventUtils.cancelEvent}"
189
- ></ui-checkbox>
190
- </ui-list-item>
191
- </ui-list-item>
192
-
193
- <ui-list-item static>
194
- 2000,00
195
- <span slot="end-text">PLN</span>
196
- </ui-list-item>
197
- </div>
198
- </section>
199
- `
200
- }
201
- }
202
-
203
- const instance = new ComponentDemoPage()
204
- instance.render()
package/demo/md/listbox/listbox.html DELETED
@@ -1,31 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <title>UI listbox</title>
7
- <link 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" rel="stylesheet">
8
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
9
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
10
- <style>
11
- .demo-row {
12
- margin: 20px 0;
13
- }
14
-
15
- .button-in-lists {
16
- display: inline-block;
17
- vertical-align: top;
18
- width: 48px;
19
- height: 48px;
20
- overflow: hidden;
21
-
22
- margin-right: 40px;;
23
- }
24
- </style>
25
- </head>
26
- <body>
27
- <div id="app"></div>
28
-
29
- <script type="module" src="/.tmp/demo/md/listbox/listbox.js"></script>
30
- </body>
31
- </html>
package/demo/md/listbox/listbox.ts DELETED
@@ -1,27 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { DemoPage } from '../../../src/demo/DemoPage.js'
3
-
4
- import '../../../src/md/listbox/ui-listbox.js'
5
- import '../../../src/md/list/ui-list-item.js'
6
-
7
- class ComponentDemoPage extends DemoPage {
8
- override accessor componentName = 'UI listbox'
9
-
10
- contentTemplate(): TemplateResult {
11
- return html`
12
- <a href="../">Back</a>
13
- <section class="demo-section">
14
- <h2 class="title-large">Listbox</h2>
15
- <ui-listbox>
16
- <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
17
- <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
18
- <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
19
- <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
20
- </ui-listbox>
21
- </section>
22
- `
23
- }
24
- }
25
-
26
- const instance = new ComponentDemoPage()
27
- instance.render()
package/demo/md/menu/index.html DELETED
@@ -1,19 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Material Design 3 Menu Component Demo</title>
7
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
8
- <link 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" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
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="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
13
-
14
- </head>
15
- <body>
16
- <div id="app"></div>
17
- <script type="module" src="/.tmp/demo/md/menu/index.js"></script>
18
- </body>
19
- </html>