@api-client/ui 0.5.39 → 0.5.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (292) hide show
  1. package/build/src/elements/contextual-menu/{internals/ContextualMenu.d.ts → ContextualMenu.d.ts} +11 -6
  2. package/build/src/elements/contextual-menu/ContextualMenu.d.ts.map +1 -0
  3. package/build/src/elements/contextual-menu/{internals/ContextualMenu.js → ContextualMenu.js} +25 -3
  4. package/build/src/elements/contextual-menu/ContextualMenu.js.map +1 -0
  5. package/build/src/elements/contextual-menu/internals/types.d.ts +16 -7
  6. package/build/src/elements/contextual-menu/internals/types.d.ts.map +1 -1
  7. package/build/src/elements/contextual-menu/internals/types.js.map +1 -1
  8. package/build/tsconfig.tsbuildinfo +1 -0
  9. package/package.json +1 -1
  10. package/src/elements/contextual-menu/{internals/ContextualMenu.ts → ContextualMenu.ts} +31 -7
  11. package/src/elements/contextual-menu/internals/types.ts +17 -7
  12. package/.aiexclude +0 -3
  13. package/.cursor/rules/html-and-css-best-practices.mdc +0 -63
  14. package/.cursor/rules/lit-best-practices.mdc +0 -89
  15. package/.editorconfig +0 -29
  16. package/.github/CONTRIBUTING.md +0 -24
  17. package/.github/instructions/html-and-css-best-practices.instructions.md +0 -70
  18. package/.github/instructions/lit-best-practices.instructions.md +0 -90
  19. package/.github/release.yml +0 -14
  20. package/.github/stale.yml +0 -23
  21. package/.github/workflows/auto-release.yml +0 -182
  22. package/.github/workflows/release.yml +0 -82
  23. package/.prettierrc.js +0 -14
  24. package/.vscode/settings.json +0 -18
  25. package/RELEASE.md +0 -163
  26. package/RELEASE_SETUP.md +0 -235
  27. package/build/src/demo/DemoPage.d.ts +0 -81
  28. package/build/src/demo/DemoPage.d.ts.map +0 -1
  29. package/build/src/demo/DemoPage.js +0 -175
  30. package/build/src/demo/DemoPage.js.map +0 -1
  31. package/build/src/demo/DemoStyles.d.ts +0 -3
  32. package/build/src/demo/DemoStyles.d.ts.map +0 -1
  33. package/build/src/demo/DemoStyles.js +0 -60
  34. package/build/src/demo/DemoStyles.js.map +0 -1
  35. package/build/src/elements/contextual-menu/internals/ContextualMenu.d.ts.map +0 -1
  36. package/build/src/elements/contextual-menu/internals/ContextualMenu.js.map +0 -1
  37. package/build/test/elements/navigation/Navigation.test.d.ts +0 -3
  38. package/build/test/elements/navigation/Navigation.test.d.ts.map +0 -1
  39. package/build/test/elements/navigation/Navigation.test.js +0 -113
  40. package/build/test/elements/navigation/Navigation.test.js.map +0 -1
  41. package/commitlint.config.cjs +0 -2
  42. package/demo/elements/authorization/AuthPlugin.js +0 -57
  43. package/demo/elements/authorization/AuthProxy.js +0 -215
  44. package/demo/elements/authorization/api-key.html +0 -27
  45. package/demo/elements/authorization/api-key.ts +0 -44
  46. package/demo/elements/authorization/basic.html +0 -27
  47. package/demo/elements/authorization/basic.ts +0 -43
  48. package/demo/elements/authorization/bearer.html +0 -27
  49. package/demo/elements/authorization/bearer.ts +0 -43
  50. package/demo/elements/authorization/env.js +0 -8
  51. package/demo/elements/authorization/index.html +0 -44
  52. package/demo/elements/authorization/ntlm.html +0 -27
  53. package/demo/elements/authorization/ntlm.ts +0 -43
  54. package/demo/elements/authorization/oauth-authorize.html +0 -75
  55. package/demo/elements/authorization/oauth-authorize.ts +0 -40
  56. package/demo/elements/authorization/oauth-error.html +0 -18
  57. package/demo/elements/authorization/oauth-error.ts +0 -10
  58. package/demo/elements/authorization/oauth-popup.html +0 -36
  59. package/demo/elements/authorization/oauth2.html +0 -27
  60. package/demo/elements/authorization/oauth2.ts +0 -100
  61. package/demo/elements/authorization/oidc.html +0 -27
  62. package/demo/elements/authorization/oidc.ts +0 -139
  63. package/demo/elements/authorization/private.crt +0 -31
  64. package/demo/elements/authorization/private.csr +0 -28
  65. package/demo/elements/authorization/private.key +0 -51
  66. package/demo/elements/authorization/private.pem +0 -31
  67. package/demo/elements/authorization/redirect.html +0 -20
  68. package/demo/elements/authorization/ssl-commands.sh +0 -30
  69. package/demo/elements/authorization/ssl.conf +0 -24
  70. package/demo/elements/autocomplete/index.html +0 -64
  71. package/demo/elements/autocomplete/index.ts +0 -171
  72. package/demo/elements/code-editor/CodeEditorDemo.ts +0 -173
  73. package/demo/elements/code-editor/index.html +0 -19
  74. package/demo/elements/context-menu/DemoIcons.ts +0 -21
  75. package/demo/elements/context-menu/basic.html +0 -25
  76. package/demo/elements/context-menu/basic.ts +0 -119
  77. package/demo/elements/context-menu/custom-data.html +0 -25
  78. package/demo/elements/context-menu/custom-data.ts +0 -62
  79. package/demo/elements/context-menu/demo.css +0 -28
  80. package/demo/elements/context-menu/enabled-state.html +0 -25
  81. package/demo/elements/context-menu/enabled-state.ts +0 -73
  82. package/demo/elements/context-menu/icons.html +0 -25
  83. package/demo/elements/context-menu/icons.ts +0 -64
  84. package/demo/elements/context-menu/index.html +0 -43
  85. package/demo/elements/context-menu/nested.html +0 -25
  86. package/demo/elements/context-menu/nestedt.ts +0 -152
  87. package/demo/elements/context-menu/no-execute.html +0 -25
  88. package/demo/elements/context-menu/no-execute.ts +0 -134
  89. package/demo/elements/context-menu/radio-menu.html +0 -25
  90. package/demo/elements/context-menu/radio-menu.ts +0 -83
  91. package/demo/elements/context-menu/separators.html +0 -25
  92. package/demo/elements/context-menu/separators.ts +0 -172
  93. package/demo/elements/currency/index.html +0 -91
  94. package/demo/elements/currency/index.ts +0 -352
  95. package/demo/elements/environment/environment-editor.html +0 -20
  96. package/demo/elements/environment/environment-editor.ts +0 -49
  97. package/demo/elements/environment/index.html +0 -33
  98. package/demo/elements/environment/server-editor.html +0 -20
  99. package/demo/elements/environment/server-editor.ts +0 -67
  100. package/demo/elements/environment/variables-editor.html +0 -20
  101. package/demo/elements/environment/variables-editor.ts +0 -94
  102. package/demo/elements/har/har-viewer.html +0 -20
  103. package/demo/elements/har/har-viewer.ts +0 -76
  104. package/demo/elements/har/har1.har +0 -3044
  105. package/demo/elements/har/har2.json +0 -439
  106. package/demo/elements/har/index.html +0 -26
  107. package/demo/elements/highlight/example.md +0 -27
  108. package/demo/elements/highlight/index.html +0 -31
  109. package/demo/elements/highlight/marked-highlight.html +0 -132
  110. package/demo/elements/highlight/marked-highlight.ts +0 -22
  111. package/demo/elements/highlight/prism-highlight.html +0 -62
  112. package/demo/elements/highlight/prism-highlight.ts +0 -17
  113. package/demo/elements/http/body-editor.html +0 -17
  114. package/demo/elements/http/body-editor.ts +0 -115
  115. package/demo/elements/http/headers.html +0 -17
  116. package/demo/elements/http/headers.ts +0 -59
  117. package/demo/elements/http/http-assertions.html +0 -20
  118. package/demo/elements/http/http-assertions.ts +0 -89
  119. package/demo/elements/http/http-flows.html +0 -23
  120. package/demo/elements/http/http-flows.ts +0 -89
  121. package/demo/elements/http/index.html +0 -45
  122. package/demo/elements/http/request-editor.html +0 -26
  123. package/demo/elements/http/request-editor.ts +0 -197
  124. package/demo/elements/http/request-log.html +0 -16
  125. package/demo/elements/http/request-log.ts +0 -136
  126. package/demo/elements/http/url-editing.html +0 -17
  127. package/demo/elements/http/url-editing.ts +0 -112
  128. package/demo/elements/icons/index.html +0 -81
  129. package/demo/elements/icons/index.ts +0 -52
  130. package/demo/elements/index.html +0 -72
  131. package/demo/elements/mention-textarea/index.html +0 -19
  132. package/demo/elements/mention-textarea/index.ts +0 -205
  133. package/demo/elements/navigation/navigation-item.html +0 -49
  134. package/demo/elements/navigation/navigation-item.ts +0 -131
  135. package/demo/elements/navigation/navigation.html +0 -20
  136. package/demo/elements/navigation/navigation.ts +0 -45
  137. package/demo/elements/project/index.html +0 -29
  138. package/demo/elements/project/project-run-report.html +0 -20
  139. package/demo/elements/project/project-run-report.ts +0 -132
  140. package/demo/elements/project/request-editor.html +0 -23
  141. package/demo/elements/project/request-editor.ts +0 -232
  142. package/demo/elements/user/user-avatar.html +0 -17
  143. package/demo/elements/user/user-avatar.ts +0 -60
  144. package/demo/env.js +0 -4
  145. package/demo/index.html +0 -34
  146. package/demo/layout/index.html +0 -94
  147. package/demo/layout/index.ts +0 -190
  148. package/demo/md/DemoStyles.ts +0 -61
  149. package/demo/md/UiDemoPage.ts +0 -6
  150. package/demo/md/buttons/button.html +0 -121
  151. package/demo/md/buttons/button.ts +0 -246
  152. package/demo/md/buttons/group.html +0 -36
  153. package/demo/md/buttons/group.ts +0 -171
  154. package/demo/md/checkbox/index.html +0 -39
  155. package/demo/md/checkbox/index.ts +0 -220
  156. package/demo/md/chip/chip.html +0 -70
  157. package/demo/md/chip/chip.ts +0 -219
  158. package/demo/md/chip/pawel6c9a.jpg +0 -0
  159. package/demo/md/collapse/CustomDetail.ts +0 -89
  160. package/demo/md/collapse/collapse.html +0 -21
  161. package/demo/md/collapse/collapse.ts +0 -78
  162. package/demo/md/date-picker/date-picker.ts +0 -336
  163. package/demo/md/date-picker/index.html +0 -171
  164. package/demo/md/dialog/confirm-dialog.html +0 -49
  165. package/demo/md/dialog/confirm-dialog.ts +0 -121
  166. package/demo/md/dialog/dialog.html +0 -25
  167. package/demo/md/dialog/dialog.ts +0 -468
  168. package/demo/md/dropdown-list/index.html +0 -31
  169. package/demo/md/dropdown-list/index.ts +0 -158
  170. package/demo/md/icon-button/index.html +0 -122
  171. package/demo/md/icon-button/index.ts +0 -132
  172. package/demo/md/index.html +0 -73
  173. package/demo/md/inputs/input.html +0 -73
  174. package/demo/md/inputs/input.ts +0 -278
  175. package/demo/md/inputs/radio.html +0 -39
  176. package/demo/md/inputs/radio.ts +0 -156
  177. package/demo/md/inputs/switch.html +0 -45
  178. package/demo/md/inputs/switch.ts +0 -144
  179. package/demo/md/list/list.html +0 -65
  180. package/demo/md/list/list.ts +0 -204
  181. package/demo/md/listbox/listbox.html +0 -31
  182. package/demo/md/listbox/listbox.ts +0 -27
  183. package/demo/md/menu/index.html +0 -19
  184. package/demo/md/menu/index.ts +0 -514
  185. package/demo/md/notification/snack.html +0 -21
  186. package/demo/md/notification/snack.ts +0 -70
  187. package/demo/md/progress/progress.html +0 -46
  188. package/demo/md/progress/progress.ts +0 -161
  189. package/demo/md/segmented-button/index.html +0 -21
  190. package/demo/md/segmented-button/index.ts +0 -55
  191. package/demo/md/select/index.html +0 -16
  192. package/demo/md/select/index.ts +0 -217
  193. package/demo/md/tabs/tabs.html +0 -40
  194. package/demo/md/tabs/tabs.ts +0 -214
  195. package/demo/oauth-popup.html +0 -36
  196. package/demo/page.css +0 -8
  197. package/demo/resources/calendar-month.png +0 -0
  198. package/demo/resources/favorite.png +0 -0
  199. package/demo/resources/fingerprint.png +0 -0
  200. package/demo/resources/home-work.png +0 -0
  201. package/demo/resources/mood.png +0 -0
  202. package/demo/resources/print.png +0 -0
  203. package/demo/resources/stars.png +0 -0
  204. package/demo/resources/theaters.png +0 -0
  205. package/demo/tsconfig.json +0 -4
  206. package/eslint.config.js +0 -97
  207. package/scripts/copy-assets.js +0 -21
  208. package/scripts/release.js +0 -66
  209. package/src/demo/DemoPage.ts +0 -169
  210. package/src/demo/DemoStyles.ts +0 -60
  211. package/test/README.md +0 -375
  212. package/test/contextual-menu/ContextMenu.test.ts +0 -760
  213. package/test/contextual-menu/ContextMenuElement.test.ts +0 -569
  214. package/test/core/activity.spec.ts +0 -413
  215. package/test/core/activity_manager.spec.ts +0 -544
  216. package/test/core/application.spec.ts +0 -218
  217. package/test/core/fragment.spec.ts +0 -565
  218. package/test/core/fragment_manager.spec.ts +0 -404
  219. package/test/core/live_data.spec.ts +0 -558
  220. package/test/core/renderer.spec.ts +0 -113
  221. package/test/dom-assertions.test.ts +0 -182
  222. package/test/elements/MonacoSetup.ts +0 -65
  223. package/test/elements/authorization/basic-method.test.ts +0 -177
  224. package/test/elements/authorization/bearer-method.test.ts +0 -143
  225. package/test/elements/authorization/ntlm-method.test.ts +0 -219
  226. package/test/elements/authorization/oauth2-client-credentials-method.test.ts +0 -334
  227. package/test/elements/authorization/oauth2-code-method.test.ts +0 -320
  228. package/test/elements/authorization/oauth2-custom-grant-method.test.ts +0 -255
  229. package/test/elements/authorization/oauth2-device-code-method.test.ts +0 -371
  230. package/test/elements/authorization/oauth2-implicit-method.test.ts +0 -407
  231. package/test/elements/authorization/oauth2-jwt-method.test.ts +0 -217
  232. package/test/elements/authorization/oauth2-password-method.test.ts +0 -275
  233. package/test/elements/authorization/openid-method.test.ts +0 -591
  234. package/test/elements/autocomplete/autocomplete-input.spec.ts +0 -646
  235. package/test/elements/code-editor/code-editor.accessibility.test.ts +0 -298
  236. package/test/elements/code-editor/code-editor.test.ts +0 -574
  237. package/test/elements/currency/CurrencyPicker.accessibility.test.ts +0 -328
  238. package/test/elements/currency/CurrencyPicker.core.test.ts +0 -318
  239. package/test/elements/currency/CurrencyPicker.integration.test.ts +0 -482
  240. package/test/elements/currency/CurrencyPicker.test.ts +0 -486
  241. package/test/elements/data-table/DataTable.browser.test.ts +0 -649
  242. package/test/elements/har/HarUtils.test.ts +0 -45
  243. package/test/elements/har/HarViewerElement.test.ts +0 -687
  244. package/test/elements/har/test-data/har1.har +0 -3044
  245. package/test/elements/highlight/MarkedHighlightElement.test.ts +0 -452
  246. package/test/elements/highlight/PrismHighlightElement.test.ts +0 -79
  247. package/test/elements/highlight/PrismHighlighter.test.ts +0 -94
  248. package/test/elements/highlight/remoteSanitization.md +0 -1
  249. package/test/elements/highlight/test.md +0 -3
  250. package/test/elements/highlight/test1.md +0 -3
  251. package/test/elements/highlight/test2.md +0 -1
  252. package/test/elements/http/BodyFormdataEditorElement.test.ts +0 -482
  253. package/test/elements/http/BodyMultipartEditorElement.test.ts +0 -658
  254. package/test/elements/http/BodyRawEditorElement.test.ts +0 -90
  255. package/test/elements/http/CertificateAdd.test.ts +0 -457
  256. package/test/elements/http/HttpAssertions.test.ts +0 -994
  257. package/test/elements/http/HttpFlows.test.ts +0 -502
  258. package/test/elements/http/UrlEncodeUtils.test.ts +0 -202
  259. package/test/elements/layout/SplitItem.test.ts +0 -440
  260. package/test/elements/layout/SplitLayoutManager.test.ts +0 -1501
  261. package/test/elements/layout/SplitPanel.test.ts +0 -1109
  262. package/test/elements/mention-textarea/MentionTextArea.basic.test.ts +0 -114
  263. package/test/elements/mention-textarea/MentionTextArea.test.ts +0 -613
  264. package/test/elements/navigation/Navigation.test.ts +0 -120
  265. package/test/env.ts +0 -15
  266. package/test/events/EventTypes.test.ts +0 -363
  267. package/test/events/EventsTestHelpers.ts +0 -16
  268. package/test/helpers/TestUtils.ts +0 -243
  269. package/test/helpers/UiMock.ts +0 -185
  270. package/test/lib/Dom.test.ts +0 -231
  271. package/test/md/button/UiButton.test.ts +0 -347
  272. package/test/md/button/UiIconButton.test.ts +0 -155
  273. package/test/md/chip/UiChip.test.ts +0 -219
  274. package/test/md/collapse/UiCollapse.test.ts +0 -250
  275. package/test/md/collapse/flex-layout.test.ts +0 -105
  276. package/test/md/date-time/DateTime.test.ts +0 -348
  277. package/test/md/dialog/UiConfirmDialog.test.ts +0 -131
  278. package/test/md/dialog/UiDialog.test.ts +0 -759
  279. package/test/md/menu/Menu.test.ts +0 -855
  280. package/test/md/menu/MenuIntegration.test.ts +0 -426
  281. package/test/md/menu/MenuItem.test.ts +0 -652
  282. package/test/md/menu/SubMenu.test.ts +0 -410
  283. package/test/md/progress/UiCircularProgressElement.test.ts +0 -481
  284. package/test/md/progress/UiProgressElement.test.ts +0 -117
  285. package/test/md/progress/UiRangeElement.test.ts +0 -156
  286. package/test/md/select/Select.test.ts +0 -925
  287. package/test/plugins/takeScreenshotPlugin.js +0 -35
  288. package/test/setup.test.ts +0 -217
  289. package/test/setup.ts +0 -117
  290. package/test/tsconfig.json +0 -7
  291. package/web-dev-server.config.js +0 -21
  292. package/web-test-runner.config.js +0 -90
