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