@supersoniks/concorde 5.0.0 → 5.0.2

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 (314) hide show
  1. package/.gitlab-ci.yml +0 -13
  2. package/build-infos.json +1 -1
  3. package/concorde-core.bundle.js +606 -689
  4. package/concorde-core.es.js +4511 -4329
  5. package/dist/concorde-core.bundle.js +606 -689
  6. package/dist/concorde-core.es.js +4511 -4329
  7. package/gitlab/job_tests.sh +25 -12
  8. package/index.html +3 -3
  9. package/package.json +16 -1
  10. package/scripts/post-build-docs.js +0 -0
  11. package/scripts/post-build.mjs +0 -0
  12. package/src/core/components/functional/fetch/fetch.md +0 -0
  13. package/src/core/components/functional/if/if.md +0 -0
  14. package/src/core/components/functional/list/list.demo.ts +0 -0
  15. package/src/core/components/functional/list/list.md +0 -0
  16. package/src/core/components/functional/list/list.ts +0 -0
  17. package/src/core/components/functional/router/router.md +0 -0
  18. package/src/core/components/functional/router/router.ts +0 -0
  19. package/src/core/components/functional/sdui/sdui.md +0 -0
  20. package/src/core/components/functional/states/states.md +0 -0
  21. package/src/core/components/functional/submit/submit.md +0 -0
  22. package/src/core/components/ui/_css/rounded.ts +36 -0
  23. package/src/core/components/ui/_css/size.ts +0 -0
  24. package/src/core/components/ui/_css/type.ts +49 -0
  25. package/src/core/components/ui/_i18n/ui-aria-labels.ts +104 -0
  26. package/src/core/components/ui/alert/alert.md +128 -72
  27. package/src/core/components/ui/alert/alert.spec.ts +145 -0
  28. package/src/core/components/ui/alert/alert.ts +86 -91
  29. package/src/core/components/ui/alert-messages/alert-messages.ts +1 -1
  30. package/src/core/components/ui/badge/badge.md +126 -78
  31. package/src/core/components/ui/badge/badge.ts +29 -81
  32. package/src/core/components/ui/button/button.md +1 -0
  33. package/src/core/components/ui/button/button.ts +11 -8
  34. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  35. package/src/core/components/ui/captcha/captcha.md +0 -0
  36. package/src/core/components/ui/card/card-header.ts +7 -2
  37. package/src/core/components/ui/card/card.md +120 -65
  38. package/src/core/components/ui/divider/divider.ts +4 -9
  39. package/src/core/components/ui/form/fieldset/legend-description.ts +1 -1
  40. package/src/core/components/ui/form/fieldset/legend.ts +1 -1
  41. package/src/core/components/ui/form/input/input.md +1 -1
  42. package/src/core/components/ui/form/input/input.ts +19 -15
  43. package/src/core/components/ui/form/radio/radio.md +0 -0
  44. package/src/core/components/ui/form/select/select.md +0 -0
  45. package/src/core/components/ui/form/switch/switch.md +0 -0
  46. package/src/core/components/ui/form/textarea/textarea.md +1 -1
  47. package/src/core/components/ui/image/image.md +147 -53
  48. package/src/core/components/ui/image/image.ts +10 -44
  49. package/src/core/components/ui/link/link.md +2 -2
  50. package/src/core/components/ui/link/link.ts +42 -37
  51. package/src/core/components/ui/loader/loader.md +0 -0
  52. package/src/core/components/ui/menu/menu.md +0 -0
  53. package/src/core/components/ui/modal/modal-close.ts +8 -12
  54. package/src/core/components/ui/modal/modal.md +0 -0
  55. package/src/core/components/ui/modal/modal.ts +18 -18
  56. package/src/core/components/ui/pop/pop.md +105 -1
  57. package/src/core/components/ui/pop/pop.ts +143 -148
  58. package/src/core/components/ui/table/table-caption.ts +0 -0
  59. package/src/core/components/ui/table/table.md +0 -0
  60. package/src/core/components/ui/table/table.ts +2 -8
  61. package/src/core/components/ui/theme/theme.ts +1 -1
  62. package/src/core/components/ui/toast/dismissed.ts +14 -0
  63. package/src/core/components/ui/toast/toast-item.ts +139 -91
  64. package/src/core/components/ui/toast/toast.ts +4 -7
  65. package/src/core/components/ui/tooltip/tooltip.ts +176 -154
  66. package/src/core/utils/LocationHandler.ts +12 -5
  67. package/src/core/utils/dismissed.ts +22 -0
  68. package/src/core/utils/positioning.spec.ts +208 -0
  69. package/src/core/utils/positioning.ts +183 -0
  70. package/src/core/utils/route.ts +0 -0
  71. package/src/directives.ts +2 -3
  72. package/src/docs/_core-concept/subscriber.md +0 -0
  73. package/src/docs/_getting-started/concorde-outside.md +3 -3
  74. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  75. package/src/docs/_getting-started/pubsub.md +0 -0
  76. package/src/docs/_getting-started/start.md +0 -0
  77. package/src/docs/code.ts +3 -1
  78. package/src/docs/example/users.ts +0 -0
  79. package/src/docs/search/docs-search.json +651 -21
  80. package/src/docs/search/page.ts +0 -0
  81. package/src/docs/tailwind/css/tailwind.css +13 -6
  82. package/src/tsconfig.json +45 -0
  83. package/src/tsconfig.tsbuildinfo +1 -1
  84. package/tailwind.config.js +50 -3
  85. package/vitest.setup.ts +49 -13
  86. package/.github/workflows/ci.yml +0 -21
  87. package/.github-export-ignore +0 -30
  88. package/CONTRIBUTING.md +0 -59
  89. package/DEV.md +0 -54
  90. package/LICENSE +0 -21
  91. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  92. package/concorde-3d.bundle.js +0 -3960
  93. package/concorde-3d.es.js +0 -33433
  94. package/concorde-hugging-face-infer.bundle.js +0 -32
  95. package/concorde-hugging-face-infer.es.js +0 -2952
  96. package/concorde-shader.bundle.js +0 -116
  97. package/concorde-shader.es.js +0 -8353
  98. package/concorde-webgpu.bundle.js +0 -307
  99. package/concorde-webgpu.es.js +0 -8627
  100. package/docs/altcha-widget.js +0 -2662
  101. package/docs/assets/index-BZiZXMU-.css +0 -1
  102. package/docs/assets/index-FmK4JaIM.js +0 -11992
  103. package/docs/crawl/core/components/functional/date/date.html +0 -190
  104. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  105. package/docs/crawl/core/components/functional/if/if.html +0 -27
  106. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  107. package/docs/crawl/core/components/functional/list/list.html +0 -70
  108. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  109. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  110. package/docs/crawl/core/components/functional/router/router.html +0 -106
  111. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  112. package/docs/crawl/core/components/functional/states/states.html +0 -66
  113. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  114. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  115. package/docs/crawl/core/components/functional/value/value.html +0 -51
  116. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  117. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  118. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  119. package/docs/crawl/core/components/ui/button/button.html +0 -149
  120. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  121. package/docs/crawl/core/components/ui/card/card.html +0 -99
  122. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  123. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  124. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  125. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  126. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  127. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  128. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -106
  129. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  130. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  131. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  132. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  133. package/docs/crawl/core/components/ui/group/group.html +0 -82
  134. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  135. package/docs/crawl/core/components/ui/image/image.html +0 -110
  136. package/docs/crawl/core/components/ui/link/link.html +0 -42
  137. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  138. package/docs/crawl/core/components/ui/menu/menu.html +0 -322
  139. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  140. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  141. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  142. package/docs/crawl/core/components/ui/table/table.html +0 -413
  143. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  144. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  145. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  146. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  147. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  148. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  149. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  150. package/docs/crawl/docs/_decorators/bind.html +0 -141
  151. package/docs/crawl/docs/_decorators/get.html +0 -149
  152. package/docs/crawl/docs/_decorators/handle.html +0 -165
  153. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  154. package/docs/crawl/docs/_decorators/patch.html +0 -78
  155. package/docs/crawl/docs/_decorators/post.html +0 -139
  156. package/docs/crawl/docs/_decorators/publish.html +0 -61
  157. package/docs/crawl/docs/_decorators/put.html +0 -78
  158. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  159. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  160. package/docs/crawl/docs/_directives/sub.html +0 -93
  161. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  162. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  163. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  164. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  165. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  166. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  167. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  168. package/docs/crawl/docs/_getting-started/start.html +0 -76
  169. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  170. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  171. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  172. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  173. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  174. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  175. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  176. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  177. package/docs/crawl/hubs/decorators.html +0 -547
  178. package/docs/crawl/hubs/form-components.html +0 -357
  179. package/docs/crawl/hubs/remote-data.html +0 -452
  180. package/docs/crawl/index.html +0 -101
  181. package/docs/css/docs.css +0 -0
  182. package/docs/docs-mock-api-sw.js +0 -720
  183. package/docs/docs-mock-api-sw.js.map +0 -7
  184. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  185. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  186. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  187. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  188. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  189. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  190. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  191. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  192. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  193. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  194. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  195. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  196. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  197. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  198. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  199. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  200. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  201. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  202. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  203. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  204. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  205. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  206. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  207. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  208. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  209. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  210. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  211. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  212. package/docs/img/concorde-icon.svg +0 -5
  213. package/docs/img/concorde-logo.svg +0 -1
  214. package/docs/img/concorde.png +0 -0
  215. package/docs/img/concorde_def.png +0 -0
  216. package/docs/img/concorde_seuil.png.webp +0 -0
  217. package/docs/img/concorde_seuil_invert.png +0 -0
  218. package/docs/img/paul_metrand.jpg +0 -0
  219. package/docs/img/paul_metrand_xs.jpg +0 -0
  220. package/docs/index.html +0 -93
  221. package/docs/llms-full.txt +0 -5787
  222. package/docs/llms.txt +0 -104
  223. package/docs/robots.txt +0 -16
  224. package/docs/sitemap.xml +0 -237
  225. package/docs/src/core/components/functional/date/date.md +0 -290
  226. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  227. package/docs/src/core/components/functional/if/if.md +0 -9
  228. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  229. package/docs/src/core/components/functional/list/list.md +0 -65
  230. package/docs/src/core/components/functional/mix/mix.md +0 -41
  231. package/docs/src/core/components/functional/queue/queue.md +0 -72
  232. package/docs/src/core/components/functional/router/router.md +0 -94
  233. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  234. package/docs/src/core/components/functional/sdui/example.json +0 -99
  235. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  236. package/docs/src/core/components/functional/states/states.md +0 -87
  237. package/docs/src/core/components/functional/submit/submit.md +0 -114
  238. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  239. package/docs/src/core/components/functional/value/value.md +0 -35
  240. package/docs/src/core/components/ui/alert/alert.md +0 -121
  241. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  242. package/docs/src/core/components/ui/badge/badge.md +0 -127
  243. package/docs/src/core/components/ui/button/button.md +0 -182
  244. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  245. package/docs/src/core/components/ui/card/card.md +0 -97
  246. package/docs/src/core/components/ui/divider/divider.md +0 -35
  247. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  248. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  249. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  250. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  251. package/docs/src/core/components/ui/form/input/input.md +0 -142
  252. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  253. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  254. package/docs/src/core/components/ui/form/select/select.md +0 -71
  255. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  256. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  257. package/docs/src/core/components/ui/group/group.md +0 -75
  258. package/docs/src/core/components/ui/icon/icon.md +0 -125
  259. package/docs/src/core/components/ui/icon/icons.json +0 -1
  260. package/docs/src/core/components/ui/image/image.md +0 -107
  261. package/docs/src/core/components/ui/link/link.md +0 -43
  262. package/docs/src/core/components/ui/loader/loader.md +0 -55
  263. package/docs/src/core/components/ui/menu/menu.md +0 -329
  264. package/docs/src/core/components/ui/modal/modal.md +0 -119
  265. package/docs/src/core/components/ui/pop/pop.md +0 -96
  266. package/docs/src/core/components/ui/progress/progress.md +0 -63
  267. package/docs/src/core/components/ui/table/table.md +0 -455
  268. package/docs/src/core/components/ui/toast/toast.md +0 -166
  269. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  270. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  271. package/docs/src/docs/_core-concept/overview.md +0 -57
  272. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  273. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  274. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  275. package/docs/src/docs/_decorators/bind.md +0 -167
  276. package/docs/src/docs/_decorators/get.md +0 -162
  277. package/docs/src/docs/_decorators/handle.md +0 -175
  278. package/docs/src/docs/_decorators/on-assign.md +0 -390
  279. package/docs/src/docs/_decorators/patch.md +0 -70
  280. package/docs/src/docs/_decorators/post.md +0 -146
  281. package/docs/src/docs/_decorators/publish.md +0 -55
  282. package/docs/src/docs/_decorators/put.md +0 -70
  283. package/docs/src/docs/_decorators/subscribe.md +0 -100
  284. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  285. package/docs/src/docs/_directives/sub.md +0 -91
  286. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  287. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  288. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  289. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  290. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  291. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  292. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  293. package/docs/src/docs/_getting-started/start.md +0 -47
  294. package/docs/src/docs/_getting-started/theming.md +0 -91
  295. package/docs/src/docs/_misc/api-configuration.md +0 -81
  296. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  297. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  298. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  299. package/docs/src/docs/_misc/endpoint.md +0 -45
  300. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  301. package/docs/src/docs/_misc/html-integration.md +0 -15
  302. package/docs/src/docs/search/docs-search.json +0 -9512
  303. package/docs/src/tag-list.json +0 -1
  304. package/docs/src/tsconfig-model.json +0 -23
  305. package/docs/src/tsconfig.declarations.json +0 -22
  306. package/docs/src/tsconfig.emit.json +0 -23
  307. package/docs/src/tsconfig.json +0 -858
  308. package/docs/svg/regular/plane.svg +0 -1
  309. package/docs/svg/solid/plane.svg +0 -1
  310. package/gitlab/job_github_mirror.sh +0 -39
  311. package/scripts/github-export.mjs +0 -150
  312. package/src/css.d.ts +0 -19
  313. package/src/tsconfig.declarations.json +0 -22
  314. package/src/tsconfig.emit.json +0 -23