package/demo/md/UiDemoPage.ts DELETED
@@ -1,6 +0,0 @@
1
- import { DemoPage } from '../../src/demo/DemoPage.js'
2
-
3
- /**
4
- * @deprecated not in use anymore.
5
- */
6
- export abstract class UiDemoPage extends DemoPage {}
package/demo/md/buttons/button.html DELETED
@@ -1,121 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>UI button</title>
6
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" rel="stylesheet" />
9
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
10
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
11
- <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
12
- <style>
13
- .demo-row {
14
- margin: 20px 0;
15
- display: flex;
16
- gap: 12px;
17
- flex-wrap: wrap;
18
- }
19
-
20
- .demo .demo-section {
21
- max-width: 858px;
22
- margin: 0 auto 80px auto;
23
-
24
- --_row-height: 80px;
25
- }
26
-
27
- .demo .demo-section.l {
28
- max-width: 1080px;
29
-
30
- --_row-height: 120px;
31
- }
32
-
33
- .demo .demo-section.xl {
34
- max-width: 1380px;
35
-
36
- --_row-height: 180px;
37
- }
38
-
39
- .demo h2, .demo h3 {
40
- margin-bottom: 36px;
41
- }
42
-
43
- ol {
44
- padding-left: 0;
45
- list-style: none;
46
- counter-reset: item;
47
- }
48
-
49
- ol > li {
50
- margin-top: 4px;
51
- margin-bottom: 20px;
52
- margin-left: 36px;
53
- counter-increment: item;
54
- vertical-align: baseline;
55
- }
56
-
57
- ol > li:before {
58
- display: inline-block;
59
- width: 24px;
60
- height: 32px;
61
- margin-top: -4px;
62
- margin-right: 10px;
63
- margin-left: -36px;
64
- border-radius: 12px;
65
- background: var(--md-sys-color-inverse-surface);
66
- color: var(--md-sys-color-inverse-on-surface);
67
- line-height: 32px;
68
- text-align: center;
69
- }
70
-
71
- ol.decimal > li:before {
72
- content: counter(item, decimal);
73
- }
74
-
75
- .color-grid,
76
- .state-grid {
77
- display: grid;
78
- gap: 0 0;
79
- justify-items: center;
80
- align-items: center;
81
-
82
- padding: 40px;
83
- border-radius: 20px;
84
- border: 1px var(--md-sys-color-outline) solid;
85
- }
86
-
87
- .color-grid {
88
- grid-template-columns: 80px 1fr 1fr 1fr;
89
- grid-template-rows: var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height);
90
-
91
- }
92
-
93
- .state-grid {
94
- grid-template-columns: 80px 1fr 1fr 1fr;
95
- grid-template-rows: var(--_row-height) var(--_row-height);
96
- }
97
-
98
- .legend-marker {
99
- width: 24px;
100
- height: 24px;
101
- border-radius: 50%;
102
- background-color: var(--md-sys-color-inverse-surface);
103
- color: var(--md-sys-color-inverse-on-surface);
104
- display: flex;
105
- justify-content: center;
106
- align-items: center;
107
- }
108
-
109
- .frame {
110
- padding: 40px;
111
- border-radius: 20px;
112
- border: 1px var(--md-sys-color-outline) solid;
113
- }
114
- </style>
115
- </head>
116
- <body>
117
- <div id="app"></div>
118
-
119
- <script type="module" src="/.tmp/demo/md/buttons/button.js"></script>
120
- </body>
121
- </html>
package/demo/md/buttons/button.ts DELETED
@@ -1,246 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { reactive } from '../../../src/decorators/index.js'
3
- import type ButtonElement from '../../../src/md/button/internals/button.js'
4
- import { DemoPage } from '../../../src/demo/DemoPage.js'
5
- import type { MdButtonShape, MdButtonSize, MdButtonColor } from '../../../src/md/button/internals/button.js'
6
-
7
- import '../../../src/md/button/ui-button.js'
8
- import '../../../src/md/icons/ui-icon.js'
9
- import '../../../src/md/dialog/ui-dialog.js'
10
- import '../../../src/md/text-field/ui-outlined-text-field.js'
11
- import '../../../src/md/text-field/ui-filled-text-field.js'
12
-
13
- class ComponentDemoPage extends DemoPage {
14
- override accessor componentName = 'UI button'
15
-
16
- @reactive() accessor formValues: string | undefined
17
-
18
- @reactive() accessor dialogOpened = false
19
-
20
- @reactive() accessor size: MdButtonSize = 's'
21
-
22
- @reactive() accessor shape: MdButtonShape = 'round'
23
-
24
- _clickHandler(e: Event): void {
25
- const button = e.target as ButtonElement
26
- console.log(`A ${button.type} button was clicked.`)
27
- }
28
-
29
- _submitHandler(e: SubmitEvent): void {
30
- e.preventDefault()
31
- const form = e.target as HTMLFormElement
32
- const values = Array.from(new FormData(form)) as string[][]
33
-
34
- const serialized = new URLSearchParams(values).toString()
35
- this.formValues = serialized
36
- this.dialogOpened = false
37
- }
38
-
39
- openDialog(): void {
40
- this.dialogOpened = true
41
- }
42
-
43
- dialogClosed(): void {
44
- this.dialogOpened = false
45
- }
46
-
47
- handleSizeChange(e: Event): void {
48
- const select = e.target as HTMLSelectElement
49
- this.size = select.value as MdButtonSize
50
- }
51
-
52
- handleShapeChange(e: Event): void {
53
- const select = e.target as HTMLSelectElement
54
- this.shape = select.value as MdButtonShape
55
- }
56
-
57
- readonly icon = html`<ui-icon slot="icon" icon="edit"></ui-icon>`
58
-
59
- contentTemplate(): TemplateResult {
60
- const { size: s, shape: h, icon: i } = this
61
- return html`
62
- <a href="../">Back</a>
63
- ${this.renderConfigurationSection()}
64
- <section class="demo-section ${s}">
65
- <h2 class="display-large">Color</h2>
66
- <div class="color-grid">
67
- <span>&nbsp</span>
68
- <span class="legend-marker">1</span>
69
- <span class="legend-marker">2</span>
70
- <span class="legend-marker">3</span>
71
- <span class="legend-marker">A</span>
72
- <ui-button color="elevated" .size="${s}" .shape="${h}">${i}elevated button</ui-button>
73
- <ui-button color="elevated" .size="${s}" .shape="${h}" toggle>${i}elevated unselected</ui-button>
74
- <ui-button color="elevated" .size="${s}" .shape="${h}" toggle selected>${i}elevated selected</ui-button>
75
- <span class="legend-marker">B</span>
76
- <ui-button color="filled" .size="${s}" .shape="${h}">${i}filled button</ui-button>
77
- <ui-button color="filled" .size="${s}" .shape="${h}" toggle>${i}filled unselected</ui-button>
78
- <ui-button color="filled" .size="${s}" .shape="${h}" toggle selected>${i}filled selected</ui-button>
79
- <span class="legend-marker">C</span>
80
- <ui-button color="tonal" .size="${s}" .shape="${h}">${i}tonal button</ui-button>
81
- <ui-button color="tonal" .size="${s}" .shape="${h}" toggle>${i}tonal unselected</ui-button>
82
- <ui-button color="tonal" .size="${s}" .shape="${h}" toggle selected>${i}tonal selected</ui-button>
83
- <span class="legend-marker">D</span>
84
- <ui-button color="outlined" .size="${s}" .shape="${h}">${i}outlined button</ui-button>
85
- <ui-button color="outlined" .size="${s}" .shape="${h}" toggle>${i}outlined unselected</ui-button>
86
- <ui-button color="outlined" .size="${s}" .shape="${h}" toggle selected>${i}outlined selected</ui-button>
87
- <span class="legend-marker">E</span>
88
- <ui-button color="text" .size="${s}" .shape="${h}">text button</ui-button>
89
- </div>
90
- <p class="body-medium">A. Elevated, B. Filled, C. Tonal, D. Outlined, E. Text</p>
91
- <ol class="decimal body-medium">
92
- <li>Default</li>
93
- <li>Toggle: unselected</li>
94
- <li>Toggle: selected</li>
95
- </ol>
96
- </section>
97
-
98
- ${this.renderStatesSection('elevated')} ${this.renderStatesSection('filled')} ${this.renderStatesSection('tonal')}
99
- ${this.renderStatesSection('outlined')}
100
-
101
- <section class="demo-section ${s}">
102
- <h3 class="headline-medium">Text button states</h3>
103
-
104
- <div class="state-grid">
105
- <span>&nbsp</span>
106
- <span class="legend-marker">1</span>
107
- <span></span>
108
- <span></span>
109
- <span class="legend-marker">A</span>
110
- <ui-button color="text" .size="${s}" .shape="${h}">enabled</ui-button>
111
- <span></span>
112
- <span></span>
113
- <span class="legend-marker">B</span>
114
- <ui-button color="text" .size="${s}" .shape="${h}" disabled>disabled</ui-button>
115
- <span></span>
116
- <span></span>
117
- </div>
118
- <p class="body-medium">A. Enabled, B. Disabled</p>
119
- <ol class="decimal body-medium">
120
- <li>Default</li>
121
- </ol>
122
- </section>
123
-
124
- <section class="demo-section ${s}">
125
- <h2 class="display-large">A submit button within a form</h2>
126
- <div class="frame">
127
- <form method="get" action="#" @submit="${this._submitHandler}">
128
- <label for="formInput">An input</label>
129
- <input type="text" id="formInput" required name="input" />
130
- <label for="checkboxInput">A checkbox</label>
131
- <input type="checkbox" id="checkboxInput" name="flag" />
132
- <ui-button name="submit" value="on" type="submit">Submit</ui-button>
133
- </form>
134
- </div>
135
- </section>
136
-
137
- <section class="demo-section ${s}">
138
- <h2 class="display-large">A submit button outside a form</h2>
139
- <div class="frame">
140
- <form method="get" action="#" @submit="${this._submitHandler}" id="myForm">
141
- <label for="formInput">An input</label>
142
- <input type="text" id="formInput" required name="input" />
143
- <label for="checkboxInput">A checkbox</label>
144
- <input type="checkbox" id="checkboxInput" name="flag" />
145
- </form>
146
- <div>
147
- <ui-button name="submit" value="on" type="submit" form="myForm">Submit</ui-button>
148
- </div>
149
- </div>
150
- </section>
151
-
152
- <section class="demo-section ${s}">
153
- <h2 class="display-large">Buttons in a dialog</h2>
154
- <div class="frame">
155
- <ui-button @click="${this.openDialog}">Open dialog</ui-button>
156
- </div>
157
- <ui-dialog ?open="${this.dialogOpened}" @close="${this.dialogClosed}" modal>
158
- <span slot="title">Dialog with a form</span>
159
- <form method="get" action="#" @submit="${this._submitHandler}" id="dialogForm">
160
- <label for="formInput">An input</label>
161
- <input type="text" id="formInput" required name="input" />
162
- <label for="checkboxInput">A checkbox</label>
163
- <input type="checkbox" id="checkboxInput" name="flag" />
164
- </form>
165
- <ui-button color="text" slot="button" value="dismiss">Dismiss</ui-button>
166
- <ui-button color="text" slot="button" name="submit" value="confirm" type="submit" form="dialogForm"
167
- >Submit</ui-button
168
- >
169
- </ui-dialog>
170
- </section>
171
-
172
- ${this.formValues
173
- ? html`
174
- <output>
175
- <code><pre>${this.formValues}</pre></code>
176
- </output>
177
- `
178
- : html``}
179
- `
180
- }
181
-
182
- renderStatesSection(type: MdButtonColor): TemplateResult {
183
- const { size: s, shape: h } = this
184
- return html`
185
- <section class="demo-section ${s}">
186
- <h3 class="headline-medium">${type} button states</h3>
187
-
188
- <div class="state-grid">
189
- <span>&nbsp</span>
190
- <span class="legend-marker">1</span>
191
- <span class="legend-marker">2</span>
192
- <span class="legend-marker">3</span>
193
- <span class="legend-marker">A</span>
194
- <ui-button color="${type}" .size="${s}" .shape="${h}">enabled</ui-button>
195
- <ui-button color="${type}" .size="${s}" .shape="${h}" toggle>enabled</ui-button>
196
- <ui-button color="${type}" .size="${s}" .shape="${h}" toggle selected>enabled</ui-button>
197
- <span class="legend-marker">B</span>
198
- <ui-button color="${type}" .size="${s}" .shape="${h}" disabled>disabled</ui-button>
199
- <ui-button color="${type}" .size="${s}" .shape="${h}" toggle disabled>disabled</ui-button>
200
- <ui-button color="${type}" .size="${s}" .shape="${h}" toggle selected disabled>disabled</ui-button>
201
- </div>
202
- <p class="body-medium">A. Enabled, B. Disabled</p>
203
- <ol class="decimal body-medium">
204
- <li>Default</li>
205
- <li>Toggle: unselected</li>
206
- <li>Toggle: selected</li>
207
- </ol>
208
- </section>
209
- `
210
- }
211
-
212
- renderConfigurationSection(): TemplateResult {
213
- const { size: s, shape: h } = this
214
- return html`
215
- <section class="demo-section">
216
- <h2 class="title-large">Configuration</h2>
217
- <div class="md-select outlined">
218
- <label for="size">Size</label>
219
- <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
220
- <button>
221
- <selectedcontent></selectedcontent>
222
- </button>
223
- <option value="xs">Extra small</option>
224
- <option value="s">Small</option>
225
- <option value="m">Medium</option>
226
- <option value="l">Large</option>
227
- <option value="xl">Extra large</option>
228
- </select>
229
- </div>
230
- <div class="md-select outlined">
231
- <label for="shape">Shape</label>
232
- <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
233
- <button>
234
- <selectedcontent></selectedcontent>
235
- </button>
236
- <option value="round">Round</option>
237
- <option value="square">Square</option>
238
- </select>
239
- </div>
240
- </section>
241
- `
242
- }
243
- }
244
-
245
- const instance = new ComponentDemoPage()
246
- instance.render()
package/demo/md/buttons/group.html DELETED
@@ -1,36 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>UI button group</title>
6
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" rel="stylesheet" />
9
- <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
10
- <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
11
- <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
12
- <style>
13
- .demo-row {
14
- margin: 20px 0;
15
- display: flex;
16
- gap: 12px;
17
- flex-wrap: wrap;
18
- }
19
-
20
- .demo h2, .demo h3 {
21
- margin-bottom: 36px;
22
- }
23
-
24
- .frame {
25
- padding: 40px;
26
- border-radius: 20px;
27
- border: 1px var(--md-sys-color-outline) solid;
28
- }
29
- </style>
30
- </head>
31
- <body>
32
- <div id="app"></div>
33
-
34
- <script type="module" src="/.tmp/demo/md/buttons/group.js"></script>
35
- </body>
36
- </html>
package/demo/md/buttons/group.ts DELETED
@@ -1,171 +0,0 @@
1
- import { html, TemplateResult } from 'lit'
2
- import { reactive } from '../../../src/decorators/index.js'
3
- import { DemoPage } from '../../../src/demo/DemoPage.js'
4
- import type { MdButtonShape, MdButtonSize, MdButtonColor } from '../../../src/md/button/internals/button.js'
5
-
6
- import '../../../src/md/button/ui-button.js'
7
- import '../../../src/md/icons/ui-icon.js'
8
- import '../../../src/md/button/ui-button-group.js'
9
-
10
- class ComponentDemoPage extends DemoPage {
11
- override accessor componentName = 'UI button group'
12
-
13
- @reactive() accessor size: MdButtonSize = 's'
14
-
15
- @reactive() accessor shape: MdButtonShape = 'round'
16
-
17
- @reactive() accessor color: MdButtonColor = 'filled'
18
-
19
- handleSizeChange(e: Event): void {
20
- const select = e.target as HTMLSelectElement
21
- this.size = select.value as MdButtonSize
22
- }
23
-
24
- handleShapeChange(e: Event): void {
25
- const select = e.target as HTMLSelectElement
26
- this.shape = select.value as MdButtonShape
27
- }
28
-
29
- handleColorChange(e: Event): void {
30
- const select = e.target as HTMLSelectElement
31
- this.color = select.value as MdButtonColor
32
- }
33
-
34
- readonly icon = html`<ui-icon slot="icon" icon="edit"></ui-icon>`
35
-
36
- contentTemplate(): TemplateResult {
37
- const { size: s, icon: i, color: c } = this
38
- return html`
39
- <a href="../">Back</a>
40
- ${this.renderConfigurationSection()}
41
- <section class="demo-section ${s}">
42
- <h2 class="display-large">Anatomy</h2>
43
- <div class="frame">
44
- <div class="demo-row">
45
- <ui-button-group size="${s}">
46
- <ui-button color="tonal">${i}</ui-button>
47
- <ui-button color="tonal">${i}</ui-button>
48
- <ui-button color="tonal">${i}Three</ui-button>
49
- <ui-button color="tonal">${i}</ui-button>
50
- <ui-button color="tonal">${i}</ui-button>
51
- </ui-button-group>
52
- </div>
53
- <div class="demo-row">
54
- <ui-button-group type="connected" size="${s}">
55
- <ui-button color="filled">${i}Label</ui-button>
56
- <ui-button color="filled">${i}Label</ui-button>
57
- <ui-button color="filled">${i}Label</ui-button>
58
- <ui-button color="filled">${i}Label</ui-button>
59
- <ui-button color="filled">${i}Label</ui-button>
60
- </ui-button-group>
61
- </div>
62
- </div>
63
-
64
- <section class="demo-section ${s}">
65
- <h2 class="display-large">States</h2>
66
- <h3 class="headline-medium">Connected button group</h3>
67
-
68
- <div class="frame">
69
- <h4 class="title-medium">Multi selection</h4>
70
- <div class="demo-row">
71
- <ui-button-group type="connected" size="${s}" multiple>
72
- <ui-button color="${c}" toggle>${i}Label</ui-button>
73
- <ui-button color="${c}" toggle>${i}Label</ui-button>
74
- <ui-button color="${c}" toggle>${i}Label</ui-button>
75
- <ui-button color="${c}" toggle>${i}Label</ui-button>
76
- <ui-button color="${c}" toggle>${i}Label</ui-button>
77
- </ui-button-group>
78
- </div>
79
-
80
- <h4 class="title-medium">Single selection</h4>
81
- <div class="demo-row">
82
- <ui-button-group type="connected" size="${s}">
83
- <ui-button color="${c}" toggle>${i}Label</ui-button>
84
- <ui-button color="${c}" toggle>${i}Label</ui-button>
85
- <ui-button color="${c}" toggle>${i}Label</ui-button>
86
- <ui-button color="${c}" toggle>${i}Label</ui-button>
87
- <ui-button color="${c}" toggle>${i}Label</ui-button>
88
- </ui-button-group>
89
- </div>
90
- </div>
91
- </section>
92
-
93
- <section class="demo-section ${s}">
94
- <h3 class="headline-medium">Standard button group</h3>
95
-
96
- <div class="frame">
97
- <h4 class="title-medium">Multi selection</h4>
98
- <div class="demo-row">
99
- <ui-button-group type="standard" size="${s}" multiple>
100
- <ui-button color="${c}" toggle>${i}Label</ui-button>
101
- <ui-button color="${c}" toggle>${i}Label</ui-button>
102
- <ui-button color="${c}" toggle>${i}Label</ui-button>
103
- <ui-button color="${c}" toggle>${i}Label</ui-button>
104
- <ui-button color="${c}" toggle>${i}Label</ui-button>
105
- </ui-button-group>
106
- </div>
107
-
108
- <h4 class="title-medium">Single selection</h4>
109
- <div class="demo-row">
110
- <ui-button-group type="standard" size="${s}">
111
- <ui-button color="${c}" toggle>${i}Label</ui-button>
112
- <ui-button color="${c}" toggle>${i}Label</ui-button>
113
- <ui-button color="${c}" toggle>${i}Label</ui-button>
114
- <ui-button color="${c}" toggle>${i}Label</ui-button>
115
- <ui-button color="${c}" toggle>${i}Label</ui-button>
116
- </ui-button-group>
117
- </div>
118
- </div>
119
- </section>
120
- </section>
121
- `
122
- }
123
-
124
- renderConfigurationSection(): TemplateResult {
125
- const { size: s, shape: h, color: c } = this
126
- return html`
127
- <section class="demo-section">
128
- <h2 class="title-large">Configuration</h2>
129
- <div class="md-select outlined">
130
- <label for="size">Size</label>
131
- <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
132
- <button>
133
- <selectedcontent></selectedcontent>
134
- </button>
135
- <option value="xs">Extra small</option>
136
- <option value="s">Small</option>
137
- <option value="m">Medium</option>
138
- <option value="l">Large</option>
139
- <option value="xl">Extra large</option>
140
- </select>
141
- </div>
142
- <div class="md-select outlined">
143
- <label for="shape">Shape</label>
144
- <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
145
- <button>
146
- <selectedcontent></selectedcontent>
147
- </button>
148
- <option value="round">Round</option>
149
- <option value="square">Square</option>
150
- </select>
151
- </div>
152
- <div class="md-select outlined">
153
- <label for="color">Color</label>
154
- <select id="color" @change="${this.handleColorChange}" name="color" .value="${c}">
155
- <button>
156
- <selectedcontent></selectedcontent>
157
- </button>
158
- <option value="elevated">Elevated</option>
159
- <option value="filled">Filled</option>
160
- <option value="outlined">Outlined</option>
161
- <option value="text">Text</option>
162
- <option value="tonal">Tonal</option>
163
- </select>
164
- </div>
165
- </section>
166
- `
167
- }
168
- }
169
-
170
- const instance = new ComponentDemoPage()
171
- instance.render()
package/demo/md/checkbox/index.html DELETED
@@ -1,39 +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 checkbox</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
- </style>
33
- </head>
34
- <body>
35
- <div id="app"></div>
36
-
37
- <script type="module" src="/.tmp/demo/md/checkbox/index.js"></script>
38
- </body>
39
- </html>