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