@@ -1,79 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html" data-doc-id="core/components/ui/form/form-actions/form-actions">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Form-actions — Concorde</title>
7
- <meta name="description" content="Left seats">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/form-actions/form-actions">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-actions/form-actions.md/form-actions" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-actions</strong>. Left seats <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
19
- <h1 id="form-actions">Form-actions</h1>
20
- <h2 id="left-by-default">Left by default</h2>
21
- <pre><code>&lt;form&gt;
22
- &lt;sonic-form-layout&gt;
23
- &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
24
- &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
25
- &lt;sonic-form-actions&gt;
26
- &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
27
- &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
28
- &lt;/sonic-form-actions&gt;
29
- &lt;/sonic-form-layout&gt;
30
- &lt;/form &gt;
31
- </code></pre>
32
- <h2 id="justify">Justify</h2>
33
- <pre><code>&lt;form&gt;
34
- &lt;sonic-form-layout&gt;
35
- &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
36
- &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
37
- &lt;sonic-form-actions justify=&quot;flex-end&quot;&gt;
38
- &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
39
- &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
40
- &lt;/sonic-form-actions&gt;
41
- &lt;/sonic-form-layout&gt;
42
- &lt;/form &gt;
43
- </code></pre>
44
- <h2 id="direction">Direction</h2>
45
- <pre><code>&lt;form&gt;
46
- &lt;sonic-form-layout&gt;
47
- &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
48
- &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
49
- &lt;sonic-form-actions direction=&quot;row-reverse&quot;&gt;
50
- &lt;sonic-button type=&quot;success&quot;&gt;&lt;sonic-icon name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Submit&lt;/sonic-button&gt;
51
- &lt;sonic-button type=&quot;danger&quot; variant=&quot;ghost&quot;&gt;&lt;sonic-icon name=&quot;undo&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Cancel&lt;/sonic-button&gt;
52
- &lt;/sonic-form-actions&gt;
53
- &lt;/sonic-form-layout&gt;
54
- &lt;/form &gt;
55
- </code></pre>
56
- <h2 id="center">Center</h2>
57
- <pre><code>&lt;form&gt;
58
- &lt;sonic-form-layout&gt;
59
- &lt;sonic-input label=&quot;First name&quot;&gt;&lt;/sonic-input&gt;
60
- &lt;sonic-input label=&quot;Last name&quot;&gt;&lt;/sonic-input&gt;
61
- &lt;sonic-form-actions justify=&quot;center&quot; &gt;
62
- &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
63
- &lt;sonic-icon name=&quot;nav-arrow-left&quot; library=&quot;iconoir&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
64
- Left seats
65
- &lt;/sonic-button&gt;
66
- &lt;sonic-divider vertical&gt;&lt;/sonic-divider&gt;
67
- &lt;sonic-button type=&quot;info&quot; minWidth=&quot;12rem&quot;&gt;
68
- &lt;sonic-icon name=&quot;nav-arrow-right&quot; library=&quot;iconoir&quot; slot=&quot;suffix&quot;&gt;&lt;/sonic-icon&gt;
69
- Right seats
70
- &lt;/sonic-button&gt;
71
- &lt;/sonic-form-actions&gt;
72
- &lt;/sonic-form-layout&gt;
73
- &lt;/form &gt;
74
- </code></pre>
75
-
76
- </article>
77
- </main>
78
- </body>
79
- </html>
@@ -1,62 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html" data-doc-id="core/components/ui/form/form-layout/form-layout">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Form-layout — Concorde</title>
7
- <meta name="description" content="autocomplete=&quot;email&quot;">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-layout/form-layout.md/form-layout" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form-layout</strong>. autocomplete=&quot;email&quot; <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form-layout, UI component, form, sonic-form-layout, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
19
- <h1 id="form-layout">Form-layout</h1>
20
- <pre><code>&lt;form&gt;
21
- &lt;sonic-form-layout&gt;
22
- &lt;sonic-input autocomplete=&quot;family-name&quot; label=&quot;Nom&quot; name=&quot;nom&quot;&gt;&lt;/sonic-input&gt;
23
- &lt;sonic-input autocomplete=&quot;given-name&quot; label=&quot;Prénom&quot; name=&quot;prenom&quot;&gt;&lt;/sonic-input&gt;
24
- &lt;sonic-select autocomplete=&quot;sex&quot; label=&quot;Sexe&quot; name=&quot;sexe&quot;&gt;
25
- &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- Sélectionner -&lt;/option&gt;
26
- &lt;option value=&quot;-&quot;&gt;Je préfère ne pas le dire&lt;/option&gt;
27
- &lt;option value=&quot;Homme&quot;&gt;Homme&lt;/option&gt;
28
- &lt;option value=&quot;Femme&quot;&gt;Femme&lt;/option&gt;
29
- &lt;/sonic-select&gt;
30
- &lt;sonic-input autocomplete=&quot;bday&quot; label=&quot;Date de naissance&quot; name=&quot;date_naissance&quot; type=&quot;date&quot;&gt;&lt;/sonic-input&gt;
31
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
32
- &lt;sonic-input autocomplete=&quot;email&quot; label=&quot;e-mail&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;&lt;/sonic-input&gt;
33
- &lt;sonic-input
34
- autocomplete=&quot;email&quot;
35
- label=&quot;Confirmer votre e-mail&quot;
36
- name=&quot;email_confirmation&quot;
37
- type=&quot;email&quot;
38
- &gt;&lt;/sonic-input&gt;
39
- &lt;sonic-input autocomplete=&quot;new-password&quot; label=&quot;Mot de passe&quot; name=&quot;password&quot; type=&quot;password&quot;&gt;&lt;/sonic-input&gt;
40
- &lt;sonic-input
41
- autocomplete=&quot;new-password&quot;
42
- label=&quot;Confirmer votre mot de passe&quot;
43
- name=&quot;password_confirmation&quot;
44
- type=&quot;password&quot;
45
- &gt;&lt;/sonic-input&gt;
46
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
47
- &lt;sonic-textarea label=&quot;Message&quot; rows=&quot;5&quot;&gt;
48
- &lt;/sonic-textarea&gt;
49
- &lt;sonic-switch&gt;Activer une superbe option&lt;/sonic-switch&gt;
50
- &lt;sonic-checkbox&gt;Inscription à la newsletter&lt;/sonic-checkbox&gt;
51
- &lt;sonic-checkbox&gt;J&#39;ai lu et accepte les &lt;sonic-link href=&quot;#&quot; class=&quot;underline&quot;&gt;Conditions générales de ventes&lt;/sonic-link&gt;&lt;/sonic-checkbox&gt;
52
- &lt;sonic-form-actions&gt;
53
- &lt;sonic-button type=&quot;success&quot;&gt;Valider&lt;/sonic-button&gt;
54
- &lt;/sonic-form-actions&gt;
55
- &lt;/sonic-form-layout&gt;
56
- &lt;/form &gt;
57
- </code></pre>
58
-
59
- </article>
60
- </main>
61
- </body>
62
- </html>
@@ -1,109 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html" data-doc-id="core/components/ui/form/input/input">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Input — Concorde</title>
7
- <meta name="description" content="Native attibutes list">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/input/input">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/input/input.md/input" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attibutes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
19
- <h1 id="input">Input</h1>
20
- <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
21
- <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
22
- Native attibutes list
23
- </sonic-button>
24
-
25
- <h2 id="label">Label</h2>
26
- <pre><code>&lt;sonic-input label=&quot;Label&quot;&gt;&lt;/sonic-input&gt;
27
- </code></pre>
28
- <h2 id="placeholder">Placeholder</h2>
29
- <pre><code>&lt;sonic-input placeholder=&quot;placeholder&quot;&gt;&lt;/sonic-input&gt;
30
- </code></pre>
31
- <h2 id="value">Value</h2>
32
- <pre><code>&lt;sonic-input value=&quot;value&quot;&gt;&lt;/sonic-input&gt;
33
- </code></pre>
34
- <h2 id="required">Required</h2>
35
- <pre><code>&lt;sonic-input required type=&quot;email&quot; placeholder=&quot;you@email.com&quot; label=&quot;Feedback on blur&quot;&gt;&lt;/sonic-input&gt;
36
- </code></pre>
37
- <h2 id="description">Description</h2>
38
- <pre><code>&lt;sonic-input description=&quot;Description goes here&quot; &gt;&lt;/sonic-input&gt;
39
- </code></pre>
40
- <h2 id="type">Type</h2>
41
- <p><sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button></p>
42
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
43
- &lt;sonic-input type=&quot;text&quot; label=&quot;Text&quot;&gt;Text&lt;/sonic-input&gt;
44
- &lt;sonic-input type=&quot;email&quot; label=&quot;Email&quot; placeholder=&quot;plop@kiki.com&quot;&gt;&lt;/sonic-input&gt;
45
- &lt;sonic-input type=&quot;password&quot; label=&quot;Password&quot;&gt;&lt;/sonic-input&gt;
46
- &lt;sonic-input type=&quot;date&quot; label=&quot;Date&quot;&gt;&lt;/sonic-input&gt;
47
- &lt;sonic-input type=&quot;number&quot; label=&quot;Number&quot;&gt;&lt;/sonic-input&gt;
48
- &lt;sonic-input type=&quot;color&quot; label=&quot;Color&quot; value=&quot;#ffff00&quot;&gt;&lt;/sonic-input&gt;
49
- &lt;/div&gt;
50
- </code></pre>
51
- <h2 id="size">Size</h2>
52
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
53
- &lt;sonic-input size=&quot;2xs&quot; value=&quot;2xs&quot;&gt;&lt;/sonic-input&gt;
54
- &lt;sonic-input size=&quot;xs&quot; value=&quot;xs&quot;&gt;&lt;/sonic-input&gt;
55
- &lt;sonic-input size=&quot;sm&quot; value=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
56
- &lt;sonic-input size=&quot;md&quot; value=&quot;md&quot;&gt;&lt;/sonic-input&gt;
57
- &lt;sonic-input value=&quot;default&quot;&gt;&lt;/sonic-input&gt;
58
- &lt;sonic-input size=&quot;lg&quot; value=&quot;lg&quot;&gt;&lt;/sonic-input&gt;
59
- &lt;sonic-input size=&quot;xl&quot; value=&quot;xl&quot;&gt;&lt;/sonic-input&gt;
60
- &lt;sonic-input size=&quot;2xl&quot; value=&quot;2xl&quot;&gt;&lt;/sonic-input&gt;
61
- &lt;/div&gt;
62
- </code></pre>
63
- <h2 id="list">List</h2>
64
- <p><sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert></p>
65
- <pre><code>&lt;sonic-input list=&quot;browsers&quot;&gt;&lt;/sonic-input&gt;
66
- &lt;datalist id=&quot;browsers&quot;&gt;
67
- &lt;option value=&quot;Internet Explorer&quot;&gt;
68
- &lt;option value=&quot;Firefox&quot;&gt;
69
- &lt;option value=&quot;Google Chrome&quot;&gt;
70
- &lt;option value=&quot;Opera&quot;&gt;
71
- &lt;option value=&quot;Safari&quot;&gt;
72
- &lt;/datalist&gt;
73
- </code></pre>
74
- <h2 id="prefix--suffix">Prefix &amp; suffix</h2>
75
- <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-3&quot;&gt;
76
- &lt;sonic-input type=&quot;search&quot; label=&quot;Search&quot; placeholder=&quot;Search plane&quot;&gt;
77
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;search&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
78
- &lt;/sonic-input&gt;
79
- &lt;sonic-input type=&quot;number&quot; label=&quot;Amount&quot; placeholder=&quot;0&quot;&gt;
80
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;euro&quot; slot=&quot;suffix&quot;&gt;&lt;/sonic-icon&gt;
81
- &lt;/sonic-input&gt;
82
- &lt;/div&gt;
83
- </code></pre>
84
- <h2 id="inlinecontent">InlineContent</h2>
85
- <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-3&quot;&gt;
86
- &lt;sonic-input inlineContent type=&quot;search&quot; label=&quot;Search icon in input&quot; placeholder=&quot;Search plane&quot;&gt;
87
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;search&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
88
- &lt;/sonic-input&gt;
89
- &lt;sonic-input inlineContent type=&quot;number&quot; label=&quot;Number of seats&quot; placeholder=&quot;0&quot;&gt;
90
- &lt;div slot=&quot;suffix&quot; class=&quot;flex gap-2 items-center&quot;&gt;
91
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;4 max&lt;/sonic-badge&gt;
92
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;euro&quot; &gt;&lt;/sonic-icon&gt;
93
- &lt;/div&gt;
94
- &lt;/sonic-input&gt;
95
- &lt;/div&gt;
96
- </code></pre>
97
- <h2 id="example-of-use--search--queue">Example of use — search + queue</h2>
98
- <p>Filter with <strong><code>formDataProvider</code></strong> + <strong><code>name=&quot;contains&quot;</code></strong> (mock API: substring on joke text). Caption and rows via Lit (<code>@subscribe</code>, <code>.items</code> on <code>sonic-queue</code>):</p>
99
- <p><docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo></p>
100
- <pre><code>&lt;sonic-input type=&quot;search&quot; placeholder=&quot;Search plane&quot; class=&quot;inline-block&quot;&gt;
101
- &lt;/sonic-input&gt;
102
- &lt;sonic-button type=&quot;danger&quot; label=&quot;Amount&quot; placeholder=&quot;0&quot;&gt;azdazd
103
- &lt;/sonic-button&gt;
104
- </code></pre>
105
- <!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->
106
- </article>
107
- </main>
108
- </body>
109
- </html>
@@ -1,106 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html" data-doc-id="core/components/ui/form/input-autocomplete/input-autocomplete">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Input-autocomplete — Concorde</title>
7
- <meta name="description" content="The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue.">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, items, docs-queue-geo-demo, src/docs/example/docs-queue-demos.ts, searchParam, name, value">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/input-autocomplete/input-autocomplete">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/input-autocomplete/input-autocomplete.md/input-autocomplete" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input-autocomplete</strong>. The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue. <span>Doc ID: <code>core/components/ui/form/input-autocomplete/input-autocomplete</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, items, docs-queue-geo-demo, src/docs/example/docs-queue-demos.ts, searchParam, name, value. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html</a>.</span></p>
19
- <h1 id="input-autocomplete">Input-autocomplete</h1>
20
- <p>The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form <a href="../input/input.html#input">input</a> and as a <a href="../../../functional/queue/queue.html#queue">queue</a>.</p>
21
- <p>Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a <a href="../../../functional/queue/queue.html#queue">queue</a> in order to take full advantage of the input-autocomplete component.</p>
22
- <p>Here are some of the features of the input-autocomplete component:</p>
23
- <p>Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an <strong><code>items</code></strong> callback with the row object (see <code>docs-queue-geo-demo</code> in <code>src/docs/example/docs-queue-demos.ts</code>). Embedding without Lit: <a href="../../../../../docs/_misc/html-integration.html#html-integration">HTML integration</a>.</p>
24
- <ul>
25
- <li>It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.</li>
26
- <li>It can be used with a variety of data providers, such as an API.</li>
27
- <li>It is fully customizable, so you can change the look and feel of the component to match your needs.</li>
28
- </ul>
29
- <p>If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. </p>
30
- <h2 id="simple-example">Simple Example</h2>
31
- <p>In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.</p>
32
- <p>The template is used to render the list items of results.
33
- The list items are responsible for making a selection.</p>
34
- <p>This time, we added buttons with the same name as the input while keeping the same data provider.
35
- The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.</p>
36
- <pre><code>&lt;sonic-input-autocomplete
37
- class=&quot;w-64&quot;
38
- label=&quot;A french city name&quot;
39
- formDataProvider=&quot;autoComplete-example-base&quot;
40
- name=&quot;nom&quot;
41
- propertyName=&quot;bloop&quot;
42
- placeholder=&quot;Paris, Lyon, Tours, ...&quot;
43
- serviceurl=&quot;/docs-mock-api/geo&quot;
44
- dataproviderexpression=&quot;communes?limit=5&amp;boost=population&quot;
45
- &gt;
46
- &lt;template&gt;
47
- &lt;sonic-menu-item debug radio name=&quot;nom&quot; data-bind ::inner-html=&quot;$nom&quot; ::value=&quot;$nom&quot;&gt;&lt;/sonic-menu-item&gt;
48
- </code></pre>
49
- <h2 id="value-different-from-search-parameter">Value different from search parameter</h2>
50
- <p>In this example, the search parameter is separated from the name of the input. This means that the input will use the name &quot;nom&quot; as the search parameter, but the form data provider will be filled with the data named &quot;siren&quot; from the selected list item.</p>
51
- <p>To do this, we need to use the <code>searchParam</code> attribute on the input element. This attribute specifies the name of the search parameter that will be used.</p>
52
- <p>We also need to use the <code>name</code> and <code>value</code> attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.</p>
53
- <p>By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.</p>
54
- <pre><code>&lt;sonic-input-autocomplete
55
- class=&quot;w-64&quot;
56
- label=&quot;A french city name&quot;
57
- formDataProvider=&quot;autoComplete-example&quot;
58
- name=&quot;siren&quot;
59
- value=&quot;212703771&quot;
60
- placeholder=&quot;Paris, Lyon, Tours, ...&quot;
61
- serviceurl=&quot;/docs-mock-api/geo&quot;
62
- dataproviderexpression=&quot;communes?limit=5&amp;boost=population&quot;
63
- searchParameter=&quot;nom&quot;
64
- &gt;
65
- &lt;template&gt;
66
- &lt;sonic-menu-item debug radio name=&quot;siren&quot; data-bind ::inner-html=&quot;$nom&quot; ::value=&quot;$siren&quot;&gt;&lt;/sonic-menu-item&gt;
67
- </code></pre>
68
- <h2 id="select-autocomplete--value-different-from-search-parameter">Select autocomplete / value different from search parameter</h2>
69
- <p>This example is the same as the previous one, except that the <code>select</code> attribute is used. This attribute changes the look and feel of the component slightly.</p>
70
- <p>Now the text is less free because, you must select either something from the list given by the service, or nothing else.</p>
71
- <p>The following code shows how to use the <code>select</code> attribute in an autocomplete input:</p>
72
- <pre><code>&lt;sonic-input-autocomplete
73
- select
74
- class=&quot;w-64&quot;
75
- label=&quot;A french city name&quot;
76
- formDataProvider=&quot;autoComplete-example2&quot;
77
- name=&quot;siren&quot;
78
- value=&quot;212703771&quot;
79
- placeholder=&quot;Paris, Lyon, Tours, ...&quot;
80
- serviceurl=&quot;/docs-mock-api/geo&quot;
81
- dataproviderexpression=&quot;communes?limit=5&amp;boost=population&quot;
82
- searchParameter=&quot;nom&quot;
83
- &gt;
84
- &lt;template&gt;
85
- &lt;sonic-menu-item debug radio name=&quot;siren&quot; data-bind ::inner-html=&quot;$nom&quot; ::value=&quot;$siren&quot;&gt;&lt;/sonic-menu-item&gt;
86
- </code></pre>
87
- <h2 id="keyboard-navigation">keyboard navigation</h2>
88
- <p>At the moment you can enable keyboard up/down by adding an attribut &quot;data-keyboard-nav&quot; on the component and its listItems</p>
89
- <pre><code>&lt;sonic-input-autocomplete
90
- class=&quot;w-64&quot;
91
- label=&quot;A french city name&quot;
92
- formDataProvider=&quot;autoComplete-example-keyboard&quot;
93
- name=&quot;nom&quot;
94
- data-keyboard-nav=&quot;nav-autocomplete&quot;
95
- placeholder=&quot;Paris, Lyon, Tours, ...&quot;
96
- serviceurl=&quot;/docs-mock-api/geo&quot;
97
- dataproviderexpression=&quot;communes?limit=60&amp;boost=population&quot;
98
- &gt;
99
- &lt;template&gt;
100
- &lt;sonic-menu-item debug radio name=&quot;nom&quot; data-keyboard-nav=&quot;nav-autocomplete&quot; data-bind ::inner-html=&quot;$nom&quot; ::value=&quot;$nom&quot;&gt;&lt;/sonic-menu-item&gt;
101
- </code></pre>
102
-
103
- </article>
104
- </main>
105
- </body>
106
- </html>
@@ -1,56 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html" data-doc-id="core/components/ui/form/radio/radio">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Radio — Concorde</title>
7
- <meta name="description" content="&gt;Already checked radio">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, blacklistFlags">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/radio/radio">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/radio/radio.md/radio" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Radio</strong>. &gt;Already checked radio <span>Doc ID: <code>core/components/ui/form/radio/radio</code>. Keywords: Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, blacklistFlags. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html</a>.</span></p>
19
- <h1 id="radio">Radio</h1>
20
- <h2 id="size">Size</h2>
21
- <pre><code>&lt;div class=&quot;grid gap-2&quot; formDataProvider=&quot;radioSizeExemple&quot;&gt;
22
- &lt;sonic-radio name=&quot;size&quot; value=&quot;2xs&quot; size=&quot;2xs&quot;&gt;2xs radio&lt;/sonic-radio&gt;
23
- &lt;sonic-radio name=&quot;size&quot; value=&quot;xs&quot; size=&quot;xs&quot;&gt;xs radio&lt;/sonic-radio&gt;
24
- &lt;sonic-radio name=&quot;size&quot; value=&quot;sm&quot; size=&quot;sm&quot;&gt;sm radio&lt;/sonic-radio&gt;
25
- &lt;sonic-radio name=&quot;size&quot; value=&quot;default&quot; &gt;default radio&lt;/sonic-radio&gt;
26
- &lt;sonic-radio name=&quot;size&quot; value=&quot;lg&quot; size=&quot;lg&quot;&gt;lg radio&lt;/sonic-radio&gt;
27
- &lt;sonic-radio name=&quot;size&quot; value=&quot;xl&quot; size=&quot;xl&quot;&gt;xl radio&lt;/sonic-radio&gt;
28
- &lt;sonic-radio name=&quot;size&quot; value=&quot;2xl&quot; size=&quot;2xl&quot;&gt;2xl radio&lt;/sonic-radio&gt;
29
- &lt;/div&gt;
30
- </code></pre>
31
- <h2 id="checked">Checked</h2>
32
- <pre><code>&lt;sonic-radio checked
33
- &gt;Already checked radio
34
- &lt;/sonic-radio&gt;
35
- </code></pre>
36
- <h2 id="disabled">Disabled</h2>
37
- <pre><code>&lt;sonic-radio disabled
38
- &gt;Disabled radio
39
- &lt;/sonic-radio&gt;
40
- </code></pre>
41
- <h2 id="disabled-and-checked">Disabled and checked</h2>
42
- <pre><code>&lt;sonic-radio disabled checked
43
- &gt;Disabled but already checked radio
44
- &lt;/sonic-radio&gt;
45
- </code></pre>
46
- <h2 id="radio-with-link">radio with link</h2>
47
- <pre><code>&lt;sonic-radio name=&quot;link&quot; value=&quot;link&quot;&gt;radio with &lt;sonic-link href=&quot;#&quot; class=&quot;underline text-info&quot;&gt;link&lt;/sonic-link&gt;
48
- </code></pre>
49
- <h2 id="example-of-use--blacklist--queue">Example of use — blacklist + queue</h2>
50
- <p>Same mock filter as <a href="../checkbox/checkbox.html#checkbox">Checkbox</a> (<code>blacklistFlags</code> query param). Radio sends <strong>one</strong> flag at a time.</p>
51
- <p><docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo></p>
52
-
53
- </article>
54
- </main>
55
- </body>
56
- </html>
@@ -1,73 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html" data-doc-id="core/components/ui/form/select/select">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Select — Concorde</title>
7
- <meta name="description" content="{&quot;value&quot;:&quot;dark&quot;, &quot;wording&quot;:&quot;dark (set by \&quot;attribute\&quot;)&quot;, &quot;selected&quot; : &quot;true&quot;}, {&quot;value&quot;:&quot;auto&quot;, &quot;wording&quot;:&quot;auto&quot;}">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, name=&quot;lang&quot;, ?lang=fr|en, filterDocsJokes, contains">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/select/select">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/select/select.md/select" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Select</strong>. {&quot;value&quot;:&quot;dark&quot;, &quot;wording&quot;:&quot;dark (set by \&quot;attribute\&quot;)&quot;, &quot;selected&quot; : &quot;true&quot;}, {&quot;value&quot;:&quot;auto&quot;, &quot;wording&quot;:&quot;auto&quot;} <span>Doc ID: <code>core/components/ui/form/select/select</code>. Keywords: Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, name=&quot;lang&quot;, ?lang=fr|en, filterDocsJokes, contains. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html</a>.</span></p>
19
- <h1 id="select">Select</h1>
20
- <h2 id="options">Options</h2>
21
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
22
- &lt;sonic-select&gt;
23
- &lt;option value=&quot;&quot;&gt;No Selection&lt;/option&gt;
24
- &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
25
- &lt;option value=&quot;2&quot; selected&gt;Two (set by &quot;tag&quot;)&lt;/option&gt;
26
- &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
27
- &lt;/sonic-select&gt;
28
- &lt;sonic-select options=&#39;[{&quot;value&quot;:&quot;&quot;, &quot;wording&quot;:&quot;Set options via \&quot;attribute\&quot;&quot;},
29
- {&quot;value&quot;:&quot;dark&quot;, &quot;wording&quot;:&quot;dark (set by \&quot;attribute\&quot;)&quot;, &quot;selected&quot; : &quot;true&quot;}, {&quot;value&quot;:&quot;auto&quot;, &quot;wording&quot;:&quot;auto&quot;}
30
- ]&#39;&gt;
31
- &lt;/sonic-select&gt;
32
- &lt;/div&gt;
33
- </code></pre>
34
- <h2 id="size">Size</h2>
35
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
36
- &lt;sonic-select size=&quot;2xs&quot;&gt;&lt;option&gt;2xs&lt;/option&gt;&lt;/sonic-select&gt;
37
- &lt;sonic-select size=&quot;xs&quot;&gt;&lt;option&gt;xs&lt;/option&gt;&lt;/sonic-select&gt;
38
- &lt;sonic-select size=&quot;sm&quot;&gt;&lt;option&gt;sm&lt;/option&gt;&lt;/sonic-select&gt;
39
- &lt;sonic-select size=&quot;md&quot;&gt;&lt;option&gt;md&lt;/option&gt;&lt;/sonic-select&gt;
40
- &lt;sonic-select size=&quot;default&quot;&gt;&lt;option&gt;default&lt;/option&gt;&lt;/sonic-select&gt;
41
- &lt;sonic-select size=&quot;lg&quot;&gt;&lt;option&gt;lg&lt;/option&gt;&lt;/sonic-select&gt;
42
- &lt;sonic-select size=&quot;xl&quot;&gt;&lt;option&gt;xl&lt;/option&gt;&lt;/sonic-select&gt;
43
- &lt;sonic-select size=&quot;2xl&quot;&gt;&lt;option&gt;2xl&lt;/option&gt;&lt;/sonic-select&gt;
44
- &lt;/div&gt;
45
- </code></pre>
46
- <h2 id="multiple">Multiple</h2>
47
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
48
- &lt;sonic-select multiple&gt;
49
- &lt;option value=&quot;&quot;&gt;Choose a number&lt;/option&gt;
50
- &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
51
- &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
52
- &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
53
- &lt;/sonic-select&gt;
54
- &lt;/div&gt;
55
- </code></pre>
56
- <h2 id="disabled">Disabled</h2>
57
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
58
- &lt;sonic-select disabled&gt;
59
- &lt;option value=&quot;&quot;&gt;Choose a number&lt;/option&gt;
60
- &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
61
- &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
62
- &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
63
- &lt;/sonic-select&gt;
64
- &lt;/div&gt;
65
- </code></pre>
66
- <h2 id="example-of-use--language-filter--queue">Example of use — language filter + queue</h2>
67
- <p><strong><code>name=&quot;lang&quot;</code></strong> is sent as <code>?lang=fr|en</code> to the <a href="../../../../../docs/_misc/docs-mock-api.html#docs-mock-api">doc mock API</a> (<code>filterDocsJokes</code>). Same pattern as <a href="../input/input.html#input">Input</a> (<code>contains</code>):</p>
68
- <p><docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo></p>
69
-
70
- </article>
71
- </main>
72
- </body>
73
- </html>
@@ -1,56 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html" data-doc-id="core/components/ui/form/switch/switch">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Switch — Concorde</title>
7
- <meta name="description" content="&gt;Already checked switch">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/switch/switch, switch, Switch, UI component, form, sonic-switch, web component">
9
- <meta name="concorde-doc-id" content="core/components/ui/form/switch/switch">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/switch/switch.md/switch" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Switch</strong>. &gt;Already checked switch <span>Doc ID: <code>core/components/ui/form/switch/switch</code>. Keywords: Concorde, supersoniks, core/components/ui/form/switch/switch, switch, Switch, UI component, form, sonic-switch, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html</a>.</span></p>
19
- <h1 id="switch">Switch</h1>
20
- <h2 id="size">Size</h2>
21
- <pre><code>&lt;div class=&quot;grid gap-2&quot; formDataProvider=&quot;switchSizeExemple&quot;&gt;
22
- &lt;sonic-switch name=&quot;size2xs&quot; value=&quot;2xs&quot; size=&quot;2xs&quot;&gt;2xs switch&lt;/sonic-switch&gt;
23
- &lt;sonic-switch name=&quot;sizexs&quot; value=&quot;xs&quot; size=&quot;xs&quot;&gt;xs switch&lt;/sonic-switch&gt;
24
- &lt;sonic-switch name=&quot;sizesm&quot; value=&quot;sm&quot; size=&quot;sm&quot;&gt;sm switch&lt;/sonic-switch&gt;
25
- &lt;sonic-switch name=&quot;size&quot; value=&quot;default&quot; &gt;default switch&lt;/sonic-switch&gt;
26
- &lt;sonic-switch name=&quot;sizelg&quot; value=&quot;lg&quot; size=&quot;lg&quot;&gt;lg switch&lt;/sonic-switch&gt;
27
- &lt;sonic-switch name=&quot;sizexl&quot; value=&quot;xl&quot; size=&quot;xl&quot;&gt;xl switch&lt;/sonic-switch&gt;
28
- &lt;sonic-switch name=&quot;size2xl&quot; value=&quot;2xl&quot; size=&quot;2xl&quot;&gt;2xl switch&lt;/sonic-switch&gt;
29
- &lt;/div&gt;
30
- </code></pre>
31
- <h2 id="checked">Checked</h2>
32
- <pre><code>&lt;sonic-switch checked
33
- &gt;Already checked switch
34
- &lt;/sonic-switch&gt;
35
- </code></pre>
36
- <h2 id="disabled">Disabled</h2>
37
- <pre><code>&lt;sonic-switch disabled
38
- &gt;Disabled switch
39
- &lt;/sonic-switch&gt;
40
- </code></pre>
41
- <h2 id="disabled-and-checked">Disabled and checked</h2>
42
- <pre><code>&lt;sonic-switch disabled checked
43
- &gt;Disabled but already checked switch
44
- &lt;/sonic-switch&gt;
45
- </code></pre>
46
- <h2 id="switch-with-link">switch with link</h2>
47
- <pre><code>&lt;sonic-switch name=&quot;link&quot; value=&quot;link&quot;&gt;switch with &lt;sonic-link href=&quot;#&quot; class=&quot;underline text-info&quot;&gt;link&lt;/sonic-link&gt;
48
- </code></pre>
49
- <h2 id="example-of-use--blacklist--queue">Example of use — blacklist + queue</h2>
50
- <p>Same mock filter as <a href="../checkbox/checkbox.html#checkbox">Checkbox</a>; switches can enable several flags (comma-separated in the query).</p>
51
- <p><docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo></p>
52
-
53
- </article>
54
- </main>
55
- </body>
56
- </html>