@gov-design-system-ce/components 0.0.36 → 0.0.38

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 (490) hide show
  1. package/dist/cjs/{constants-245999e7.js → constants-ff12205f.js} +1 -1
  2. package/dist/cjs/constants-ff12205f.js.map +1 -0
  3. package/dist/cjs/core.cjs.js +1 -1
  4. package/dist/cjs/{form-62c6a8c6.js → form-f68d13c6.js} +2 -2
  5. package/dist/cjs/form-f68d13c6.js.map +1 -0
  6. package/dist/cjs/gov-accordion.cjs.entry.js +2 -2
  7. package/dist/cjs/gov-alert.cjs.entry.js +2 -2
  8. package/dist/cjs/gov-alert.cjs.entry.js.map +1 -1
  9. package/dist/cjs/gov-app.cjs.entry.js +1122 -663
  10. package/dist/cjs/gov-app.cjs.entry.js.map +1 -1
  11. package/dist/cjs/gov-attachments_3.cjs.entry.js +2 -2
  12. package/dist/cjs/gov-backdrop.cjs.entry.js +2 -2
  13. package/dist/cjs/gov-badge.cjs.entry.js +2 -2
  14. package/dist/cjs/gov-badge.cjs.entry.js.map +1 -1
  15. package/dist/cjs/gov-breadcrumbs.cjs.entry.js +2 -2
  16. package/dist/cjs/gov-button.cjs.entry.js +4 -4
  17. package/dist/cjs/gov-button.cjs.entry.js.map +1 -1
  18. package/dist/cjs/gov-card.cjs.entry.js +2 -2
  19. package/dist/cjs/gov-control-group.cjs.entry.js +42 -0
  20. package/dist/cjs/gov-control-group.cjs.entry.js.map +1 -0
  21. package/dist/cjs/gov-dropdown.cjs.entry.js +129 -0
  22. package/dist/cjs/gov-dropdown.cjs.entry.js.map +1 -0
  23. package/dist/cjs/gov-form-checkbox.cjs.entry.js +3 -3
  24. package/dist/cjs/gov-form-control.cjs.entry.js +35 -7
  25. package/dist/cjs/gov-form-control.cjs.entry.js.map +1 -1
  26. package/dist/cjs/gov-form-file.cjs.entry.js +4 -4
  27. package/dist/cjs/gov-form-file.cjs.entry.js.map +1 -1
  28. package/dist/cjs/gov-form-input.cjs.entry.js +6 -6
  29. package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
  30. package/dist/cjs/gov-form-label.cjs.entry.js +1 -1
  31. package/dist/cjs/gov-form-label.cjs.entry.js.map +1 -1
  32. package/dist/cjs/gov-form-multi-select.cjs.entry.js +4 -4
  33. package/dist/cjs/gov-form-multi-select.cjs.entry.js.map +1 -1
  34. package/dist/cjs/gov-form-radio.cjs.entry.js +3 -3
  35. package/dist/cjs/gov-form-search.cjs.entry.js +5 -1
  36. package/dist/cjs/gov-form-search.cjs.entry.js.map +1 -1
  37. package/dist/cjs/gov-form-select.cjs.entry.js +20 -10
  38. package/dist/cjs/gov-form-select.cjs.entry.js.map +1 -1
  39. package/dist/cjs/gov-form-switch.cjs.entry.js +3 -3
  40. package/dist/cjs/gov-icon.cjs.entry.js +2 -2
  41. package/dist/cjs/gov-modal.cjs.entry.js +2 -2
  42. package/dist/cjs/gov-nav.cjs.entry.js +2 -2
  43. package/dist/cjs/gov-pagination.cjs.entry.js +2 -2
  44. package/dist/cjs/gov-prompt.cjs.entry.js +2 -2
  45. package/dist/cjs/gov-side-nav.cjs.entry.js +2 -2
  46. package/dist/cjs/gov-skeleton.cjs.entry.js +2 -2
  47. package/dist/cjs/gov-tabs.cjs.entry.js +2 -2
  48. package/dist/cjs/gov-wizzard-item.cjs.entry.js +13 -15
  49. package/dist/cjs/gov-wizzard-item.cjs.entry.js.map +1 -1
  50. package/dist/cjs/gov-wizzard.cjs.entry.js +2 -2
  51. package/dist/cjs/index-29ac07f6.js +8 -0
  52. package/dist/cjs/loader.cjs.js +1 -1
  53. package/dist/cjs/{wcag-6efc0ab7.js → wcag-b0321f09.js} +2 -2
  54. package/dist/cjs/{wcag-6efc0ab7.js.map → wcag-b0321f09.js.map} +1 -1
  55. package/dist/cjs/{win-84bda0aa.js → win-53f637d4.js} +3 -2
  56. package/dist/cjs/win-53f637d4.js.map +1 -0
  57. package/dist/collection/collection-manifest.json +3 -1
  58. package/dist/collection/components/gov-accordion/gov-accordion-item.css +6 -0
  59. package/dist/collection/components/gov-accordion/gov-accordion.css +6 -0
  60. package/dist/collection/components/gov-alert/gov-alert.css +6 -0
  61. package/dist/collection/components/gov-alert/gov-alert.js.map +1 -1
  62. package/dist/collection/components/gov-app/gov-app.css +6 -0
  63. package/dist/collection/components/gov-app/gov-app.js +10 -8
  64. package/dist/collection/components/gov-app/gov-app.js.map +1 -1
  65. package/dist/collection/components/gov-attachments/gov-attachments-item.css +6 -0
  66. package/dist/collection/components/gov-attachments/gov-attachments.css +6 -0
  67. package/dist/collection/components/gov-backdrop/gov-backdrop.css +6 -0
  68. package/dist/collection/components/gov-badge/gov-badge.css +9 -3
  69. package/dist/collection/components/gov-badge/gov-badge.js +4 -4
  70. package/dist/collection/components/gov-badge/gov-badge.js.map +1 -1
  71. package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.css +6 -0
  72. package/dist/collection/components/gov-button/{constants.js → default/constants.js} +3 -3
  73. package/dist/collection/components/gov-button/default/constants.js.map +1 -0
  74. package/dist/collection/components/gov-button/{gov-button.css → default/gov-button.css} +6 -3
  75. package/dist/collection/components/gov-button/{gov-button.js → default/gov-button.js} +7 -7
  76. package/dist/collection/components/gov-button/default/gov-button.js.map +1 -0
  77. package/dist/collection/components/gov-button/default/gov-button.types.js.map +1 -0
  78. package/dist/collection/components/gov-button/dropdown/constants.js +10 -0
  79. package/dist/collection/components/gov-button/dropdown/constants.js.map +1 -0
  80. package/dist/collection/components/gov-button/dropdown/gov-dropdown.css +263 -0
  81. package/dist/collection/components/gov-button/dropdown/gov-dropdown.js +148 -0
  82. package/dist/collection/components/gov-button/dropdown/gov-dropdown.js.map +1 -0
  83. package/dist/collection/components/gov-button/dropdown/gov-dropdown.types.js +2 -0
  84. package/dist/collection/components/gov-button/dropdown/gov-dropdown.types.js.map +1 -0
  85. package/dist/collection/components/gov-card/gov-card.css +6 -0
  86. package/dist/collection/components/gov-container/gov-container.css +6 -0
  87. package/dist/collection/components/gov-control-group/constants.js +7 -0
  88. package/dist/collection/components/gov-control-group/constants.js.map +1 -0
  89. package/dist/collection/components/gov-control-group/gov-control-group.css +259 -0
  90. package/dist/collection/components/gov-control-group/gov-control-group.js +83 -0
  91. package/dist/collection/components/gov-control-group/gov-control-group.js.map +1 -0
  92. package/dist/collection/components/gov-cookiebar/gov-cookiebar.css +6 -0
  93. package/dist/collection/components/gov-empty/gov-empty.css +6 -0
  94. package/dist/collection/components/gov-error-code/gov-error-code.css +6 -0
  95. package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.css +6 -0
  96. package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.css +6 -0
  97. package/dist/collection/components/gov-form/control/gov-form-control.css +6 -0
  98. package/dist/collection/components/gov-form/control/gov-form-control.js +35 -10
  99. package/dist/collection/components/gov-form/control/gov-form-control.js.map +1 -1
  100. package/dist/collection/components/gov-form/file/gov-form-file.css +13 -0
  101. package/dist/collection/components/gov-form/group/gov-form-group.css +6 -0
  102. package/dist/collection/components/gov-form/input/constants.js +1 -1
  103. package/dist/collection/components/gov-form/input/constants.js.map +1 -1
  104. package/dist/collection/components/gov-form/input/gov-form-input.css +106 -50
  105. package/dist/collection/components/gov-form/input/gov-form-input.js +9 -9
  106. package/dist/collection/components/gov-form/input/gov-form-input.js.map +1 -1
  107. package/dist/collection/components/gov-form/label/gov-form-label.css +6 -0
  108. package/dist/collection/components/gov-form/label/gov-form-label.js +1 -1
  109. package/dist/collection/components/gov-form/label/gov-form-label.js.map +1 -1
  110. package/dist/collection/components/gov-form/message/gov-form-message.css +6 -0
  111. package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.css +106 -50
  112. package/dist/collection/components/gov-form/password-power/gov-form-password-power.css +6 -0
  113. package/dist/collection/components/gov-form/radio/gov-form-radio.css +6 -0
  114. package/dist/collection/components/gov-form/search/constants.js +3 -0
  115. package/dist/collection/components/gov-form/search/constants.js.map +1 -1
  116. package/dist/collection/components/gov-form/search/gov-form-search.css +12 -1
  117. package/dist/collection/components/gov-form/search/gov-form-search.js +30 -0
  118. package/dist/collection/components/gov-form/search/gov-form-search.js.map +1 -1
  119. package/dist/collection/components/gov-form/select/gov-form-select.css +106 -50
  120. package/dist/collection/components/gov-form/select/gov-form-select.js +17 -5
  121. package/dist/collection/components/gov-form/select/gov-form-select.js.map +1 -1
  122. package/dist/collection/components/gov-form/switch/gov-form-switch.css +6 -0
  123. package/dist/collection/components/gov-grid/gov-grid-item.css +6 -0
  124. package/dist/collection/components/gov-grid/gov-grid.css +6 -0
  125. package/dist/collection/components/gov-icon/gov-icon.css +6 -0
  126. package/dist/collection/components/gov-icon/list.js +10 -0
  127. package/dist/collection/components/gov-icon/list.js.map +1 -1
  128. package/dist/collection/components/gov-layout/gov-layout-column.css +6 -0
  129. package/dist/collection/components/gov-layout/gov-layout.css +6 -0
  130. package/dist/collection/components/gov-loading/loading/gov-loading.css +6 -0
  131. package/dist/collection/components/gov-loading/skeleton/gov-skeleton.css +6 -0
  132. package/dist/collection/components/gov-message/gov-message.css +6 -0
  133. package/dist/collection/components/gov-modal/gov-modal.css +6 -0
  134. package/dist/collection/components/gov-nav/gov-nav-item.css +6 -0
  135. package/dist/collection/components/gov-nav/gov-nav.css +6 -0
  136. package/dist/collection/components/gov-pagination/gov-pagination.css +6 -0
  137. package/dist/collection/components/gov-promp/gov-prompt.css +6 -0
  138. package/dist/collection/components/gov-side-nav/gov-side-nav-item.css +6 -0
  139. package/dist/collection/components/gov-side-nav/gov-side-nav.css +6 -0
  140. package/dist/collection/components/gov-spacer/gov-spacer.css +6 -0
  141. package/dist/collection/components/gov-statsbar/gov-statsbar-item.css +6 -0
  142. package/dist/collection/components/gov-statsbar/gov-statsbar.css +6 -0
  143. package/dist/collection/components/gov-stepper/gov-stepper-item.css +6 -0
  144. package/dist/collection/components/gov-stepper/gov-stepper.css +6 -0
  145. package/dist/collection/components/gov-tabs/gov-tabs-item.css +6 -0
  146. package/dist/collection/components/gov-tabs/gov-tabs.css +6 -0
  147. package/dist/collection/components/gov-tile/container/gov-tiles.css +6 -0
  148. package/dist/collection/components/gov-tile/gov-tile.css +6 -0
  149. package/dist/collection/components/gov-toast/gov-toast.css +6 -0
  150. package/dist/collection/components/gov-tooltip/gov-tooltip-content.css +6 -0
  151. package/dist/collection/components/gov-tooltip/gov-tooltip.css +6 -0
  152. package/dist/collection/components/gov-wizzard/gov-wizzard-item.css +6 -0
  153. package/dist/collection/components/gov-wizzard/gov-wizzard-item.js +29 -36
  154. package/dist/collection/components/gov-wizzard/gov-wizzard-item.js.map +1 -1
  155. package/dist/collection/components/gov-wizzard/gov-wizzard-item.types.js +2 -0
  156. package/dist/collection/components/gov-wizzard/gov-wizzard-item.types.js.map +1 -0
  157. package/dist/collection/components/gov-wizzard/gov-wizzard.css +6 -0
  158. package/dist/collection/helpers/Dom/win.js +2 -1
  159. package/dist/collection/helpers/Dom/win.js.map +1 -1
  160. package/dist/collection/pages/Alert.js +1 -1
  161. package/dist/collection/pages/Alert.js.map +1 -1
  162. package/dist/collection/pages/Button.js +65 -0
  163. package/dist/collection/pages/Button.js.map +1 -1
  164. package/dist/collection/pages/ControlGroup.js +206 -0
  165. package/dist/collection/pages/ControlGroup.js.map +1 -0
  166. package/dist/collection/pages/Forms.js +369 -206
  167. package/dist/collection/pages/Forms.js.map +1 -1
  168. package/dist/collection/pages/Tooltip.js +24 -0
  169. package/dist/collection/pages/Tooltip.js.map +1 -1
  170. package/dist/components/constants3.js +1 -1
  171. package/dist/components/constants3.js.map +1 -1
  172. package/dist/components/form.js +8 -8
  173. package/dist/components/form.js.map +1 -1
  174. package/dist/components/gov-accordion-item.js +1 -0
  175. package/dist/components/gov-accordion-item.js.map +1 -1
  176. package/dist/components/gov-accordion.js +1 -0
  177. package/dist/components/gov-accordion.js.map +1 -1
  178. package/dist/components/gov-alert.js +1 -0
  179. package/dist/components/gov-alert.js.map +1 -1
  180. package/dist/components/gov-app.js +1123 -663
  181. package/dist/components/gov-app.js.map +1 -1
  182. package/dist/components/gov-attachments-item2.js +1 -0
  183. package/dist/components/gov-attachments-item2.js.map +1 -1
  184. package/dist/components/gov-attachments2.js +1 -0
  185. package/dist/components/gov-attachments2.js.map +1 -1
  186. package/dist/components/gov-backdrop2.js +1 -0
  187. package/dist/components/gov-backdrop2.js.map +1 -1
  188. package/dist/components/gov-badge2.js +3 -2
  189. package/dist/components/gov-badge2.js.map +1 -1
  190. package/dist/components/gov-breadcrumbs.js +1 -0
  191. package/dist/components/gov-breadcrumbs.js.map +1 -1
  192. package/dist/components/gov-button2.js +3 -2
  193. package/dist/components/gov-button2.js.map +1 -1
  194. package/dist/components/gov-card.js +1 -0
  195. package/dist/components/gov-card.js.map +1 -1
  196. package/dist/components/gov-container.js +1 -0
  197. package/dist/components/gov-container.js.map +1 -1
  198. package/dist/components/gov-control-group.d.ts +11 -0
  199. package/dist/components/gov-control-group.js +58 -0
  200. package/dist/components/gov-control-group.js.map +1 -0
  201. package/dist/components/gov-cookiebar.js +1 -0
  202. package/dist/components/gov-cookiebar.js.map +1 -1
  203. package/dist/components/gov-dropdown.d.ts +11 -0
  204. package/dist/components/gov-dropdown.js +144 -0
  205. package/dist/components/gov-dropdown.js.map +1 -0
  206. package/dist/components/gov-empty.js +1 -0
  207. package/dist/components/gov-empty.js.map +1 -1
  208. package/dist/components/gov-error-code.js +1 -0
  209. package/dist/components/gov-error-code.js.map +1 -1
  210. package/dist/components/gov-form-autocomplete2.js +1 -0
  211. package/dist/components/gov-form-autocomplete2.js.map +1 -1
  212. package/dist/components/gov-form-checkbox.js +1 -0
  213. package/dist/components/gov-form-checkbox.js.map +1 -1
  214. package/dist/components/gov-form-control.js +36 -7
  215. package/dist/components/gov-form-control.js.map +1 -1
  216. package/dist/components/gov-form-file.js +2 -1
  217. package/dist/components/gov-form-file.js.map +1 -1
  218. package/dist/components/gov-form-group.js +1 -0
  219. package/dist/components/gov-form-group.js.map +1 -1
  220. package/dist/components/gov-form-input2.js +6 -5
  221. package/dist/components/gov-form-input2.js.map +1 -1
  222. package/dist/components/gov-form-label.js +2 -1
  223. package/dist/components/gov-form-label.js.map +1 -1
  224. package/dist/components/gov-form-message2.js +1 -0
  225. package/dist/components/gov-form-message2.js.map +1 -1
  226. package/dist/components/gov-form-multi-select.js +2 -1
  227. package/dist/components/gov-form-multi-select.js.map +1 -1
  228. package/dist/components/gov-form-password-power.js +1 -0
  229. package/dist/components/gov-form-password-power.js.map +1 -1
  230. package/dist/components/gov-form-radio.js +1 -0
  231. package/dist/components/gov-form-radio.js.map +1 -1
  232. package/dist/components/gov-form-search.js +9 -2
  233. package/dist/components/gov-form-search.js.map +1 -1
  234. package/dist/components/gov-form-select2.js +18 -7
  235. package/dist/components/gov-form-select2.js.map +1 -1
  236. package/dist/components/gov-form-switch.js +1 -0
  237. package/dist/components/gov-form-switch.js.map +1 -1
  238. package/dist/components/gov-grid-item.js +1 -0
  239. package/dist/components/gov-grid-item.js.map +1 -1
  240. package/dist/components/gov-grid.js +1 -0
  241. package/dist/components/gov-grid.js.map +1 -1
  242. package/dist/components/gov-icon2.js +2 -1
  243. package/dist/components/gov-icon2.js.map +1 -1
  244. package/dist/components/gov-layout-column.js +1 -0
  245. package/dist/components/gov-layout-column.js.map +1 -1
  246. package/dist/components/gov-layout.js +1 -0
  247. package/dist/components/gov-layout.js.map +1 -1
  248. package/dist/components/gov-loading.js +1 -0
  249. package/dist/components/gov-loading.js.map +1 -1
  250. package/dist/components/gov-message.js +1 -0
  251. package/dist/components/gov-message.js.map +1 -1
  252. package/dist/components/gov-modal.js +1 -0
  253. package/dist/components/gov-modal.js.map +1 -1
  254. package/dist/components/gov-nav-item.js +1 -0
  255. package/dist/components/gov-nav-item.js.map +1 -1
  256. package/dist/components/gov-nav.js +1 -0
  257. package/dist/components/gov-nav.js.map +1 -1
  258. package/dist/components/gov-pagination.js +1 -0
  259. package/dist/components/gov-pagination.js.map +1 -1
  260. package/dist/components/gov-prompt.js +1 -0
  261. package/dist/components/gov-prompt.js.map +1 -1
  262. package/dist/components/gov-side-nav-item.js +1 -0
  263. package/dist/components/gov-side-nav-item.js.map +1 -1
  264. package/dist/components/gov-side-nav.js +1 -0
  265. package/dist/components/gov-side-nav.js.map +1 -1
  266. package/dist/components/gov-skeleton.js +1 -0
  267. package/dist/components/gov-skeleton.js.map +1 -1
  268. package/dist/components/gov-spacer.js +1 -0
  269. package/dist/components/gov-spacer.js.map +1 -1
  270. package/dist/components/gov-statsbar-item.js +1 -0
  271. package/dist/components/gov-statsbar-item.js.map +1 -1
  272. package/dist/components/gov-statsbar.js +1 -0
  273. package/dist/components/gov-statsbar.js.map +1 -1
  274. package/dist/components/gov-stepper-item.js +1 -0
  275. package/dist/components/gov-stepper-item.js.map +1 -1
  276. package/dist/components/gov-stepper.js +1 -0
  277. package/dist/components/gov-stepper.js.map +1 -1
  278. package/dist/components/gov-tabs-item.js +1 -0
  279. package/dist/components/gov-tabs-item.js.map +1 -1
  280. package/dist/components/gov-tabs.js +1 -0
  281. package/dist/components/gov-tabs.js.map +1 -1
  282. package/dist/components/gov-tile.js +1 -0
  283. package/dist/components/gov-tile.js.map +1 -1
  284. package/dist/components/gov-tiles.js +1 -0
  285. package/dist/components/gov-tiles.js.map +1 -1
  286. package/dist/components/gov-toast.js +1 -0
  287. package/dist/components/gov-toast.js.map +1 -1
  288. package/dist/components/gov-tooltip-content.js +1 -0
  289. package/dist/components/gov-tooltip-content.js.map +1 -1
  290. package/dist/components/gov-tooltip.js +1 -0
  291. package/dist/components/gov-tooltip.js.map +1 -1
  292. package/dist/components/gov-wizzard-item.js +15 -17
  293. package/dist/components/gov-wizzard-item.js.map +1 -1
  294. package/dist/components/gov-wizzard.js +1 -0
  295. package/dist/components/gov-wizzard.js.map +1 -1
  296. package/dist/components/index.d.ts +3 -1
  297. package/dist/components/index.js +2 -0
  298. package/dist/components/index.js.map +1 -1
  299. package/dist/components/win.js +2 -1
  300. package/dist/components/win.js.map +1 -1
  301. package/dist/core/core.esm.js +1 -1
  302. package/dist/core/core.esm.js.map +1 -1
  303. package/dist/core/p-00c4dc0d.entry.js +2 -0
  304. package/dist/core/p-00c4dc0d.entry.js.map +1 -0
  305. package/dist/core/{p-6044a1e7.entry.js → p-02fb27e8.entry.js} +2 -2
  306. package/dist/core/p-0574a26a.entry.js +2 -0
  307. package/dist/core/{p-a423b62a.entry.js.map → p-0574a26a.entry.js.map} +1 -1
  308. package/dist/core/{p-a9c57f72.entry.js → p-070f9684.entry.js} +2 -2
  309. package/dist/core/p-0f5e2b0a.js +2 -0
  310. package/dist/core/{p-d14130ac.entry.js → p-14a475a8.entry.js} +2 -2
  311. package/dist/core/p-1c4ad772.entry.js +2 -0
  312. package/dist/core/p-1c4ad772.entry.js.map +1 -0
  313. package/dist/core/{p-3e1a1bd4.entry.js → p-22222994.entry.js} +2 -2
  314. package/dist/core/{p-54b17f4d.entry.js → p-2e2be66b.entry.js} +2 -2
  315. package/dist/core/p-2e94d2d3.entry.js +2 -0
  316. package/dist/core/p-2e94d2d3.entry.js.map +1 -0
  317. package/dist/core/p-2f0f56fc.entry.js +2 -0
  318. package/dist/core/p-2f0f56fc.entry.js.map +1 -0
  319. package/dist/core/p-304f2d62.entry.js +2 -0
  320. package/dist/core/p-304f2d62.entry.js.map +1 -0
  321. package/dist/core/p-34152b51.js +2 -0
  322. package/dist/core/p-34152b51.js.map +1 -0
  323. package/dist/core/p-34ed07f6.js +2 -0
  324. package/dist/core/p-34ed07f6.js.map +1 -0
  325. package/dist/core/{p-005bfb42.entry.js → p-3d7ea15c.entry.js} +2 -2
  326. package/dist/core/{p-cd869237.js → p-3dbf7f49.js} +2 -2
  327. package/dist/core/p-3dbf7f49.js.map +1 -0
  328. package/dist/core/{p-5e865538.entry.js → p-4c6d7b65.entry.js} +2 -2
  329. package/dist/core/{p-d37f03e0.entry.js → p-529363af.entry.js} +2 -2
  330. package/dist/core/p-58047fab.entry.js +2 -0
  331. package/dist/core/p-58047fab.entry.js.map +1 -0
  332. package/dist/core/p-60ff8457.entry.js +2 -0
  333. package/dist/core/{p-acfd00a2.entry.js.map → p-60ff8457.entry.js.map} +1 -1
  334. package/dist/core/{p-fe1ee53b.entry.js → p-63ef7826.entry.js} +2 -2
  335. package/dist/core/p-63ef7826.entry.js.map +1 -0
  336. package/dist/core/{p-42db4603.entry.js → p-65aa3b0c.entry.js} +2 -2
  337. package/dist/core/{p-75a4c838.entry.js → p-683fc65e.entry.js} +2 -2
  338. package/dist/core/{p-75a4c838.entry.js.map → p-683fc65e.entry.js.map} +1 -1
  339. package/dist/core/{p-5a2a9cde.entry.js → p-70a7e7f6.entry.js} +2 -2
  340. package/dist/core/{p-1025c6ac.entry.js → p-78f8ffb0.entry.js} +2 -2
  341. package/dist/core/{p-3da88ddb.entry.js → p-7cde4bc8.entry.js} +2 -2
  342. package/dist/core/{p-d1275fa8.entry.js → p-90330543.entry.js} +2 -2
  343. package/dist/core/p-90330543.entry.js.map +1 -0
  344. package/dist/core/{p-d9b4bc20.entry.js → p-9fbee429.entry.js} +2 -2
  345. package/dist/core/p-9fbee429.entry.js.map +1 -0
  346. package/dist/core/p-bfc5e0f7.entry.js +2 -0
  347. package/dist/core/p-bfc5e0f7.entry.js.map +1 -0
  348. package/dist/core/p-cdd12494.entry.js +2 -0
  349. package/dist/core/p-cdd12494.entry.js.map +1 -0
  350. package/dist/core/{p-41f07da7.entry.js → p-ce59c2ee.entry.js} +2 -2
  351. package/dist/core/{p-207ba616.entry.js → p-d9e28400.entry.js} +2 -2
  352. package/dist/core/{p-f7275b59.entry.js → p-ec63daab.entry.js} +2 -2
  353. package/dist/core/{p-c289af04.entry.js → p-ed1e9d01.entry.js} +2 -2
  354. package/dist/core/p-f5d42069.entry.js +2 -0
  355. package/dist/core/p-f5d42069.entry.js.map +1 -0
  356. package/dist/custom-elements/index.d.ts +12 -0
  357. package/dist/custom-elements/index.js +1 -1
  358. package/dist/custom-elements/index.js.map +1 -1
  359. package/dist/esm/{constants-45f6db4c.js → constants-5708696f.js} +2 -2
  360. package/dist/esm/constants-5708696f.js.map +1 -0
  361. package/dist/esm/core.js +1 -1
  362. package/dist/esm/{form-613741a5.js → form-2d9f68d9.js} +2 -2
  363. package/dist/esm/form-2d9f68d9.js.map +1 -0
  364. package/dist/esm/gov-accordion.entry.js +2 -2
  365. package/dist/esm/gov-alert.entry.js +2 -2
  366. package/dist/esm/gov-alert.entry.js.map +1 -1
  367. package/dist/esm/gov-app.entry.js +1122 -663
  368. package/dist/esm/gov-app.entry.js.map +1 -1
  369. package/dist/esm/gov-attachments_3.entry.js +2 -2
  370. package/dist/esm/gov-backdrop.entry.js +2 -2
  371. package/dist/esm/gov-badge.entry.js +2 -2
  372. package/dist/esm/gov-badge.entry.js.map +1 -1
  373. package/dist/esm/gov-breadcrumbs.entry.js +2 -2
  374. package/dist/esm/gov-button.entry.js +4 -4
  375. package/dist/esm/gov-button.entry.js.map +1 -1
  376. package/dist/esm/gov-card.entry.js +2 -2
  377. package/dist/esm/gov-control-group.entry.js +38 -0
  378. package/dist/esm/gov-control-group.entry.js.map +1 -0
  379. package/dist/esm/gov-dropdown.entry.js +125 -0
  380. package/dist/esm/gov-dropdown.entry.js.map +1 -0
  381. package/dist/esm/gov-form-checkbox.entry.js +3 -3
  382. package/dist/esm/gov-form-control.entry.js +35 -7
  383. package/dist/esm/gov-form-control.entry.js.map +1 -1
  384. package/dist/esm/gov-form-file.entry.js +4 -4
  385. package/dist/esm/gov-form-file.entry.js.map +1 -1
  386. package/dist/esm/gov-form-input.entry.js +6 -6
  387. package/dist/esm/gov-form-input.entry.js.map +1 -1
  388. package/dist/esm/gov-form-label.entry.js +1 -1
  389. package/dist/esm/gov-form-label.entry.js.map +1 -1
  390. package/dist/esm/gov-form-multi-select.entry.js +4 -4
  391. package/dist/esm/gov-form-multi-select.entry.js.map +1 -1
  392. package/dist/esm/gov-form-radio.entry.js +3 -3
  393. package/dist/esm/gov-form-search.entry.js +5 -1
  394. package/dist/esm/gov-form-search.entry.js.map +1 -1
  395. package/dist/esm/gov-form-select.entry.js +20 -10
  396. package/dist/esm/gov-form-select.entry.js.map +1 -1
  397. package/dist/esm/gov-form-switch.entry.js +3 -3
  398. package/dist/esm/gov-icon.entry.js +2 -2
  399. package/dist/esm/gov-modal.entry.js +2 -2
  400. package/dist/esm/gov-nav.entry.js +2 -2
  401. package/dist/esm/gov-pagination.entry.js +2 -2
  402. package/dist/esm/gov-prompt.entry.js +2 -2
  403. package/dist/esm/gov-side-nav.entry.js +2 -2
  404. package/dist/esm/gov-skeleton.entry.js +2 -2
  405. package/dist/esm/gov-tabs.entry.js +2 -2
  406. package/dist/esm/gov-wizzard-item.entry.js +13 -15
  407. package/dist/esm/gov-wizzard-item.entry.js.map +1 -1
  408. package/dist/esm/gov-wizzard.entry.js +2 -2
  409. package/dist/esm/index-b010bfb4.js +8 -0
  410. package/dist/esm/loader.js +1 -1
  411. package/dist/esm/{wcag-d588d144.js → wcag-afdfdddb.js} +2 -2
  412. package/dist/esm/{wcag-d588d144.js.map → wcag-afdfdddb.js.map} +1 -1
  413. package/dist/esm/{win-9c8460bb.js → win-7a1a8ac8.js} +3 -2
  414. package/dist/esm/win-7a1a8ac8.js.map +1 -0
  415. package/dist/hydrate/index.js +1316 -650
  416. package/dist/types/components/gov-alert/gov-alert.d.ts +1 -1
  417. package/dist/types/components/gov-app/gov-app.d.ts +9 -8
  418. package/dist/types/components/gov-badge/gov-badge.d.ts +1 -1
  419. package/dist/types/components/gov-button/{constants.d.ts → default/constants.d.ts} +3 -3
  420. package/dist/types/components/gov-button/{gov-button.d.ts → default/gov-button.d.ts} +1 -1
  421. package/dist/types/components/gov-button/{gov-button.types.d.ts → default/gov-button.types.d.ts} +1 -1
  422. package/dist/types/components/gov-button/dropdown/constants.d.ts +10 -0
  423. package/dist/types/components/gov-button/dropdown/gov-dropdown.d.ts +30 -0
  424. package/dist/types/components/gov-button/dropdown/gov-dropdown.types.d.ts +4 -0
  425. package/dist/types/components/gov-control-group/constants.d.ts +7 -0
  426. package/dist/types/components/gov-control-group/gov-control-group.d.ts +16 -0
  427. package/dist/types/components/gov-form/control/gov-form-control.d.ts +2 -1
  428. package/dist/types/components/gov-form/input/constants.d.ts +1 -1
  429. package/dist/types/components/gov-form/input/gov-form-input.d.ts +1 -2
  430. package/dist/types/components/gov-form/search/constants.d.ts +4 -0
  431. package/dist/types/components/gov-form/search/gov-form-search.d.ts +5 -0
  432. package/dist/types/components/gov-form/select/gov-form-select.d.ts +2 -0
  433. package/dist/types/components/gov-wizzard/gov-wizzard-item.d.ts +7 -8
  434. package/dist/types/components/gov-wizzard/gov-wizzard-item.types.d.ts +4 -0
  435. package/dist/types/components.d.ts +90 -7
  436. package/dist/types/helpers/Dom/win.d.ts +1 -0
  437. package/dist/types/pages/ControlGroup.d.ts +3 -0
  438. package/package.json +1 -1
  439. package/dist/cjs/constants-245999e7.js.map +0 -1
  440. package/dist/cjs/form-62c6a8c6.js.map +0 -1
  441. package/dist/cjs/win-84bda0aa.js.map +0 -1
  442. package/dist/collection/components/gov-button/constants.js.map +0 -1
  443. package/dist/collection/components/gov-button/gov-button.js.map +0 -1
  444. package/dist/collection/components/gov-button/gov-button.types.js.map +0 -1
  445. package/dist/core/p-0a300d3e.entry.js +0 -2
  446. package/dist/core/p-0a300d3e.entry.js.map +0 -1
  447. package/dist/core/p-35aadeeb.entry.js +0 -2
  448. package/dist/core/p-35aadeeb.entry.js.map +0 -1
  449. package/dist/core/p-670b4f93.js +0 -2
  450. package/dist/core/p-67982c3a.entry.js +0 -2
  451. package/dist/core/p-67982c3a.entry.js.map +0 -1
  452. package/dist/core/p-7e524b49.js +0 -2
  453. package/dist/core/p-7e524b49.js.map +0 -1
  454. package/dist/core/p-a423b62a.entry.js +0 -2
  455. package/dist/core/p-a825183a.entry.js +0 -2
  456. package/dist/core/p-a825183a.entry.js.map +0 -1
  457. package/dist/core/p-acfd00a2.entry.js +0 -2
  458. package/dist/core/p-bbc765ca.entry.js +0 -2
  459. package/dist/core/p-bbc765ca.entry.js.map +0 -1
  460. package/dist/core/p-c20102ff.js +0 -2
  461. package/dist/core/p-c20102ff.js.map +0 -1
  462. package/dist/core/p-cd869237.js.map +0 -1
  463. package/dist/core/p-d1275fa8.entry.js.map +0 -1
  464. package/dist/core/p-d9b4bc20.entry.js.map +0 -1
  465. package/dist/core/p-e4bb6114.entry.js +0 -2
  466. package/dist/core/p-e4bb6114.entry.js.map +0 -1
  467. package/dist/core/p-e6904513.entry.js +0 -2
  468. package/dist/core/p-e6904513.entry.js.map +0 -1
  469. package/dist/core/p-fe1ee53b.entry.js.map +0 -1
  470. package/dist/esm/constants-45f6db4c.js.map +0 -1
  471. package/dist/esm/form-613741a5.js.map +0 -1
  472. package/dist/esm/win-9c8460bb.js.map +0 -1
  473. /package/dist/collection/components/gov-button/{gov-button.types.js → default/gov-button.types.js} +0 -0
  474. /package/dist/core/{p-6044a1e7.entry.js.map → p-02fb27e8.entry.js.map} +0 -0
  475. /package/dist/core/{p-a9c57f72.entry.js.map → p-070f9684.entry.js.map} +0 -0
  476. /package/dist/core/{p-670b4f93.js.map → p-0f5e2b0a.js.map} +0 -0
  477. /package/dist/core/{p-d14130ac.entry.js.map → p-14a475a8.entry.js.map} +0 -0
  478. /package/dist/core/{p-3e1a1bd4.entry.js.map → p-22222994.entry.js.map} +0 -0
  479. /package/dist/core/{p-54b17f4d.entry.js.map → p-2e2be66b.entry.js.map} +0 -0
  480. /package/dist/core/{p-005bfb42.entry.js.map → p-3d7ea15c.entry.js.map} +0 -0
  481. /package/dist/core/{p-5e865538.entry.js.map → p-4c6d7b65.entry.js.map} +0 -0
  482. /package/dist/core/{p-d37f03e0.entry.js.map → p-529363af.entry.js.map} +0 -0
  483. /package/dist/core/{p-42db4603.entry.js.map → p-65aa3b0c.entry.js.map} +0 -0
  484. /package/dist/core/{p-5a2a9cde.entry.js.map → p-70a7e7f6.entry.js.map} +0 -0
  485. /package/dist/core/{p-1025c6ac.entry.js.map → p-78f8ffb0.entry.js.map} +0 -0
  486. /package/dist/core/{p-3da88ddb.entry.js.map → p-7cde4bc8.entry.js.map} +0 -0
  487. /package/dist/core/{p-41f07da7.entry.js.map → p-ce59c2ee.entry.js.map} +0 -0
  488. /package/dist/core/{p-207ba616.entry.js.map → p-d9e28400.entry.js.map} +0 -0
  489. /package/dist/core/{p-f7275b59.entry.js.map → p-ec63daab.entry.js.map} +0 -0
  490. /package/dist/core/{p-c289af04.entry.js.map → p-ed1e9d01.entry.js.map} +0 -0
package/dist/cjs/gov-app.cjs.entry.js CHANGED
@@ -2895,15 +2895,6 @@ usageStatistics();
2895
2895
 
2896
2896
  Router.NavigationTrigger = {POPSTATE, CLICK};
2897
2897
 
2898
- class HomePage extends HTMLElement {
2899
- connectedCallback() {
2900
- this.innerHTML = ``;
2901
- }
2902
- }
2903
- if (customElements.get('home-page') === undefined) {
2904
- customElements.define('home-page', HomePage);
2905
- }
2906
-
2907
2898
  class AccordionPage extends HTMLElement {
2908
2899
  connectedCallback() {
2909
2900
  this.innerHTML = `
@@ -3276,7 +3267,7 @@ class AlertPage extends HTMLElement {
3276
3267
  connectedCallback() {
3277
3268
  this.innerHTML = `
3278
3269
  <h2>Alert</h2>
3279
-
3270
+
3280
3271
  <gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
3281
3272
  <gov-icon name="info" slot="icon"></gov-icon>
3282
3273
  <p>
@@ -3737,11 +3728,112 @@ if (customElements.get('badge-page') === undefined) {
3737
3728
  customElements.define('badge-page', BadgePage);
3738
3729
  }
3739
3730
 
3731
+ class BreadcrumbsPage extends HTMLElement {
3732
+ connectedCallback() {
3733
+ this.innerHTML = `
3734
+ <h2>Breadcrumbs</h2>
3735
+
3736
+ <gov-breadcrumbs wcag-label="Drobečková navigace pro stránku Czech POINT">
3737
+ <ul>
3738
+ <li>
3739
+ <button>
3740
+ Domů
3741
+ </button>
3742
+ </li>
3743
+ <li>
3744
+ <gov-icon name="chevron-right"></gov-icon>
3745
+ <a href="#">Kam dál</a>
3746
+ </li>
3747
+ <li>
3748
+ <gov-icon name="chevron-right"></gov-icon>
3749
+ <a href="#">
3750
+ Český eGovernment
3751
+ </a>
3752
+ </li>
3753
+ <li>
3754
+ <gov-icon name="chevron-right"></gov-icon>
3755
+ <strong>Czech POINT</strong>
3756
+ </li>
3757
+ </ul>
3758
+ </gov-breadcrumbs>
3759
+
3760
+ `;
3761
+ }
3762
+ }
3763
+ if (customElements.get("breadcrumbs-page") === undefined) {
3764
+ customElements.define("breadcrumbs-page", BreadcrumbsPage);
3765
+ }
3766
+
3740
3767
  class ButtonPage extends HTMLElement {
3741
3768
  connectedCallback() {
3742
3769
  this.innerHTML = `
3743
3770
  <h1>Buttons</h1>
3771
+
3772
+ <h4>Dropdown</h4>
3773
+
3774
+ <gov-layout>
3775
+ <gov-layout-column>
3776
+ <div class="container-view">
3777
+ <gov-dropdown>
3778
+ <gov-button variant="primary" size="s">
3779
+ Více
3780
+ </gov-button>
3781
+ <ul slot="list">
3782
+ <li>
3783
+ <gov-button variant="primary" type="base" size="s">
3784
+ A další nabídka
3785
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3786
+ </gov-button>
3787
+ </li>
3788
+ <li>
3789
+ <gov-button variant="primary" type="base" size="s">
3790
+ A další dlouhá nabídka
3791
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3792
+ </gov-button>
3793
+ </li>
3794
+ <li>
3795
+ <gov-button variant="primary" type="base" size="s">
3796
+ A další
3797
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3798
+ </gov-button>
3799
+ </li>
3800
+ </ul>
3801
+ </gov-dropdown>
3802
+ </div>
3803
+ </gov-layout-column>
3804
+ <gov-layout-column>
3805
+ <div class="container-view">
3806
+ <gov-dropdown position="right">
3807
+ <gov-button variant="primary" size="s">
3808
+ Více
3809
+ </gov-button>
3810
+ <ul slot="list">
3811
+ <li>
3812
+ <gov-button variant="secondary" type="base" size="s">
3813
+ A další nabídka
3814
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3815
+ </gov-button>
3816
+ </li>
3817
+ <li>
3818
+ <gov-button variant="secondary" type="base" size="s">
3819
+ A další dlouhá nabídka
3820
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3821
+ </gov-button>
3822
+ </li>
3823
+ <li>
3824
+ <gov-button variant="secondary" type="base" size="s">
3825
+ A další
3826
+ <gov-icon slot="right-icon" name="info"></gov-icon>
3827
+ </gov-button>
3828
+ </li>
3829
+ </ul>
3830
+ </gov-dropdown>
3831
+ </div>
3832
+ </gov-layout-column>
3833
+ </gov-layout>
3834
+
3744
3835
  <h4>Buttons - primary (default)</h4>
3836
+
3745
3837
  <div class="container-view">
3746
3838
  <gov-button variant="primary" size="s" href="http://localhost:3333/button">
3747
3839
  <gov-icon slot="left-icon" name="info"></gov-icon>
@@ -5014,42 +5106,6 @@ if (customElements.get('button-page') === undefined) {
5014
5106
  customElements.define('button-page', ButtonPage);
5015
5107
  }
5016
5108
 
5017
- class BreadcrumbsPage extends HTMLElement {
5018
- connectedCallback() {
5019
- this.innerHTML = `
5020
- <h2>Breadcrumbs</h2>
5021
-
5022
- <gov-breadcrumbs wcag-label="Drobečková navigace pro stránku Czech POINT">
5023
- <ul>
5024
- <li>
5025
- <button>
5026
- Domů
5027
- </button>
5028
- </li>
5029
- <li>
5030
- <gov-icon name="chevron-right"></gov-icon>
5031
- <a href="#">Kam dál</a>
5032
- </li>
5033
- <li>
5034
- <gov-icon name="chevron-right"></gov-icon>
5035
- <a href="#">
5036
- Český eGovernment
5037
- </a>
5038
- </li>
5039
- <li>
5040
- <gov-icon name="chevron-right"></gov-icon>
5041
- <strong>Czech POINT</strong>
5042
- </li>
5043
- </ul>
5044
- </gov-breadcrumbs>
5045
-
5046
- `;
5047
- }
5048
- }
5049
- if (customElements.get("breadcrumbs-page") === undefined) {
5050
- customElements.define("breadcrumbs-page", BreadcrumbsPage);
5051
- }
5052
-
5053
5109
  class CardPage extends HTMLElement {
5054
5110
  connectedCallback() {
5055
5111
  this.innerHTML = `
@@ -5152,6 +5208,227 @@ if (customElements.get('card-page') === undefined) {
5152
5208
  customElements.define('card-page', CardPage);
5153
5209
  }
5154
5210
 
5211
+ class ContainerPage extends HTMLElement {
5212
+ connectedCallback() {
5213
+ this.innerHTML = `
5214
+ <h2>Container</h2>
5215
+
5216
+ <gov-container>
5217
+ <p>Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
5218
+ </gov-container>
5219
+ `;
5220
+ }
5221
+ }
5222
+ if (customElements.get('container-page') === undefined) {
5223
+ customElements.define('container-page', ContainerPage);
5224
+ }
5225
+
5226
+ class ControlGroupPage extends HTMLElement {
5227
+ connectedCallback() {
5228
+ this.innerHTML = `
5229
+ <h2>Control Group</h2>
5230
+
5231
+ <gov-control-group>
5232
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
5233
+ <gov-button variant="primary" type="outlined" size="s">
5234
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5235
+ </gov-button>
5236
+ <gov-button variant="primary" type="outlined" size="s">
5237
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5238
+ </gov-button>
5239
+ <gov-button variant="primary" type="outlined" size="s">
5240
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5241
+ </gov-button>
5242
+ <gov-dropdown position="right">
5243
+ <gov-button variant="primary" size="s">
5244
+ Více
5245
+ </gov-button>
5246
+ <ul slot="list">
5247
+ <li>
5248
+ <gov-button variant="primary" type="base" size="s">
5249
+ A další nabídka
5250
+ </gov-button>
5251
+ </li>
5252
+ <li>
5253
+ <gov-button variant="primary" type="base" size="s">
5254
+ A další nabídka
5255
+ </gov-button>
5256
+ </li>
5257
+ <li>
5258
+ <gov-button variant="primary" type="base" size="s">
5259
+ A další nabídka
5260
+ </gov-button>
5261
+ </li>
5262
+ </ul>
5263
+ </gov-dropdown>
5264
+ </gov-control-group>
5265
+ <br />
5266
+ <gov-control-group variant="primary">
5267
+ <gov-form-select name="test-me" size="m">
5268
+ <option value="" selected>Placeholder</option>
5269
+ <option value="b">Value B</option>
5270
+ <option value="c">Value C</option>
5271
+ <option value="d">Value D</option>
5272
+ </gov-form-select>
5273
+ <gov-button variant="primary" type="solid" size="m">
5274
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5275
+ </gov-button>
5276
+ </gov-control-group>
5277
+ <br />
5278
+ <gov-control-group>
5279
+ <gov-button variant="primary" type="outlined" size="l">
5280
+ <gov-icon slot="left-icon" name="gear"></gov-icon>
5281
+ </gov-button>
5282
+ <gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
5283
+ <gov-button variant="primary" type="outlined" size="l" tabindex="-1">
5284
+ Nahrát soubor ze zařízení
5285
+ </gov-button>
5286
+ </gov-form-file>
5287
+ <gov-button variant="primary" type="outlined" size="l">
5288
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5289
+ </gov-button>
5290
+ </gov-control-group>
5291
+ <br />
5292
+ <gov-control-group variant="primary" no-border>
5293
+ <gov-button variant="primary" type="outlined" size="xl">
5294
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5295
+ </gov-button>
5296
+ <gov-button variant="primary" type="outlined" size="xl">
5297
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5298
+ </gov-button>
5299
+ <gov-form-select name="test-me" size="xl">
5300
+ <option value="" selected>Placeholder</option>
5301
+ <option value="b">Value B</option>
5302
+ <option value="c">Value C</option>
5303
+ <option value="d">Value D</option>
5304
+ </gov-form-select>
5305
+ <gov-button variant="primary" type="outlined" size="xl">
5306
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5307
+ </gov-button>
5308
+ </gov-control-group>
5309
+ <br><br>
5310
+
5311
+ <gov-control-group variant="secondary" no-border>
5312
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
5313
+ <gov-button variant="primary" type="outlined" size="s">
5314
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5315
+ </gov-button>
5316
+ <gov-button variant="primary" type="outlined" size="s">
5317
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5318
+ </gov-button>
5319
+ <gov-button variant="primary" type="outlined" size="s">
5320
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5321
+ </gov-button>
5322
+ </gov-control-group>
5323
+ <br />
5324
+ <gov-control-group variant="secondary">
5325
+ <gov-form-select name="test-me" size="m">
5326
+ <option value="" selected>Placeholder</option>
5327
+ <option value="b">Value B</option>
5328
+ <option value="c">Value C</option>
5329
+ <option value="d">Value D</option>
5330
+ </gov-form-select>
5331
+ <gov-button variant="primary" type="outlined" size="m">
5332
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5333
+ </gov-button>
5334
+ </gov-control-group>
5335
+ <br />
5336
+ <gov-control-group variant="secondary">
5337
+ <gov-button variant="primary" type="outlined" size="l">
5338
+ <gov-icon slot="left-icon" name="gear"></gov-icon>
5339
+ </gov-button>
5340
+ <gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
5341
+ <gov-button variant="primary" type="outlined" size="l" tabindex="-1">
5342
+ Nahrát soubor ze zařízení
5343
+ </gov-button>
5344
+ </gov-form-file>
5345
+ <gov-button variant="primary" type="outlined" size="l">
5346
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5347
+ </gov-button>
5348
+ </gov-control-group>
5349
+ <br />
5350
+ <gov-control-group variant="secondary">
5351
+ <gov-button variant="primary" type="outlined" size="xl">
5352
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5353
+ </gov-button>
5354
+ <gov-button variant="primary" type="outlined" size="xl">
5355
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5356
+ </gov-button>
5357
+ <gov-form-select name="test-me" variant="primary" size="xl">
5358
+ <option value="" selected>Placeholder</option>
5359
+ <option value="b">Value B</option>
5360
+ <option value="c">Value C</option>
5361
+ <option value="d">Value D</option>
5362
+ </gov-form-select>
5363
+ <gov-button variant="primary" type="outlined" size="xl">
5364
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5365
+ </gov-button>
5366
+ </gov-control-group>
5367
+ <br><br>
5368
+
5369
+ <gov-control-group variant="secondary">
5370
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
5371
+ <gov-button variant="secondary" type="outlined" size="s">
5372
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5373
+ </gov-button>
5374
+ <gov-button variant="secondary" type="outlined" size="s">
5375
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5376
+ </gov-button>
5377
+ <gov-button variant="secondary" type="outlined" size="s">
5378
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5379
+ </gov-button>
5380
+ </gov-control-group>
5381
+ <br />
5382
+ <gov-control-group variant="secondary" no-border>
5383
+ <gov-form-select name="test-me" size="m">
5384
+ <option value="" selected>Placeholder</option>
5385
+ <option value="b">Value B</option>
5386
+ <option value="c">Value C</option>
5387
+ <option value="d">Value D</option>
5388
+ </gov-form-select>
5389
+ <gov-button variant="secondary" type="outlined" size="m">
5390
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5391
+ </gov-button>
5392
+ </gov-control-group>
5393
+ <br />
5394
+ <gov-control-group variant="secondary">
5395
+ <gov-button variant="secondary" type="outlined" size="l">
5396
+ <gov-icon slot="left-icon" name="gear"></gov-icon>
5397
+ </gov-button>
5398
+ <gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
5399
+ <gov-button variant="secondary" type="outlined" size="l" tabindex="-1">
5400
+ Nahrát soubor ze zařízení
5401
+ </gov-button>
5402
+ </gov-form-file>
5403
+ <gov-button variant="secondary" type="outlined" size="l">
5404
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5405
+ </gov-button>
5406
+ </gov-control-group>
5407
+ <br />
5408
+ <gov-control-group variant="secondary">
5409
+ <gov-button variant="secondary" type="outlined" size="xl">
5410
+ <gov-icon slot="left-icon" name="chevron-up"></gov-icon>
5411
+ </gov-button>
5412
+ <gov-button variant="secondary" type="outlined" size="xl">
5413
+ <gov-icon slot="left-icon" name="chevron-down"></gov-icon>
5414
+ </gov-button>
5415
+ <gov-form-select name="test-me" variant="secondary" size="xl">
5416
+ <option value="" selected>Placeholder</option>
5417
+ <option value="b">Value B</option>
5418
+ <option value="c">Value C</option>
5419
+ <option value="d">Value D</option>
5420
+ </gov-form-select>
5421
+ <gov-button variant="secondary" type="outlined" size="xl">
5422
+ <gov-icon slot="left-icon" name="x-lg"></gov-icon>
5423
+ </gov-button>
5424
+ </gov-control-group>
5425
+ `;
5426
+ }
5427
+ }
5428
+ if (customElements.get('control-group-page') === undefined) {
5429
+ customElements.define('control-group-page', ControlGroupPage);
5430
+ }
5431
+
5155
5432
  class Cookiebar extends HTMLElement {
5156
5433
  connectedCallback() {
5157
5434
  this.innerHTML = `
@@ -5181,21 +5458,6 @@ if (customElements.get('cookiebar-page') === undefined) {
5181
5458
  customElements.define('cookiebar-page', Cookiebar);
5182
5459
  }
5183
5460
 
5184
- class ContainerPage extends HTMLElement {
5185
- connectedCallback() {
5186
- this.innerHTML = `
5187
- <h2>Container</h2>
5188
-
5189
- <gov-container>
5190
- <p>Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
5191
- </gov-container>
5192
- `;
5193
- }
5194
- }
5195
- if (customElements.get('container-page') === undefined) {
5196
- customElements.define('container-page', ContainerPage);
5197
- }
5198
-
5199
5461
  class EmptyPage extends HTMLElement {
5200
5462
  connectedCallback() {
5201
5463
  this.innerHTML = `
@@ -5255,67 +5517,168 @@ if (customElements.get('error-page') === undefined) {
5255
5517
  customElements.define('error-page', ErrorPage);
5256
5518
  }
5257
5519
 
5258
- const removeDiacritics = (string) => {
5259
- if (!string)
5260
- return string;
5261
- return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
5262
- };
5263
- const randomNumber = (min, max) => {
5264
- return Math.floor(Math.random() * (max - min + 1) + min);
5265
- };
5266
- const data = () => [
5267
- { name: 'Pepa' },
5268
- { name: 'Katak' },
5269
- { name: 'Tomáš' },
5270
- { name: 'Ludvík' },
5271
- { name: 'Anežda' },
5272
- { name: 'Xaviér' },
5273
- { name: 'Ondřej' },
5274
- { name: 'Mirek' },
5275
- { name: 'Zdeněk' },
5276
- { name: 'Monika' },
5277
- { name: 'Jirka' },
5278
- { name: 'Abrahám' },
5279
- { name: 'Lucie' },
5280
- { name: 'Emily' },
5281
- { name: 'Pavel' },
5282
- { name: 'Gustav' },
5283
- { name: 'Amálie' },
5284
- ];
5285
- class FormsPage extends HTMLElement {
5520
+ class FormLabelPage extends HTMLElement {
5286
5521
  connectedCallback() {
5287
- (() => {
5288
- setTimeout(() => {
5289
- const po = document.getElementById('bagr');
5290
- const ba = document.getElementById('ba');
5291
- if (ba) {
5292
- ba.addEventListener('gov-change', function (e) {
5293
- console.log(e);
5294
- });
5295
- }
5296
- if (po) {
5297
- po.addEventListener('gov-select', function (e) {
5298
- console.log(e);
5299
- });
5300
- po.setSearchCallback(val => {
5301
- return new Promise(resolve => {
5302
- setTimeout(() => {
5303
- resolve(data().filter(({ name }) => {
5304
- if (!name)
5305
- return false;
5306
- return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
5307
- }));
5308
- }, randomNumber(100, 1000));
5309
- });
5310
- });
5311
- }
5312
- }, 1000);
5313
- })();
5314
5522
  this.innerHTML = `
5315
- <h2>
5523
+ <gov-form-label>
5524
+ Form Label
5525
+ </gov-form-label>
5526
+ `;
5527
+ }
5528
+ }
5529
+ if (customElements.get('form-label-page') === undefined) {
5530
+ customElements.define('form-label-page', FormLabelPage);
5531
+ }
5532
+
5533
+ class FormMessagePage extends HTMLElement {
5534
+ connectedCallback() {
5535
+ this.innerHTML = `
5536
+ <gov-form-message>
5537
+ <gov-icon slot="icon" name="info"></gov-icon>
5538
+ <p>
5539
+ Default
5540
+ </p>
5541
+ </gov-form-message>
5542
+ <gov-form-message>
5543
+ <p>
5544
+ Default
5545
+ </p>
5546
+ </gov-form-message>
5547
+ <gov-form-message variant="secondary">
5548
+ <gov-icon name="info" slot="icon"></gov-icon>
5549
+ <p>
5550
+ Secondary
5551
+ </p>
5552
+ </gov-form-message>
5553
+ <gov-form-message variant="secondary">
5554
+ <p>
5555
+ Secondary
5556
+ </p>
5557
+ </gov-form-message>
5558
+ <gov-form-message variant="error">
5559
+ <gov-icon slot="icon" name="info"></gov-icon>
5560
+ <p>
5561
+ Error
5562
+ </p>
5563
+ </gov-form-message>
5564
+ <gov-form-message variant="error">
5565
+ <p>
5566
+ Error
5567
+ </p>
5568
+ </gov-form-message>
5569
+ <gov-form-message variant="warning">
5570
+ <gov-icon slot="icon" name="info"></gov-icon>
5571
+ <p>
5572
+ Warning
5573
+ </p>
5574
+ </gov-form-message>
5575
+ <gov-form-message variant="warning">
5576
+ <p>
5577
+ Warning
5578
+ </p>
5579
+ </gov-form-message>
5580
+ <gov-form-message variant="success">
5581
+ <gov-icon slot="icon" name="info"></gov-icon>
5582
+ <p>
5583
+ Success
5584
+ </p>
5585
+ </gov-form-message>
5586
+ <gov-form-message variant="success">
5587
+ <p>
5588
+ Success
5589
+ </p>
5590
+ </gov-form-message>
5591
+ <gov-form-message>
5592
+ <gov-icon slot="icon" name="info"></gov-icon>
5593
+ <p>
5594
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.
5595
+ </p>
5596
+ <p>
5597
+ Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
5598
+ </p>
5599
+ </gov-form-message>
5600
+ <gov-form-message>
5601
+ <p>
5602
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.
5603
+ </p>
5604
+ <p>
5605
+ Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
5606
+ </p>
5607
+ </gov-form-message>
5608
+ `;
5609
+ }
5610
+ }
5611
+ if (customElements.get('form-message-page') === undefined) {
5612
+ customElements.define('form-message-page', FormMessagePage);
5613
+ }
5614
+
5615
+ const removeDiacritics = (string) => {
5616
+ if (!string)
5617
+ return string;
5618
+ return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
5619
+ };
5620
+ const randomNumber = (min, max) => {
5621
+ return Math.floor(Math.random() * (max - min + 1) + min);
5622
+ };
5623
+ const data = () => [
5624
+ { name: 'Pepa' },
5625
+ { name: 'Katak' },
5626
+ { name: 'Tomáš' },
5627
+ { name: 'Ludvík' },
5628
+ { name: 'Anežda' },
5629
+ { name: 'Xaviér' },
5630
+ { name: 'Ondřej' },
5631
+ { name: 'Mirek' },
5632
+ { name: 'Zdeněk' },
5633
+ { name: 'Monika' },
5634
+ { name: 'Jirka' },
5635
+ { name: 'Abrahám' },
5636
+ { name: 'Lucie' },
5637
+ { name: 'Emily' },
5638
+ { name: 'Pavel' },
5639
+ { name: 'Gustav' },
5640
+ { name: 'Amálie' },
5641
+ ];
5642
+ class FormsPage extends HTMLElement {
5643
+ connectedCallback() {
5644
+ (() => {
5645
+ setTimeout(() => {
5646
+ const po = document.getElementById('bagr');
5647
+ const ba = document.getElementById('ba');
5648
+ const na = document.getElementById('kaprWWWWWW');
5649
+ if (ba) {
5650
+ ba.addEventListener('gov-change', function (e) {
5651
+ console.log(e);
5652
+ });
5653
+ }
5654
+ if (na) {
5655
+ na.addEventListener('gov-blur', function (e) {
5656
+ console.log(e);
5657
+ });
5658
+ }
5659
+ if (po) {
5660
+ po.addEventListener('gov-select', function (e) {
5661
+ console.log(e);
5662
+ });
5663
+ po.setSearchCallback(val => {
5664
+ return new Promise(resolve => {
5665
+ setTimeout(() => {
5666
+ resolve(data().filter(({ name }) => {
5667
+ if (!name)
5668
+ return false;
5669
+ return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
5670
+ }));
5671
+ }, randomNumber(100, 1000));
5672
+ });
5673
+ });
5674
+ }
5675
+ }, 1000);
5676
+ })();
5677
+ this.innerHTML = `
5678
+ <h2>
5316
5679
  Samostatné použití
5317
5680
  </h2>
5318
- <gov-form-input placeholder="Co hledáte">
5681
+ <gov-form-input placeholder="Co hledáte" variant="primary">
5319
5682
  <gov-icon slot="right-icon" name="info"></gov-icon>
5320
5683
  </gov-form-input>
5321
5684
  <br>
@@ -5357,6 +5720,9 @@ class FormsPage extends HTMLElement {
5357
5720
  </gov-form-switch>
5358
5721
 
5359
5722
 
5723
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5724
+
5725
+
5360
5726
  <h2>
5361
5727
  Date & Time input (nativní)
5362
5728
  </h2>
@@ -5366,10 +5732,14 @@ class FormsPage extends HTMLElement {
5366
5732
  <br>
5367
5733
  <gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
5368
5734
 
5735
+
5736
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5737
+
5738
+
5369
5739
  <h2>Search</h2>
5370
5740
  <gov-form-control>
5371
5741
  <gov-form-group>
5372
- <gov-form-search name="test-me-c" value="me" checked>
5742
+ <gov-form-search name="test-me-c" value="me" variant="secondary">
5373
5743
  <gov-form-input slot="input" id="kapr" name="test-me" size="m" placeholder="Co hledáte"></gov-form-input>
5374
5744
  <gov-button slot="button" variant="primary" size="s">
5375
5745
  <gov-icon slot="left-icon" name="search"></gov-icon>
@@ -5380,7 +5750,7 @@ class FormsPage extends HTMLElement {
5380
5750
  <br>
5381
5751
  <gov-form-control>
5382
5752
  <gov-form-group>
5383
- <gov-form-search name="test-me-c" value="me" checked>
5753
+ <gov-form-search name="test-me-c" value="me" variant="primary">
5384
5754
  <gov-form-input slot="input" id="kapr" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>
5385
5755
  <gov-button slot="button" variant="primary" size="m">
5386
5756
  Hledat
@@ -5400,13 +5770,17 @@ class FormsPage extends HTMLElement {
5400
5770
  </gov-form-group>
5401
5771
  </gov-form-control>
5402
5772
 
5773
+
5774
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5775
+
5776
+
5403
5777
  <h2>File</h2>
5404
5778
  <div class="container-view">
5405
5779
  <h3>Normal</h3>
5406
5780
  <gov-form-control>
5407
5781
  <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5408
5782
  <gov-form-group>
5409
- <gov-form-file name="test-me-c" expanded accept="image/*" max-file-size="1024">
5783
+ <gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
5410
5784
  <p>
5411
5785
  <gov-button variant="primary" type="outlined" tabindex="-1">
5412
5786
  Nahrát soubor ze zařízení
@@ -5419,9 +5793,8 @@ class FormsPage extends HTMLElement {
5419
5793
  </gov-form-group>
5420
5794
  </gov-form-control>
5421
5795
  <br>
5422
-
5423
5796
  <gov-form-control>
5424
- <gov-form-label size="s" slot="top">Přidat přílohu 22 *</gov-form-label>
5797
+ <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5425
5798
  <gov-form-group>
5426
5799
  <gov-form-file name="test-me-c">
5427
5800
  <p aria-hidden="true">
@@ -5437,11 +5810,10 @@ class FormsPage extends HTMLElement {
5437
5810
  </gov-form-group>
5438
5811
  </gov-form-control>
5439
5812
  <br>
5440
-
5441
- <gov-form-control invalid>
5813
+ <gov-form-control>
5442
5814
  <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5443
5815
  <gov-form-group>
5444
- <gov-form-file name="test-me-c">
5816
+ <gov-form-file name="test-me-c" invalid>
5445
5817
  <p>
5446
5818
  <gov-button variant="primary" type="outlined">
5447
5819
  <gov-icon slot="left-icon" name="upload"></gov-icon>
@@ -5465,7 +5837,7 @@ class FormsPage extends HTMLElement {
5465
5837
  <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5466
5838
  <gov-form-group>
5467
5839
  <gov-form-file expanded name="test-me-c">
5468
- <p class="gov-color--secondary-800">
5840
+ <p>
5469
5841
  Přetáhněte soubor nebo
5470
5842
  </p>
5471
5843
  <p>
@@ -5480,12 +5852,11 @@ class FormsPage extends HTMLElement {
5480
5852
  </gov-form-group>
5481
5853
  </gov-form-control>
5482
5854
  <br>
5483
-
5484
5855
  <gov-form-control disabled>
5485
5856
  <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5486
5857
  <gov-form-group>
5487
- <gov-form-file expanded name="test-me-c">
5488
- <p class="gov-color--secondary-800">
5858
+ <gov-form-file expanded name="test-me-c" disabled>
5859
+ <p>
5489
5860
  Přetáhněte soubor nebo
5490
5861
  </p>
5491
5862
  <p>
@@ -5500,12 +5871,11 @@ class FormsPage extends HTMLElement {
5500
5871
  </gov-form-group>
5501
5872
  </gov-form-control>
5502
5873
  <br>
5503
-
5504
5874
  <gov-form-control invalid>
5505
5875
  <gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
5506
5876
  <gov-form-group>
5507
- <gov-form-file expanded name="test-me-c">
5508
- <p class="gov-color--secondary-800">
5877
+ <gov-form-file expanded name="test-me-c" invalid>
5878
+ <p>
5509
5879
  Přetáhněte soubor nebo
5510
5880
  </p>
5511
5881
  <p>
@@ -5526,6 +5896,10 @@ class FormsPage extends HTMLElement {
5526
5896
  <br>
5527
5897
  </div>
5528
5898
 
5899
+
5900
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5901
+
5902
+
5529
5903
  <h2>Multiselect</h2>
5530
5904
  <gov-form-control>
5531
5905
  <gov-form-label slot="top">Multiselect</gov-form-label>
@@ -5548,17 +5922,43 @@ class FormsPage extends HTMLElement {
5548
5922
  </gov-form-message>
5549
5923
  </gov-form-control>
5550
5924
 
5925
+
5926
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5927
+
5928
+
5551
5929
  <h2>Autocomplete</h2>
5552
5930
  <gov-form-control>
5553
5931
  <gov-form-label slot="top">Label of autocomplete</gov-form-label>
5554
5932
  <gov-form-group>
5555
- <gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
5933
+ <gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr">
5934
+ <gov-icon name="search" slot="right-icon" />
5935
+ </gov-form-autocomplete>
5936
+ </gov-form-group>
5937
+ </gov-form-control>
5938
+ <gov-form-control>
5939
+ <gov-form-label slot="top">Label of autocomplete</gov-form-label>
5940
+ <gov-form-group>
5941
+ <gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" invalid="true">
5942
+ <gov-icon name="search" slot="right-icon" />
5943
+ </gov-form-autocomplete>
5556
5944
  </gov-form-group>
5557
5945
  <gov-form-message slot="bottom" variant="error">
5558
5946
  <gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
5559
5947
  Required
5560
5948
  </gov-form-message>
5561
5949
  </gov-form-control>
5950
+ <gov-form-control>
5951
+ <gov-form-label slot="top">Label of autocomplete</gov-form-label>
5952
+ <gov-form-group>
5953
+ <gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" disabled="true">
5954
+ <gov-icon name="search" slot="right-icon" />
5955
+ </gov-form-autocomplete>
5956
+ </gov-form-group>
5957
+ </gov-form-control>
5958
+
5959
+
5960
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
5961
+
5562
5962
 
5563
5963
  <h2>Textarea</h2>
5564
5964
  <h3>
@@ -5570,21 +5970,23 @@ class FormsPage extends HTMLElement {
5570
5970
  <gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder"></gov-form-input>
5571
5971
  </gov-form-group>
5572
5972
  </gov-form-control>
5973
+
5573
5974
  <h3>
5574
5975
  Invalid
5575
5976
  </h3>
5576
- <gov-form-control invalid="TRUE" type="input" id="metro2">
5977
+ <gov-form-control type="input" id="metro2">
5577
5978
  <gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
5578
5979
  <gov-form-group>
5579
- <gov-form-input required multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
5980
+ <gov-form-input required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>
5580
5981
  </gov-form-group>
5581
5982
  <gov-form-message slot="bottom" variant="error">
5582
5983
  <gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
5583
5984
  Required
5584
5985
  </gov-form-message>
5585
5986
  </gov-form-control>
5987
+
5586
5988
  <h3>
5587
- Disabled DDD
5989
+ Disabled
5588
5990
  </h3>
5589
5991
  <gov-form-control id="metro2">
5590
5992
  <gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
@@ -5593,58 +5995,61 @@ class FormsPage extends HTMLElement {
5593
5995
  </gov-form-group>
5594
5996
  </gov-form-control>
5595
5997
 
5998
+
5999
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6000
+
6001
+
5596
6002
  <h2>Checkbox</h2>
5597
6003
  <h3>
5598
6004
  Gaps
5599
6005
  </h3>
5600
-
5601
- <gov-form-control size="xs">
6006
+ <gov-form-control>
5602
6007
  <gov-form-label size="xs" slot="top">Label of word</gov-form-label>
5603
6008
  <gov-form-group gap="2xs">
5604
- <gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
5605
- <gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
6009
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
6010
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
5606
6011
  </gov-form-group>
5607
6012
  </gov-form-control>
5608
6013
  <br>
5609
- <gov-form-control size="xs">
6014
+ <gov-form-control>
5610
6015
  <gov-form-group gap="2xs">
5611
- <gov-form-checkbox name="test-me-c" value="me" required checked>
6016
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" required checked>
5612
6017
  <gov-form-label slot="label">Option 1</gov-form-label>
5613
6018
  </gov-form-checkbox>
5614
- <gov-form-checkbox name="test-me-c" value="me" checked>
6019
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
5615
6020
  <gov-form-label slot="label">Option 2</gov-form-label>
5616
6021
  </gov-form-checkbox>
5617
6022
  </gov-form-group>
5618
6023
  </gov-form-control>
5619
6024
  <br>
5620
- <gov-form-control size="s">
6025
+ <gov-form-control>
5621
6026
  <gov-form-group gap="xs">
5622
- <gov-form-checkbox name="test-me-c" value="me" checked>
6027
+ <gov-form-checkbox name="test-me-c" value="me" size="s" checked>
5623
6028
  <gov-form-label slot="label">Option 1</gov-form-label>
5624
6029
  </gov-form-checkbox>
5625
- <gov-form-checkbox name="test-me-c" value="me" checked>
6030
+ <gov-form-checkbox name="test-me-c" value="me" size="s" checked>
5626
6031
  <gov-form-label slot="label">Option 2</gov-form-label>
5627
6032
  </gov-form-checkbox>
5628
6033
  </gov-form-group>
5629
6034
  </gov-form-control>
5630
6035
  <br>
5631
- <gov-form-control size="m">
6036
+ <gov-form-control>
5632
6037
  <gov-form-group gap="s">
5633
- <gov-form-checkbox name="test-me-c" value="me" checked>
6038
+ <gov-form-checkbox name="test-me-c" value="me" size="m" checked>
5634
6039
  <gov-form-label slot="label">Option 1</gov-form-label>
5635
6040
  </gov-form-checkbox>
5636
- <gov-form-checkbox name="test-me-c" value="me" checked>
6041
+ <gov-form-checkbox name="test-me-c" value="me" size="m" checked>
5637
6042
  <gov-form-label slot="label">Option 2</gov-form-label>
5638
6043
  </gov-form-checkbox>
5639
6044
  </gov-form-group>
5640
6045
  </gov-form-control>
5641
6046
  <br>
5642
- <gov-form-control size="l">
6047
+ <gov-form-control>
5643
6048
  <gov-form-group gap="m">
5644
- <gov-form-checkbox name="test-me-c" value="me" checked>
6049
+ <gov-form-checkbox name="test-me-c" value="me" size="l" checked>
5645
6050
  <gov-form-label slot="label">Option 1</gov-form-label>
5646
6051
  </gov-form-checkbox>
5647
- <gov-form-checkbox name="test-me-c" value="me" checked>
6052
+ <gov-form-checkbox name="test-me-c" value="me" size="l" checked>
5648
6053
  <gov-form-label slot="label">Option 2</gov-form-label>
5649
6054
  </gov-form-checkbox>
5650
6055
  </gov-form-group>
@@ -5653,40 +6058,41 @@ class FormsPage extends HTMLElement {
5653
6058
  <h3>
5654
6059
  Default
5655
6060
  </h3>
5656
- <gov-form-control size="xs">
6061
+ <gov-form-control>
5657
6062
  <gov-form-group>
5658
- <gov-form-checkbox name="test-me-c" value="me" checked>
6063
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
5659
6064
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5660
6065
  </gov-form-checkbox>
5661
6066
  </gov-form-group>
5662
6067
  </gov-form-control>
5663
- <gov-form-control size="s">
6068
+ <gov-form-control>
5664
6069
  <gov-form-group>
5665
- <gov-form-checkbox name="test-me-c" value="me" checked>
6070
+ <gov-form-checkbox name="test-me-c" value="me" size="s" checked>
5666
6071
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5667
6072
  </gov-form-checkbox>
5668
6073
  </gov-form-group>
5669
6074
  </gov-form-control>
5670
- <gov-form-control size="m">
6075
+ <gov-form-control>
5671
6076
  <gov-form-group>
5672
- <gov-form-checkbox name="test-me-c" value="me" checked>
6077
+ <gov-form-checkbox name="test-me-c" value="me" size="m" checked>
5673
6078
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5674
6079
  </gov-form-checkbox>
5675
6080
  </gov-form-group>
5676
6081
  </gov-form-control>
5677
- <gov-form-control size="l">
6082
+ <gov-form-control>
5678
6083
  <gov-form-group>
5679
- <gov-form-checkbox name="test-me-c" value="me" checked>
6084
+ <gov-form-checkbox name="test-me-c" value="me" size="l" checked>
5680
6085
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5681
6086
  </gov-form-checkbox>
5682
6087
  </gov-form-group>
5683
6088
  </gov-form-control>
6089
+
5684
6090
  <h3>
5685
6091
  Invalid
5686
6092
  </h3>
5687
- <gov-form-control invalid="true" size="xs">
6093
+ <gov-form-control>
5688
6094
  <gov-form-group>
5689
- <gov-form-checkbox name="test-me-c" value="me" checked>
6095
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" checked invalid="true">
5690
6096
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5691
6097
  </gov-form-checkbox>
5692
6098
  </gov-form-group>
@@ -5695,9 +6101,9 @@ class FormsPage extends HTMLElement {
5695
6101
  Required
5696
6102
  </gov-form-message>
5697
6103
  </gov-form-control>
5698
- <gov-form-control invalid="true" size="s">
6104
+ <gov-form-control>
5699
6105
  <gov-form-group>
5700
- <gov-form-checkbox name="test-me-c" value="me" checked>
6106
+ <gov-form-checkbox name="test-me-c" value="me" size="s" checked invalid="true">
5701
6107
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5702
6108
  </gov-form-checkbox>
5703
6109
  </gov-form-group>
@@ -5706,9 +6112,9 @@ class FormsPage extends HTMLElement {
5706
6112
  Required
5707
6113
  </gov-form-message>
5708
6114
  </gov-form-control>
5709
- <gov-form-control invalid="true" size="m">
6115
+ <gov-form-control>
5710
6116
  <gov-form-group>
5711
- <gov-form-checkbox name="test-me-c" value="me" checked>
6117
+ <gov-form-checkbox name="test-me-c" value="me" size="m" checked invalid="true">
5712
6118
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5713
6119
  </gov-form-checkbox>
5714
6120
  </gov-form-group>
@@ -5717,96 +6123,101 @@ class FormsPage extends HTMLElement {
5717
6123
  Required
5718
6124
  </gov-form-message>
5719
6125
  </gov-form-control>
5720
-
6126
+
5721
6127
  <h3>
5722
6128
  Disabled
5723
6129
  </h3>
5724
- <gov-form-control disabled size="xs">
6130
+ <gov-form-control>
5725
6131
  <gov-form-group>
5726
- <gov-form-checkbox name="test-me-c" value="me">
6132
+ <gov-form-checkbox name="test-me-c" value="me" size="xs" disabled>
5727
6133
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5728
6134
  </gov-form-checkbox>
5729
6135
  </gov-form-group>
5730
6136
  </gov-form-control>
5731
- <gov-form-control disabled="True" size="s">
6137
+ <gov-form-control>
5732
6138
  <gov-form-group>
5733
- <gov-form-checkbox name="test-me-c" value="me">
6139
+ <gov-form-checkbox name="test-me-c" value="me" size="s" disabled="True">
5734
6140
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5735
6141
  </gov-form-checkbox>
5736
6142
  </gov-form-group>
5737
6143
  </gov-form-control>
5738
- <gov-form-control disabled="TRUE" size="m">
6144
+ <gov-form-control>
5739
6145
  <gov-form-group>
5740
- <gov-form-checkbox name="test-me-c" value="me" checked>
6146
+ <gov-form-checkbox name="test-me-c" value="me" size="m" checked disabled="TRUE">
5741
6147
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5742
6148
  </gov-form-checkbox>
5743
6149
  </gov-form-group>
5744
6150
  </gov-form-control>
5745
- <gov-form-control disabled="1" size="l">
6151
+ <gov-form-control>
5746
6152
  <gov-form-group>
5747
- <gov-form-checkbox name="test-me-c" value="me" checked>
6153
+ <gov-form-checkbox name="test-me-c" value="me" size="l" checked disabled="1">
5748
6154
  <gov-form-label slot="label">Souhlasím</gov-form-label>
5749
6155
  </gov-form-checkbox>
5750
6156
  </gov-form-group>
5751
6157
  </gov-form-control>
5752
6158
 
6159
+
6160
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6161
+
6162
+
5753
6163
  <h2>Radio</h2>
5754
6164
  <h3>
5755
6165
  Default group
5756
6166
  </h3>
5757
- <gov-form-control size="xs" fieldset>
6167
+ <gov-form-control fieldset>
5758
6168
  <gov-form-label legend size="s" slot="top">Seznam skupiny</gov-form-label>
5759
6169
  <gov-form-group>
5760
- <gov-form-radio name="test1" value="me" >
6170
+ <gov-form-radio name="test1" value="me" size="xs">
5761
6171
  <gov-form-label slot="label">Value 1</gov-form-label>
5762
6172
  </gov-form-radio>
5763
- <gov-form-radio name="test1" value="me2" checked>
6173
+ <gov-form-radio name="test1" value="me2" size="xs" checked>
5764
6174
  <gov-form-label slot="label">Value 2</gov-form-label>
5765
6175
  </gov-form-radio>
5766
6176
  </gov-form-group>
5767
6177
  </gov-form-control>
5768
6178
  <br>
5769
- <gov-form-control size="s">
6179
+ <gov-form-control>
5770
6180
  <gov-form-group>
5771
- <gov-form-radio name="test2" value="me" >
6181
+ <gov-form-radio name="test2" value="me" size="s">
5772
6182
  <gov-form-label slot="label">Value 1</gov-form-label>
5773
6183
  </gov-form-radio>
5774
- <gov-form-radio name="test2" value="me2" checked>
6184
+ <gov-form-radio name="test2" value="me2" size="s" checked>
5775
6185
  <gov-form-label slot="label">Value 2</gov-form-label>
5776
6186
  </gov-form-radio>
5777
6187
  </gov-form-group>
5778
6188
  </gov-form-control>
5779
6189
  <br>
5780
- <gov-form-control size="m">
6190
+ <gov-form-control>
5781
6191
  <gov-form-group>
5782
- <gov-form-radio name="test3" value="me" >
6192
+ <gov-form-radio name="test3" value="me" size="m">
5783
6193
  <gov-form-label slot="label">Value 1</gov-form-label>
5784
6194
  </gov-form-radio>
5785
- <gov-form-radio name="test3" value="me2" checked>
6195
+ <gov-form-radio name="test3" value="me2" size="m" checked>
5786
6196
  <gov-form-label slot="label">Value 2</gov-form-label>
5787
6197
  </gov-form-radio>
5788
6198
  </gov-form-group>
5789
6199
  </gov-form-control>
5790
6200
  <br>
5791
- <gov-form-control size="l">
6201
+ <gov-form-control>
5792
6202
  <gov-form-group>
5793
- <gov-form-radio name="test4" value="me" >
6203
+ <gov-form-radio name="test4" value="me" size="l">
5794
6204
  <gov-form-label slot="label">Value 1</gov-form-label>
5795
6205
  </gov-form-radio>
5796
- <gov-form-radio name="test4" value="me2" checked>
6206
+ <gov-form-radio name="test4" value="me2" size="l" checked>
5797
6207
  <gov-form-label slot="label">Value 2</gov-form-label>
5798
6208
  </gov-form-radio>
5799
6209
  </gov-form-group>
5800
6210
  </gov-form-control>
6211
+
5801
6212
  <h3>
5802
6213
  Invalid
5803
6214
  </h3>
5804
- <gov-form-control invalid="true" size="xs">
6215
+ <gov-form-control>
5805
6216
  <gov-form-group>
5806
- <gov-form-radio name="test5" value="me" >
6217
+ <gov-form-radio name="test5" value="me" size="xs" invalid="true">
5807
6218
  <gov-form-label slot="label">Value 1</gov-form-label>
5808
6219
  </gov-form-radio>
5809
- <gov-form-radio name="test5" value="me2" checked>
6220
+ <gov-form-radio name="test5" value="me2" size="xs" checked invalid="true">
5810
6221
  <gov-form-label slot="label">Value 2</gov-form-label>
5811
6222
  </gov-form-radio>
5812
6223
  </gov-form-group>
@@ -5816,12 +6227,12 @@ class FormsPage extends HTMLElement {
5816
6227
  </gov-form-message>
5817
6228
  </gov-form-control>
5818
6229
  <br>
5819
- <gov-form-control invalid="true" size="s">
6230
+ <gov-form-control>
5820
6231
  <gov-form-group>
5821
- <gov-form-radio name="test6" value="me" >
6232
+ <gov-form-radio name="test6" value="me" size="s" invalid="true">
5822
6233
  <gov-form-label slot="label">Value 1</gov-form-label>
5823
6234
  </gov-form-radio>
5824
- <gov-form-radio name="test6" value="me2" checked>
6235
+ <gov-form-radio name="test6" value="me2" size="s" checked invalid="true">
5825
6236
  <gov-form-label slot="label">Value 2</gov-form-label>
5826
6237
  </gov-form-radio>
5827
6238
  </gov-form-group>
@@ -5831,12 +6242,12 @@ class FormsPage extends HTMLElement {
5831
6242
  </gov-form-message>
5832
6243
  </gov-form-control>
5833
6244
  <br>
5834
- <gov-form-control invalid="true" size="m">
6245
+ <gov-form-control>
5835
6246
  <gov-form-group>
5836
- <gov-form-radio name="test7" value="me" >
6247
+ <gov-form-radio name="test7" value="me" size="m" invalid="true">
5837
6248
  <gov-form-label slot="label">Value 1</gov-form-label>
5838
6249
  </gov-form-radio>
5839
- <gov-form-radio name="test7" value="me2" checked>
6250
+ <gov-form-radio name="test7" value="me2" size="m" checked invalid="true">
5840
6251
  <gov-form-label slot="label">Value 2</gov-form-label>
5841
6252
  </gov-form-radio>
5842
6253
  </gov-form-group>
@@ -5846,12 +6257,12 @@ class FormsPage extends HTMLElement {
5846
6257
  </gov-form-message>
5847
6258
  </gov-form-control>
5848
6259
  <br>
5849
- <gov-form-control invalid="true" size="l">
6260
+ <gov-form-control>
5850
6261
  <gov-form-group>
5851
- <gov-form-radio name="test8" value="me" >
6262
+ <gov-form-radio name="test8" value="me" size="l" invalid="true">
5852
6263
  <gov-form-label slot="label">Value 1</gov-form-label>
5853
6264
  </gov-form-radio>
5854
- <gov-form-radio name="test8" value="me2" checked>
6265
+ <gov-form-radio name="test8" value="me2" size="l" checked invalid="true">
5855
6266
  <gov-form-label slot="label">Value 2</gov-form-label>
5856
6267
  </gov-form-radio>
5857
6268
  </gov-form-group>
@@ -5860,61 +6271,66 @@ class FormsPage extends HTMLElement {
5860
6271
  Required
5861
6272
  </gov-form-message>
5862
6273
  </gov-form-control>
6274
+
5863
6275
  <h3>
5864
6276
  Disabled
5865
6277
  </h3>
5866
- <gov-form-control size="xs" disabled>
6278
+ <gov-form-control>
5867
6279
  <gov-form-group>
5868
- <gov-form-radio name="test9" value="me" >
6280
+ <gov-form-radio name="test9" value="me" size="xs" disabled>
5869
6281
  <gov-form-label slot="label">Value 1</gov-form-label>
5870
6282
  </gov-form-radio>
5871
- <gov-form-radio name="test9" value="me2" checked>
6283
+ <gov-form-radio name="test9" value="me2" size="xs" checked disabled>
5872
6284
  <gov-form-label slot="label">Value 2</gov-form-label>
5873
6285
  </gov-form-radio>
5874
6286
  </gov-form-group>
5875
6287
  </gov-form-control>
5876
6288
  <br>
5877
- <gov-form-control disabled="true" size="s">
6289
+ <gov-form-control>
5878
6290
  <gov-form-group>
5879
- <gov-form-radio name="test10" value="me" >
6291
+ <gov-form-radio name="test10" value="me" size="s" disabled="true">
5880
6292
  <gov-form-label slot="label">Value 1</gov-form-label>
5881
6293
  </gov-form-radio>
5882
- <gov-form-radio name="test10" value="me2" checked>
6294
+ <gov-form-radio name="test10" value="me2" size="s" checked disabled="true">
5883
6295
  <gov-form-label slot="label">Value 2</gov-form-label>
5884
6296
  </gov-form-radio>
5885
6297
  </gov-form-group>
5886
6298
  </gov-form-control>
5887
6299
  <br>
5888
- <gov-form-control disabled="true" size="m">
6300
+ <gov-form-control>
5889
6301
  <gov-form-group>
5890
- <gov-form-radio name="test11" value="me" >
6302
+ <gov-form-radio name="test11" value="me" size="m" disabled="true">
5891
6303
  <gov-form-label slot="label">Value 1</gov-form-label>
5892
6304
  </gov-form-radio>
5893
- <gov-form-radio name="test11" value="me2" checked>
6305
+ <gov-form-radio name="test11" value="me2" size="m" checked disabled="true">
5894
6306
  <gov-form-label slot="label">Value 2</gov-form-label>
5895
6307
  </gov-form-radio>
5896
6308
  </gov-form-group>
5897
6309
  </gov-form-control>
5898
6310
  <br>
5899
- <gov-form-control disabled="true" size="l">
6311
+ <gov-form-control>
5900
6312
  <gov-form-group>
5901
- <gov-form-radio name="test12" value="me" >
6313
+ <gov-form-radio name="test12" value="me" size="l" disabled="true">
5902
6314
  <gov-form-label slot="label">Value 1</gov-form-label>
5903
6315
  </gov-form-radio>
5904
- <gov-form-radio name="test12" value="me2" checked>
6316
+ <gov-form-radio name="test12" value="me2" size="l" checked disabled="true">
5905
6317
  <gov-form-label slot="label">Value 2</gov-form-label>
5906
6318
  </gov-form-radio>
5907
6319
  </gov-form-group>
5908
6320
  </gov-form-control>
5909
6321
 
6322
+
6323
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6324
+
6325
+
5910
6326
  <h2>Select</h2>
5911
6327
  <h3>
5912
6328
  Default
5913
6329
  </h3>
5914
- <gov-form-control size="m">
6330
+ <gov-form-control>
5915
6331
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
5916
6332
  <gov-form-group>
5917
- <gov-form-select name="test-me">
6333
+ <gov-form-select name="test-me" size="m">
5918
6334
  <option value="" selected>Placeholder</option>
5919
6335
  <option value="b">Value B</option>
5920
6336
  <option value="c">Value C</option>
@@ -5922,10 +6338,10 @@ class FormsPage extends HTMLElement {
5922
6338
  </gov-form-select>
5923
6339
  </gov-form-group>
5924
6340
  </gov-form-control>
5925
- <gov-form-control size="l">
6341
+ <gov-form-control>
5926
6342
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
5927
6343
  <gov-form-group>
5928
- <gov-form-select name="test-me">
6344
+ <gov-form-select name="test-me" size="l">
5929
6345
  <option value="a" selected>Value A</option>
5930
6346
  <option value="b">Value B</option>
5931
6347
  <option value="c">Value C</option>
@@ -5933,10 +6349,10 @@ class FormsPage extends HTMLElement {
5933
6349
  </gov-form-select>
5934
6350
  </gov-form-group>
5935
6351
  </gov-form-control>
5936
- <gov-form-control size="xl">
6352
+ <gov-form-control>
5937
6353
  <gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
5938
6354
  <gov-form-group>
5939
- <gov-form-select name="test-me">
6355
+ <gov-form-select name="test-me" size="xl">
5940
6356
  <option value="a" selected>Value A</option>
5941
6357
  <option value="b">Value B</option>
5942
6358
  <option value="c">Value C</option>
@@ -5944,16 +6360,16 @@ class FormsPage extends HTMLElement {
5944
6360
  </gov-form-select>
5945
6361
  </gov-form-group>
5946
6362
  </gov-form-control>
6363
+
5947
6364
  <h3>
5948
6365
  Prefix / sufix
5949
6366
  </h3>
5950
- <gov-form-control size="m">
6367
+ <gov-form-control>
5951
6368
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
5952
6369
  <gov-form-group>
5953
- <gov-form-select name="test-me">
6370
+ <gov-form-select name="test-me" size="m">
5954
6371
  <span slot="prefix">$</span>
5955
6372
  <span slot="sufix">Kč</span>
5956
-
5957
6373
  <option value="" selected>Placeholder</option>
5958
6374
  <option value="b">Value B</option>
5959
6375
  <option value="c">Value C</option>
@@ -5961,13 +6377,12 @@ class FormsPage extends HTMLElement {
5961
6377
  </gov-form-select>
5962
6378
  </gov-form-group>
5963
6379
  </gov-form-control>
5964
- <gov-form-control size="l">
6380
+ <gov-form-control>
5965
6381
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
5966
6382
  <gov-form-group>
5967
- <gov-form-select name="test-me">
6383
+ <gov-form-select name="test-me" size="l">
5968
6384
  <span slot="prefix">$</span>
5969
6385
  <span slot="sufix">Kč</span>
5970
-
5971
6386
  <option value="a" selected>Value A</option>
5972
6387
  <option value="b">Value B</option>
5973
6388
  <option value="c">Value C</option>
@@ -5975,13 +6390,12 @@ class FormsPage extends HTMLElement {
5975
6390
  </gov-form-select>
5976
6391
  </gov-form-group>
5977
6392
  </gov-form-control>
5978
- <gov-form-control size="l">
6393
+ <gov-form-control>
5979
6394
  <gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
5980
6395
  <gov-form-group>
5981
- <gov-form-select name="test-me">
6396
+ <gov-form-select name="test-me" size="l">
5982
6397
  <span slot="prefix">$</span>
5983
6398
  <span slot="sufix">Kč</span>
5984
-
5985
6399
  <option value="a" selected>Value A</option>
5986
6400
  <option value="b">Value B</option>
5987
6401
  <option value="c">Value C</option>
@@ -5989,13 +6403,14 @@ class FormsPage extends HTMLElement {
5989
6403
  </gov-form-select>
5990
6404
  </gov-form-group>
5991
6405
  </gov-form-control>
6406
+
5992
6407
  <h3>
5993
6408
  Invalid
5994
6409
  </h3>
5995
- <gov-form-control invalid="true" size="m">
6410
+ <gov-form-control>
5996
6411
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
5997
6412
  <gov-form-group>
5998
- <gov-form-select name="test-me">
6413
+ <gov-form-select name="test-me" size="m" invalid="true">
5999
6414
  <option value="" selected>Placeholder</option>
6000
6415
  <option value="b">Value B</option>
6001
6416
  <option value="c">Value C</option>
@@ -6007,10 +6422,10 @@ class FormsPage extends HTMLElement {
6007
6422
  Required
6008
6423
  </gov-form-message>
6009
6424
  </gov-form-control>
6010
- <gov-form-control invalid="true" size="l">
6425
+ <gov-form-control>
6011
6426
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
6012
6427
  <gov-form-group>
6013
- <gov-form-select name="test-me">
6428
+ <gov-form-select name="test-me" size="l" invalid="true">
6014
6429
  <option value="" selected>Placeholder</option>
6015
6430
  <option value="b">Value B</option>
6016
6431
  <option value="c">Value C</option>
@@ -6022,10 +6437,10 @@ class FormsPage extends HTMLElement {
6022
6437
  Required
6023
6438
  </gov-form-message>
6024
6439
  </gov-form-control>
6025
- <gov-form-control invalid="true" size="xl">
6440
+ <gov-form-control>
6026
6441
  <gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
6027
6442
  <gov-form-group>
6028
- <gov-form-select name="test-me">
6443
+ <gov-form-select name="test-me" size="xl" invalid="true">
6029
6444
  <option value="" selected>Placeholder</option>
6030
6445
  <option value="b">Value B</option>
6031
6446
  <option value="c">Value C</option>
@@ -6037,13 +6452,14 @@ class FormsPage extends HTMLElement {
6037
6452
  Required
6038
6453
  </gov-form-message>
6039
6454
  </gov-form-control>
6455
+
6040
6456
  <h3>
6041
6457
  Disabled
6042
6458
  </h3>
6043
- <gov-form-control size="m" disabled>
6459
+ <gov-form-control>
6044
6460
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
6045
6461
  <gov-form-group>
6046
- <gov-form-select name="test-me">
6462
+ <gov-form-select name="test-me" size="m" disabled>
6047
6463
  <option value="" selected>Placeholder</option>
6048
6464
  <option value="b">Value B</option>
6049
6465
  <option value="c">Value C</option>
@@ -6051,10 +6467,10 @@ class FormsPage extends HTMLElement {
6051
6467
  </gov-form-select>
6052
6468
  </gov-form-group>
6053
6469
  </gov-form-control>
6054
- <gov-form-control disabled="true" size="m">
6470
+ <gov-form-control>
6055
6471
  <gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
6056
6472
  <gov-form-group>
6057
- <gov-form-select name="test-me">
6473
+ <gov-form-select name="test-me" size="m" disabled="true">
6058
6474
  <option value="" selected>Placeholder</option>
6059
6475
  <option value="b">Value B</option>
6060
6476
  <option value="c">Value C</option>
@@ -6062,10 +6478,10 @@ class FormsPage extends HTMLElement {
6062
6478
  </gov-form-select>
6063
6479
  </gov-form-group>
6064
6480
  </gov-form-control>
6065
- <gov-form-control disabled="true" size="l">
6481
+ <gov-form-control>
6066
6482
  <gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
6067
6483
  <gov-form-group>
6068
- <gov-form-select name="test-me">
6484
+ <gov-form-select name="test-me" size="l" disabled="true">
6069
6485
  <option value="" selected>Placeholder</option>
6070
6486
  <option value="b">Value B</option>
6071
6487
  <option value="c">Value C</option>
@@ -6074,153 +6490,238 @@ class FormsPage extends HTMLElement {
6074
6490
  </gov-form-group>
6075
6491
  </gov-form-control>
6076
6492
 
6493
+
6494
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6495
+
6496
+
6077
6497
  <h2>Input</h2>
6078
6498
  <h3>
6079
- Default
6499
+ Primary
6080
6500
  </h3>
6081
- <gov-form-control size="m" type="input" id="metro2">
6501
+ <gov-form-control type="input" id="metro2">
6502
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6503
+ <gov-form-group>
6504
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
6505
+ </gov-form-group>
6506
+ </gov-form-control>
6507
+ <gov-form-control type="input" id="metro2">
6508
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6509
+ <gov-form-group>
6510
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="m"></gov-form-input>
6511
+ </gov-form-group>
6512
+ </gov-form-control>
6513
+ <gov-form-control type="input" id="metro2">
6514
+ <gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
6515
+ <gov-form-group>
6516
+ <gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="l"></gov-form-input>
6517
+ </gov-form-group>
6518
+ </gov-form-control>
6519
+ <gov-form-control type="input" id="metro2">
6520
+ <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6521
+ <gov-form-group>
6522
+ <gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="xl"></gov-form-input>
6523
+ </gov-form-group>
6524
+ </gov-form-control>
6525
+
6526
+ <h3>
6527
+ Secondary
6528
+ </h3>
6529
+ <gov-form-control type="input" id="metro2">
6082
6530
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6083
6531
  <gov-form-group>
6084
- <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
6532
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
6085
6533
  </gov-form-group>
6086
6534
  </gov-form-control>
6087
- <gov-form-control size="l" type="input" id="metro2">
6535
+ <gov-form-control type="input" id="metro2">
6536
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6537
+ <gov-form-group>
6538
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="m"></gov-form-input>
6539
+ </gov-form-group>
6540
+ </gov-form-control>
6541
+ <gov-form-control type="input" id="metro2">
6088
6542
  <gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
6089
6543
  <gov-form-group>
6090
- <gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
6544
+ <gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="l"></gov-form-input>
6091
6545
  </gov-form-group>
6092
6546
  </gov-form-control>
6093
- <gov-form-control size="xl" type="input" id="metro2">
6547
+ <gov-form-control type="input" id="metro2">
6094
6548
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6095
6549
  <gov-form-group>
6096
- <gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
6550
+ <gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="xl"></gov-form-input>
6097
6551
  </gov-form-group>
6098
6552
  </gov-form-control>
6553
+
6099
6554
  <h3>
6100
6555
  Prefix / sufix
6101
6556
  </h3>
6102
- <gov-form-control size="m" type="input" id="metro2">
6557
+ <gov-form-control type="input" id="metro2">
6558
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6559
+ <gov-form-group>
6560
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s">
6561
+ <span slot="prefix">$</span>
6562
+ <span slot="sufix">Kč</span>
6563
+ </gov-form-input>
6564
+ </gov-form-group>
6565
+ </gov-form-control>
6566
+ <gov-form-control type="input" id="metro2">
6103
6567
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6104
6568
  <gov-form-group>
6105
- <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder">
6569
+ <gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="m">
6106
6570
  <span slot="prefix">$</span>
6107
6571
  <span slot="sufix">Kč</span>
6108
6572
  </gov-form-input>
6109
6573
  </gov-form-group>
6110
6574
  </gov-form-control>
6111
- <gov-form-control size="l" type="input" id="metro2">
6575
+ <gov-form-control type="input" id="metro2">
6112
6576
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6113
6577
  <gov-form-group>
6114
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6578
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
6115
6579
  <span slot="prefix">$</span>
6116
6580
  <span slot="sufix">Kč</span>
6117
6581
  </gov-form-input>
6118
6582
  </gov-form-group>
6119
6583
  </gov-form-control>
6120
- <gov-form-control size="xl" type="input" id="metro2">
6584
+ <gov-form-control type="input" id="metro2">
6121
6585
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6122
6586
  <gov-form-group>
6123
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6587
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
6124
6588
  <span slot="prefix">$</span>
6125
6589
  <span slot="sufix">Kč</span>
6126
6590
  </gov-form-input>
6127
6591
  </gov-form-group>
6128
6592
  </gov-form-control>
6593
+
6129
6594
  <h3>
6130
6595
  Left icon
6131
6596
  </h3>
6132
- <gov-form-control size="m" type="input" id="metro2">
6597
+ <gov-form-control type="input" id="metro2">
6598
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6599
+ <gov-form-group>
6600
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
6601
+ <gov-icon slot="left-icon" name="info"></gov-icon>
6602
+ </gov-form-input>
6603
+ </gov-form-group>
6604
+ </gov-form-control>
6605
+ <gov-form-control type="input" id="metro2">
6133
6606
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6134
6607
  <gov-form-group>
6135
- <gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
6608
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
6136
6609
  <gov-icon slot="left-icon" name="info"></gov-icon>
6137
6610
  </gov-form-input>
6138
6611
  </gov-form-group>
6139
6612
  </gov-form-control>
6140
- <gov-form-control size="l" type="input" id="metro2">
6613
+ <gov-form-control type="input" id="metro2">
6141
6614
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6142
6615
  <gov-form-group>
6143
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6616
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
6144
6617
  <gov-icon slot="left-icon" name="info"></gov-icon>
6145
6618
  </gov-form-input>
6146
6619
  </gov-form-group>
6147
6620
  </gov-form-control>
6148
- <gov-form-control size="xl" type="input" id="metro2">
6621
+ <gov-form-control type="input" id="metro2">
6149
6622
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6150
6623
  <gov-form-group>
6151
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6624
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
6152
6625
  <gov-icon slot="left-icon" name="info"></gov-icon>
6153
6626
  </gov-form-input>
6154
6627
  </gov-form-group>
6155
6628
  </gov-form-control>
6629
+
6156
6630
  <h3>
6157
6631
  Right icon
6158
6632
  </h3>
6159
- <gov-form-control size="m" type="input" id="metro2">
6633
+ <gov-form-control type="input" id="metro2">
6160
6634
  <gov-form-label slot="top">Label of input</gov-form-label>
6161
6635
  <gov-form-group>
6162
- <gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
6636
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
6637
+ <gov-icon slot="right-icon" name="info"></gov-icon>
6163
6638
  </gov-form-input>
6164
6639
  </gov-form-group>
6165
6640
  </gov-form-control>
6166
- <gov-form-control size="l" type="input" id="metro2">
6641
+ <gov-form-control type="input" id="metro2">
6642
+ <gov-form-label slot="top">Label of input</gov-form-label>
6643
+ <gov-form-group>
6644
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
6645
+ <gov-icon slot="right-icon" name="info"></gov-icon>
6646
+ </gov-form-input>
6647
+ </gov-form-group>
6648
+ </gov-form-control>
6649
+ <gov-form-control type="input" id="metro2">
6167
6650
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6168
6651
  <gov-form-group>
6169
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6652
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
6170
6653
  <gov-icon slot="right-icon" name="info"></gov-icon>
6171
6654
  </gov-form-input>
6172
6655
  </gov-form-group>
6173
6656
  </gov-form-control>
6174
- <gov-form-control size="xl" type="input" id="metro2">
6657
+ <gov-form-control type="input" id="metro2">
6175
6658
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6176
6659
  <gov-form-group>
6177
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6660
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
6178
6661
  <gov-icon slot="right-icon" name="info"></gov-icon>
6179
6662
  </gov-form-input>
6180
6663
  </gov-form-group>
6181
6664
  </gov-form-control>
6665
+
6182
6666
  <h3>
6183
6667
  Success
6184
6668
  </h3>
6185
- <gov-form-control success="true" size="m" type="input" id="metro2">
6669
+ <gov-form-control type="input" id="metro2" success="true">
6670
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6671
+ <gov-form-group>
6672
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
6673
+ </gov-form-group>
6674
+ </gov-form-control>
6675
+ <gov-form-control type="input" id="metro2" success="true">
6186
6676
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6187
6677
  <gov-form-group>
6188
- <gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
6678
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>
6189
6679
  </gov-form-group>
6190
6680
  </gov-form-control>
6191
- <gov-form-control success="True" size="l" type="input" id="metro2">
6681
+ <gov-form-control type="input" id="metro2" success="True">
6192
6682
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6193
6683
  <gov-form-group>
6194
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6684
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
6195
6685
  <gov-icon slot="right-icon" name="info"></gov-icon>
6196
6686
  </gov-form-input>
6197
6687
  </gov-form-group>
6198
6688
  </gov-form-control>
6199
- <gov-form-control success="1" size="xl" type="input" id="metro2">
6689
+ <gov-form-control type="input" id="metro2" success="1">
6200
6690
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6201
6691
  <gov-form-group>
6202
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6692
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
6203
6693
  <gov-icon slot="left-icon" name="info"></gov-icon>
6204
6694
  </gov-form-input>
6205
6695
  </gov-form-group>
6206
6696
  </gov-form-control>
6697
+
6207
6698
  <h3>
6208
6699
  Invalid
6209
6700
  </h3>
6210
- <gov-form-control invalid="true" size="m" type="input" id="metro2">
6701
+ <gov-form-control type="input" id="metro2">
6702
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6703
+ <gov-form-group>
6704
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>
6705
+ </gov-form-group>
6706
+ <gov-form-message slot="bottom" variant="error">
6707
+ <gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
6708
+ Required
6709
+ </gov-form-message>
6710
+ </gov-form-control>
6711
+ <gov-form-control type="input" id="metro2">
6211
6712
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6212
6713
  <gov-form-group>
6213
- <gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
6714
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>
6214
6715
  </gov-form-group>
6215
6716
  <gov-form-message slot="bottom" variant="error">
6216
6717
  <gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
6217
6718
  Required
6218
6719
  </gov-form-message>
6219
6720
  </gov-form-control>
6220
- <gov-form-control invalid="true" size="l" type="input" id="metro2">
6721
+ <gov-form-control type="input" id="metro2">
6221
6722
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6222
6723
  <gov-form-group>
6223
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6724
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l" invalid="true">
6224
6725
  <gov-icon slot="right-icon" name="info"></gov-icon>
6225
6726
  </gov-form-input>
6226
6727
  </gov-form-group>
@@ -6229,10 +6730,10 @@ class FormsPage extends HTMLElement {
6229
6730
  Required
6230
6731
  </gov-form-message>
6231
6732
  </gov-form-control>
6232
- <gov-form-control invalid="true" size="xl" type="input" id="metro2">
6733
+ <gov-form-control type="input" id="metro2">
6233
6734
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6234
6735
  <gov-form-group>
6235
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6736
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" invalid="true">
6236
6737
  <gov-icon slot="left-icon" name="info"></gov-icon>
6237
6738
  </gov-form-input>
6238
6739
  </gov-form-group>
@@ -6241,34 +6742,47 @@ class FormsPage extends HTMLElement {
6241
6742
  Required
6242
6743
  </gov-form-message>
6243
6744
  </gov-form-control>
6745
+
6244
6746
  <h3>
6245
6747
  Disabled
6246
6748
  </h3>
6247
- <gov-form-control size="m" type="input" id="metro2" disabled>
6749
+ <gov-form-control size="m" type="input" id="metro2">
6248
6750
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6249
6751
  <gov-form-group>
6250
- <gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
6752
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" disabled>
6251
6753
  <gov-icon slot="right-icon" name="info"></gov-icon>
6252
6754
  </gov-form-input>
6253
6755
  </gov-form-group>
6254
6756
  </gov-form-control>
6255
- <gov-form-control disabled="True" size="l" type="input" id="metro2">
6757
+ <gov-form-control size="m" type="input" id="metro2">
6256
6758
  <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6257
6759
  <gov-form-group>
6258
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6760
+ <gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" disabled>
6259
6761
  <gov-icon slot="right-icon" name="info"></gov-icon>
6260
6762
  </gov-form-input>
6261
6763
  </gov-form-group>
6262
6764
  </gov-form-control>
6263
- <gov-form-control disabled="1" size="xl" type="input" id="metro2">
6765
+ <gov-form-control type="input" id="metro2">
6766
+ <gov-form-label size="s" slot="top">Label of input</gov-form-label>
6767
+ <gov-form-group>
6768
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="l" disabled="True">
6769
+ <gov-icon slot="right-icon" name="info"></gov-icon>
6770
+ </gov-form-input>
6771
+ </gov-form-group>
6772
+ </gov-form-control>
6773
+ <gov-form-control type="input" id="metro2">
6264
6774
  <gov-form-label size="m" slot="top">Label of input</gov-form-label>
6265
6775
  <gov-form-group>
6266
- <gov-form-input id="kapr" name="test-me" value="Value of input">
6776
+ <gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" disabled="1">
6267
6777
  <gov-icon slot="left-icon" name="info"></gov-icon>
6268
6778
  </gov-form-input>
6269
6779
  </gov-form-group>
6270
6780
  </gov-form-control>
6271
6781
 
6782
+
6783
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6784
+
6785
+
6272
6786
  <h3>
6273
6787
  Password power
6274
6788
  </h3>
@@ -6277,35 +6791,38 @@ class FormsPage extends HTMLElement {
6277
6791
  <gov-form-password-power power="2">střední</gov-form-password-power>
6278
6792
  <gov-form-password-power power="3">silné</gov-form-password-power>
6279
6793
 
6794
+
6795
+ <!-- ----------------------------------------------------------------------------------------------------------------------------- -->
6796
+
6797
+
6280
6798
  <h2>Switch</h2>
6281
6799
  <h3>
6282
6800
  Default
6283
6801
  </h3>
6284
- <gov-form-control size="xs">
6802
+ <gov-form-control>
6285
6803
  <gov-form-group>
6286
- <gov-form-switch name="test-me" value="me" checked>
6804
+ <gov-form-switch name="test-me" value="me" size="xs" checked>
6287
6805
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6288
6806
  </gov-form-switch>
6289
6807
  </gov-form-group>
6290
6808
  </gov-form-control>
6291
- <gov-form-control size="s">
6809
+ <gov-form-control>
6292
6810
  <gov-form-group>
6293
- <gov-form-switch name="test-me" value="me" checked>
6811
+ <gov-form-switch name="test-me" value="me" size="s" checked>
6294
6812
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6295
6813
  </gov-form-switch>
6296
6814
  </gov-form-group>
6297
6815
  </gov-form-control>
6298
- <gov-form-control size="m">
6816
+ <gov-form-control>
6299
6817
  <gov-form-group>
6300
- <gov-form-switch name="test-me" value="me" checked>
6818
+ <gov-form-switch name="test-me" value="me" size="m" checked>
6301
6819
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6302
6820
  </gov-form-switch>
6303
6821
  </gov-form-group>
6304
6822
  </gov-form-control>
6305
-
6306
- <gov-form-control size="l">
6823
+ <gov-form-control>
6307
6824
  <gov-form-group>
6308
- <gov-form-switch name="test-me" value="me" checked>
6825
+ <gov-form-switch name="test-me" value="me" size="l" checked>
6309
6826
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6310
6827
  </gov-form-switch>
6311
6828
  </gov-form-group>
@@ -6314,9 +6831,9 @@ class FormsPage extends HTMLElement {
6314
6831
  <h3>
6315
6832
  With message
6316
6833
  </h3>
6317
- <gov-form-control size="xs">
6834
+ <gov-form-control>
6318
6835
  <gov-form-group>
6319
- <gov-form-switch name="test-me" value="me" checked>
6836
+ <gov-form-switch name="test-me" value="me" size="xs" checked>
6320
6837
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6321
6838
  </gov-form-switch>
6322
6839
  </gov-form-group>
@@ -6325,9 +6842,9 @@ class FormsPage extends HTMLElement {
6325
6842
  Required
6326
6843
  </gov-form-message>
6327
6844
  </gov-form-control>
6328
- <gov-form-control size="s">
6845
+ <gov-form-control>
6329
6846
  <gov-form-group>
6330
- <gov-form-switch name="test-me" value="me" checked>
6847
+ <gov-form-switch name="test-me" value="me" size="s" checked>
6331
6848
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6332
6849
  </gov-form-switch>
6333
6850
  </gov-form-group>
@@ -6336,9 +6853,9 @@ class FormsPage extends HTMLElement {
6336
6853
  Required
6337
6854
  </gov-form-message>
6338
6855
  </gov-form-control>
6339
- <gov-form-control size="m">
6856
+ <gov-form-control>
6340
6857
  <gov-form-group>
6341
- <gov-form-switch name="test-me" value="me" checked>
6858
+ <gov-form-switch name="test-me" value="me" size="m" checked>
6342
6859
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6343
6860
  </gov-form-switch>
6344
6861
  </gov-form-group>
@@ -6347,9 +6864,9 @@ class FormsPage extends HTMLElement {
6347
6864
  Required
6348
6865
  </gov-form-message>
6349
6866
  </gov-form-control>
6350
- <gov-form-control size="l">
6867
+ <gov-form-control>
6351
6868
  <gov-form-group>
6352
- <gov-form-switch name="test-me" value="me" checked>
6869
+ <gov-form-switch name="test-me" value="me" size="l" checked>
6353
6870
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6354
6871
  </gov-form-switch>
6355
6872
  </gov-form-group>
@@ -6358,99 +6875,102 @@ class FormsPage extends HTMLElement {
6358
6875
  Required
6359
6876
  </gov-form-message>
6360
6877
  </gov-form-control>
6878
+
6361
6879
  <h3>
6362
6880
  With label
6363
6881
  </h3>
6364
- <gov-form-control size="xs">
6882
+ <gov-form-control>
6365
6883
  <gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
6366
6884
  <gov-form-group>
6367
- <gov-form-switch name="test-me" value="me" checked>
6885
+ <gov-form-switch name="test-me" value="me" size="xs" checked>
6368
6886
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6369
6887
  </gov-form-switch>
6370
6888
  </gov-form-group>
6371
6889
  </gov-form-control>
6372
- <gov-form-control size="s">
6890
+ <gov-form-control>
6373
6891
  <gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
6374
6892
  <gov-form-group>
6375
- <gov-form-switch name="test-me" value="me" checked>
6893
+ <gov-form-switch name="test-me" value="me" size="s" checked>
6376
6894
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6377
6895
  </gov-form-switch>
6378
6896
  </gov-form-group>
6379
6897
  </gov-form-control>
6380
- <gov-form-control size="m">
6898
+ <gov-form-control>
6381
6899
  <gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
6382
6900
  <gov-form-group>
6383
- <gov-form-switch name="test-me" value="me" checked>
6901
+ <gov-form-switch name="test-me" value="me" size="m" checked>
6384
6902
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6385
6903
  </gov-form-switch>
6386
6904
  </gov-form-group>
6387
6905
  </gov-form-control>
6388
- <gov-form-control size="l">
6906
+ <gov-form-control>
6389
6907
  <gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
6390
6908
  <gov-form-group>
6391
- <gov-form-switch name="test-me" value="me" checked>
6909
+ <gov-form-switch name="test-me" value="me" size="l" checked>
6392
6910
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6393
6911
  </gov-form-switch>
6394
6912
  </gov-form-group>
6395
6913
  </gov-form-control>
6914
+
6396
6915
  <h3>
6397
6916
  Disabled
6398
6917
  </h3>
6399
- <gov-form-control type="switch" size="xs" disabled>
6918
+ <gov-form-control type="switch">
6400
6919
  <gov-form-group>
6401
- <gov-form-switch name="test-me" value="me">
6920
+ <gov-form-switch name="test-me" value="me" size="xs" disabled>
6402
6921
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6403
6922
  </gov-form-switch>
6404
6923
  </gov-form-group>
6405
6924
  </gov-form-control>
6406
- <gov-form-control type="switch" size="s" disabled="true">
6925
+ <gov-form-control type="switch">
6407
6926
  <gov-form-group>
6408
- <gov-form-switch name="test-me" value="me">
6927
+ <gov-form-switch name="test-me" value="me" size="s" disabled="true">
6409
6928
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6410
6929
  </gov-form-switch>
6411
6930
  </gov-form-group>
6412
6931
  </gov-form-control>
6413
- <gov-form-control type="switch" size="m" disabled="true">
6932
+ <gov-form-control type="switch">
6414
6933
  <gov-form-group>
6415
- <gov-form-switch name="test-me" value="me" checked>
6934
+ <gov-form-switch name="test-me" value="me" size="m" checked disabled="true">
6416
6935
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6417
6936
  </gov-form-switch>
6418
6937
  </gov-form-group>
6419
6938
  </gov-form-control>
6420
- <gov-form-control type="switch" size="l" disabled="true">
6939
+ <gov-form-control type="switch">
6421
6940
  <gov-form-group>
6422
- <gov-form-switch name="test-me" value="me" checked>
6941
+ <gov-form-switch name="test-me" value="me" size="l" checked disabled="true">
6423
6942
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6424
6943
  </gov-form-switch>
6425
6944
  </gov-form-group>
6426
6945
  </gov-form-control>
6946
+
6427
6947
  <h3>
6428
6948
  Invalid
6429
6949
  </h3>
6430
- <gov-form-control size="xs" invalid="True">
6950
+ <gov-form-control>
6431
6951
  <gov-form-group>
6432
- <gov-form-switch invalid name="test-me" value="me" checked>
6952
+ <gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">
6433
6953
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6434
6954
  </gov-form-switch>
6435
6955
  </gov-form-group>
6436
6956
  </gov-form-control>
6437
- <gov-form-control size="s" invalid="TRUE">
6957
+ <gov-form-control>
6438
6958
  <gov-form-group>
6439
- <gov-form-switch invalid name="test-me" value="me" checked>
6959
+ <gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">
6440
6960
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6441
6961
  </gov-form-switch>
6442
6962
  </gov-form-group>
6443
6963
  </gov-form-control>
6444
- <gov-form-control size="m" invalid="true">
6964
+ <gov-form-control>
6445
6965
  <gov-form-group>
6446
- <gov-form-switch invalid name="test-me" value="me" checked>
6966
+ <gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" checked>
6447
6967
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6448
6968
  </gov-form-switch>
6449
6969
  </gov-form-group>
6450
6970
  </gov-form-control>
6451
- <gov-form-control size="l" invalid="1">
6971
+ <gov-form-control>
6452
6972
  <gov-form-group>
6453
- <gov-form-switch invalid name="test-me" value="me" checked>
6973
+ <gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>
6454
6974
  <gov-form-label slot="label">Souhlasím</gov-form-label>
6455
6975
  </gov-form-switch>
6456
6976
  </gov-form-group>
@@ -6475,101 +6995,6 @@ if (customElements.get('forms-restructue-page') === undefined) {
6475
6995
  customElements.define('forms-restructue-page', FormsRestructurePage);
6476
6996
  }
6477
6997
 
6478
- class FormLabelPage extends HTMLElement {
6479
- connectedCallback() {
6480
- this.innerHTML = `
6481
- <gov-form-label>
6482
- Form Label
6483
- </gov-form-label>
6484
- `;
6485
- }
6486
- }
6487
- if (customElements.get('form-label-page') === undefined) {
6488
- customElements.define('form-label-page', FormLabelPage);
6489
- }
6490
-
6491
- class FormMessagePage extends HTMLElement {
6492
- connectedCallback() {
6493
- this.innerHTML = `
6494
- <gov-form-message>
6495
- <gov-icon slot="icon" name="info"></gov-icon>
6496
- <p>
6497
- Default
6498
- </p>
6499
- </gov-form-message>
6500
- <gov-form-message>
6501
- <p>
6502
- Default
6503
- </p>
6504
- </gov-form-message>
6505
- <gov-form-message variant="secondary">
6506
- <gov-icon name="info" slot="icon"></gov-icon>
6507
- <p>
6508
- Secondary
6509
- </p>
6510
- </gov-form-message>
6511
- <gov-form-message variant="secondary">
6512
- <p>
6513
- Secondary
6514
- </p>
6515
- </gov-form-message>
6516
- <gov-form-message variant="error">
6517
- <gov-icon slot="icon" name="info"></gov-icon>
6518
- <p>
6519
- Error
6520
- </p>
6521
- </gov-form-message>
6522
- <gov-form-message variant="error">
6523
- <p>
6524
- Error
6525
- </p>
6526
- </gov-form-message>
6527
- <gov-form-message variant="warning">
6528
- <gov-icon slot="icon" name="info"></gov-icon>
6529
- <p>
6530
- Warning
6531
- </p>
6532
- </gov-form-message>
6533
- <gov-form-message variant="warning">
6534
- <p>
6535
- Warning
6536
- </p>
6537
- </gov-form-message>
6538
- <gov-form-message variant="success">
6539
- <gov-icon slot="icon" name="info"></gov-icon>
6540
- <p>
6541
- Success
6542
- </p>
6543
- </gov-form-message>
6544
- <gov-form-message variant="success">
6545
- <p>
6546
- Success
6547
- </p>
6548
- </gov-form-message>
6549
- <gov-form-message>
6550
- <gov-icon slot="icon" name="info"></gov-icon>
6551
- <p>
6552
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.
6553
- </p>
6554
- <p>
6555
- Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
6556
- </p>
6557
- </gov-form-message>
6558
- <gov-form-message>
6559
- <p>
6560
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.
6561
- </p>
6562
- <p>
6563
- Aliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.
6564
- </p>
6565
- </gov-form-message>
6566
- `;
6567
- }
6568
- }
6569
- if (customElements.get('form-message-page') === undefined) {
6570
- customElements.define('form-message-page', FormMessagePage);
6571
- }
6572
-
6573
6998
  class GridPage extends HTMLElement {
6574
6999
  connectedCallback() {
6575
7000
  this.innerHTML = `
@@ -6662,6 +7087,15 @@ if (customElements.get('grid-page') === undefined) {
6662
7087
  customElements.define('grid-page', GridPage);
6663
7088
  }
6664
7089
 
7090
+ class HomePage extends HTMLElement {
7091
+ connectedCallback() {
7092
+ this.innerHTML = ``;
7093
+ }
7094
+ }
7095
+ if (customElements.get('home-page') === undefined) {
7096
+ customElements.define('home-page', HomePage);
7097
+ }
7098
+
6665
7099
  class LayoutPage extends HTMLElement {
6666
7100
  connectedCallback() {
6667
7101
  this.innerHTML = `
@@ -6759,6 +7193,101 @@ if (customElements.get('layout-page') === undefined) {
6759
7193
  customElements.define('layout-page', LayoutPage);
6760
7194
  }
6761
7195
 
7196
+ class LoadingPage extends HTMLElement {
7197
+ connectedCallback() {
7198
+ setTimeout(function () {
7199
+ document.getElementById('btn').addEventListener('gov-click', function () {
7200
+ document.getElementById('loading').setAttribute('loading', 'true');
7201
+ });
7202
+ }, 500);
7203
+ this.innerHTML = `
7204
+ <h2>Loading</h2>
7205
+ <div class="preview-container">
7206
+ <div class="skeletons-defaults">
7207
+ <h2>Default</h2>
7208
+ <gov-skeleton variant="success"></gov-skeleton>
7209
+ </div>
7210
+ <div class="skeletons-appearance-circle">
7211
+ <h2>Default circle</h2>
7212
+ <gov-skeleton shape="circle"> </gov-skeleton>
7213
+ </div>
7214
+ <div class="skeletons-appearance-circle">
7215
+ <h2>Default rect</h2>
7216
+ <gov-skeleton shape="rect"> </gov-skeleton>
7217
+ </div>
7218
+ <div class="skeletons-with-count">
7219
+ <h2>Default 4 rows</h2>
7220
+ <gov-skeleton count="2"></gov-skeleton>
7221
+ </div>
7222
+ <div class="skeletons-animation-no-animation">
7223
+ <h2>Without animation</h2>
7224
+ <gov-skeleton animation="false"></gov-skeleton>
7225
+ </div>
7226
+ <div class="skeletons-animation-pulse">
7227
+ <h2>Pulse animation</h2>
7228
+ <gov-skeleton animation="pulse"></gov-skeleton>
7229
+ </div>
7230
+ <div class="skeletons-animation-progress">
7231
+ <h2>Progress animation</h2>
7232
+ <gov-skeleton animation="progress"></gov-skeleton>
7233
+ </div>
7234
+ <div class="skeletons-with-theming">
7235
+ <h2>Custom styles</h2>
7236
+ <style>
7237
+ .custom-skeleton {
7238
+ --skeleton-width: 100px;
7239
+ --skeleton-height: 100px;
7240
+ --skeleton-background: #cccccc;
7241
+ --skeleton-border-radius: 20px;
7242
+ }
7243
+ </style>
7244
+ <gov-skeleton></gov-skeleton>
7245
+ </div>
7246
+ <div>
7247
+ <h2>Custom width</h2>
7248
+ <gov-skeleton width="500px"></gov-skeleton>
7249
+ </div>
7250
+ <div>
7251
+ <h2>Custom height</h2>
7252
+ <gov-skeleton height="80px"></gov-skeleton>
7253
+ </div>
7254
+ </div>
7255
+
7256
+
7257
+ <gov-button variant="primary" id="btn" wcag-label="Zobrazit načítání">Zobrazit načítání</gov-button>
7258
+
7259
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7260
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7261
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7262
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7263
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7264
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7265
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7266
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7267
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7268
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7269
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7270
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7271
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7272
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7273
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7274
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7275
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7276
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7277
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7278
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7279
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7280
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7281
+ <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
7282
+
7283
+ <gov-loading id="loading">Načítání</gov-loading>
7284
+ `;
7285
+ }
7286
+ }
7287
+ if (customElements.get('loading-page') === undefined) {
7288
+ customElements.define('loading-page', LoadingPage);
7289
+ }
7290
+
6762
7291
  class MessagePage extends HTMLElement {
6763
7292
  connectedCallback() {
6764
7293
  this.innerHTML = `
@@ -6824,155 +7353,45 @@ class MessagePage extends HTMLElement {
6824
7353
  </p>
6825
7354
  </gov-message>
6826
7355
  <br>
6827
- <gov-message inverse variant="warning">
6828
- <gov-icon name="info" slot="icon"></gov-icon>
6829
- <p>
6830
- Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
6831
- </p>
6832
- </gov-message>
6833
- <br>
6834
- <gov-message inverse variant="secondary">
6835
- <gov-icon name="info" slot="icon"></gov-icon>
6836
- <p>
6837
- Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
6838
- </p>
6839
- </gov-message>
6840
- </div>
6841
-
6842
- <h3>Shadow</h3>
6843
- <gov-message variant="secondary" shadow>
6844
- <gov-icon name="info" slot="icon"></gov-icon>
6845
- <p>
6846
- Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
6847
- </p>
6848
- </gov-message>
6849
- `;
6850
- }
6851
- }
6852
- if (customElements.get('message-page') === undefined) {
6853
- customElements.define('message-page', MessagePage);
6854
- }
6855
-
6856
- class ModalPage extends HTMLElement {
6857
- connectedCallback() {
6858
- setTimeout(function () {
6859
- document.getElementById('btn').addEventListener('gov-click', function () {
6860
- document.getElementById('modal').setAttribute('open', 'true');
6861
- });
6862
- }, 500);
6863
- this.innerHTML = `
6864
- <h2>Modal</h2>
6865
- <gov-button variant="primary" id="btn" wcag-label="Zobrazit formulář o výši dávky">Vyplnit formulář</gov-button>
6866
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6867
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6868
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6869
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6870
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6871
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6872
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6873
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6874
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6875
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6876
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6877
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6878
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6879
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6880
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6881
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6882
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6883
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6884
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6885
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6886
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6887
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6888
- <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6889
-
6890
- <gov-modal label="Podání daňového přiznání" id="modal" wcag-close-label="Zavřít modal žádosti o dávku">
6891
- <gov-icon slot="icon" name="info"></gov-icon>
6892
- <h3>Obsah modálního okna</h3>
6893
- <p>Bude tvořen libovolnými komponentami</p>
6894
- <h3>Obsah modálního okna</h3>
6895
- <p>
6896
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, pulvinar vitae tempor at, laoreet quis mi. Vivamus vitae orci mi. Sed eget nisi convallis, condimentum diam a, fermentum risus. Proin vulputate pretium nisi sit amet commodo. Fusce ac magna velit. Maecenas sit amet sem quis arcu lobortis varius a non urna. Morbi ex neque, tempor bibendum sagittis vitae, vulputate ut nibh. Vestibulum sit amet pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut molestie varius nisi, sed mattis quam mollis vulputate. Morbi semper, purus sed ornare sodales, risus tellus porta massa, et eleifend erat diam vitae ex.
6897
- </p>
6898
- <p>
6899
- Suspendisse quis justo nibh. Aenean id purus mattis, posuere urna a, blandit magna. Aenean a ante eleifend, ornare ipsum quis, bibendum mauris. Integer eget posuere sem, in tincidunt quam. Phasellus massa erat, sodales vel hendrerit vitae, ultrices quis dolor. Fusce id vestibulum sem, eu pretium sem. Praesent lacinia, odio non aliquam cursus, arcu ipsum ornare diam, vitae pharetra erat dui non velit. Quisque eu tempus mi. Nam a diam mauris. Quisque sollicitudin risus eu neque accumsan vulputate. Ut tincidunt metus eu nulla sodales, vitae dictum justo ornare. In tincidunt lobortis nunc, ac imperdiet odio condimentum nec. Ut aliquet pulvinar ligula vitae tincidunt. Phasellus egestas ut leo pretium laoreet. Fusce et vestibulum purus. Duis semper sem massa, non dignissim nunc aliquam sit amet.
6900
- </p>
6901
- <p>
6902
- Praesent blandit mattis neque varius sagittis. Nulla ac scelerisque justo. Vestibulum aliquet blandit pharetra. Quisque lacus mi, tincidunt ac dui at, lobortis efficitur nisi. Fusce laoreet maximus purus, sit amet pulvinar mauris facilisis in. Integer fermentum elit eu aliquam sodales. Curabitur laoreet pharetra est rutrum posuere. In at eros tempus ex sodales facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras placerat dolor ac urna elementum facilisis. Aenean diam nibh, sollicitudin in porta sed, laoreet in nisl. Ut scelerisque tortor augue, vitae fermentum dui ornare non. Nulla fringilla libero non metus venenatis, eu maximus massa placerat. Praesent elementum convallis metus, vel iaculis sem pretium cursus.
6903
- </p>
6904
- <gov-button slot="footer" variant="primary" wcag-label="Vyplnit formulář o výši dávky">Vyplnit formulář</gov-button>
6905
- </gov-modal>
6906
- `;
6907
- }
6908
- }
6909
- if (customElements.get('modal-page') === undefined) {
6910
- customElements.define('modal-page', ModalPage);
6911
- }
6912
-
6913
- class LoadingPage extends HTMLElement {
6914
- connectedCallback() {
6915
- setTimeout(function () {
6916
- document.getElementById('btn').addEventListener('gov-click', function () {
6917
- document.getElementById('loading').setAttribute('loading', 'true');
6918
- });
6919
- }, 500);
6920
- this.innerHTML = `
6921
- <h2>Loading</h2>
6922
- <div class="preview-container">
6923
- <div class="skeletons-defaults">
6924
- <h2>Default</h2>
6925
- <gov-skeleton variant="success"></gov-skeleton>
6926
- </div>
6927
- <div class="skeletons-appearance-circle">
6928
- <h2>Default circle</h2>
6929
- <gov-skeleton shape="circle"> </gov-skeleton>
6930
- </div>
6931
- <div class="skeletons-appearance-circle">
6932
- <h2>Default rect</h2>
6933
- <gov-skeleton shape="rect"> </gov-skeleton>
6934
- </div>
6935
- <div class="skeletons-with-count">
6936
- <h2>Default 4 rows</h2>
6937
- <gov-skeleton count="2"></gov-skeleton>
6938
- </div>
6939
- <div class="skeletons-animation-no-animation">
6940
- <h2>Without animation</h2>
6941
- <gov-skeleton animation="false"></gov-skeleton>
6942
- </div>
6943
- <div class="skeletons-animation-pulse">
6944
- <h2>Pulse animation</h2>
6945
- <gov-skeleton animation="pulse"></gov-skeleton>
6946
- </div>
6947
- <div class="skeletons-animation-progress">
6948
- <h2>Progress animation</h2>
6949
- <gov-skeleton animation="progress"></gov-skeleton>
6950
- </div>
6951
- <div class="skeletons-with-theming">
6952
- <h2>Custom styles</h2>
6953
- <style>
6954
- .custom-skeleton {
6955
- --skeleton-width: 100px;
6956
- --skeleton-height: 100px;
6957
- --skeleton-background: #cccccc;
6958
- --skeleton-border-radius: 20px;
6959
- }
6960
- </style>
6961
- <gov-skeleton></gov-skeleton>
6962
- </div>
6963
- <div>
6964
- <h2>Custom width</h2>
6965
- <gov-skeleton width="500px"></gov-skeleton>
6966
- </div>
6967
- <div>
6968
- <h2>Custom height</h2>
6969
- <gov-skeleton height="80px"></gov-skeleton>
6970
- </div>
6971
- </div>
6972
-
6973
-
6974
- <gov-button variant="primary" id="btn" wcag-label="Zobrazit načítání">Zobrazit načítání</gov-button>
7356
+ <gov-message inverse variant="warning">
7357
+ <gov-icon name="info" slot="icon"></gov-icon>
7358
+ <p>
7359
+ Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
7360
+ </p>
7361
+ </gov-message>
7362
+ <br>
7363
+ <gov-message inverse variant="secondary">
7364
+ <gov-icon name="info" slot="icon"></gov-icon>
7365
+ <p>
7366
+ Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
7367
+ </p>
7368
+ </gov-message>
7369
+ </div>
7370
+
7371
+ <h3>Shadow</h3>
7372
+ <gov-message variant="secondary" shadow>
7373
+ <gov-icon name="info" slot="icon"></gov-icon>
7374
+ <p>
7375
+ Font awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
7376
+ </p>
7377
+ </gov-message>
7378
+ `;
7379
+ }
7380
+ }
7381
+ if (customElements.get('message-page') === undefined) {
7382
+ customElements.define('message-page', MessagePage);
7383
+ }
6975
7384
 
7385
+ class ModalPage extends HTMLElement {
7386
+ connectedCallback() {
7387
+ setTimeout(function () {
7388
+ document.getElementById('btn').addEventListener('gov-click', function () {
7389
+ document.getElementById('modal').setAttribute('open', 'true');
7390
+ });
7391
+ }, 500);
7392
+ this.innerHTML = `
7393
+ <h2>Modal</h2>
7394
+ <gov-button variant="primary" id="btn" wcag-label="Zobrazit formulář o výši dávky">Vyplnit formulář</gov-button>
6976
7395
  <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6977
7396
  <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6978
7397
  <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
@@ -6997,12 +7416,27 @@ class LoadingPage extends HTMLElement {
6997
7416
  <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6998
7417
  <p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
6999
7418
 
7000
- <gov-loading id="loading">Načítání</gov-loading>
7419
+ <gov-modal label="Podání daňového přiznání" id="modal" wcag-close-label="Zavřít modal žádosti o dávku">
7420
+ <gov-icon slot="icon" name="info"></gov-icon>
7421
+ <h3>Obsah modálního okna</h3>
7422
+ <p>Bude tvořen libovolnými komponentami</p>
7423
+ <h3>Obsah modálního okna</h3>
7424
+ <p>
7425
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, pulvinar vitae tempor at, laoreet quis mi. Vivamus vitae orci mi. Sed eget nisi convallis, condimentum diam a, fermentum risus. Proin vulputate pretium nisi sit amet commodo. Fusce ac magna velit. Maecenas sit amet sem quis arcu lobortis varius a non urna. Morbi ex neque, tempor bibendum sagittis vitae, vulputate ut nibh. Vestibulum sit amet pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut molestie varius nisi, sed mattis quam mollis vulputate. Morbi semper, purus sed ornare sodales, risus tellus porta massa, et eleifend erat diam vitae ex.
7426
+ </p>
7427
+ <p>
7428
+ Suspendisse quis justo nibh. Aenean id purus mattis, posuere urna a, blandit magna. Aenean a ante eleifend, ornare ipsum quis, bibendum mauris. Integer eget posuere sem, in tincidunt quam. Phasellus massa erat, sodales vel hendrerit vitae, ultrices quis dolor. Fusce id vestibulum sem, eu pretium sem. Praesent lacinia, odio non aliquam cursus, arcu ipsum ornare diam, vitae pharetra erat dui non velit. Quisque eu tempus mi. Nam a diam mauris. Quisque sollicitudin risus eu neque accumsan vulputate. Ut tincidunt metus eu nulla sodales, vitae dictum justo ornare. In tincidunt lobortis nunc, ac imperdiet odio condimentum nec. Ut aliquet pulvinar ligula vitae tincidunt. Phasellus egestas ut leo pretium laoreet. Fusce et vestibulum purus. Duis semper sem massa, non dignissim nunc aliquam sit amet.
7429
+ </p>
7430
+ <p>
7431
+ Praesent blandit mattis neque varius sagittis. Nulla ac scelerisque justo. Vestibulum aliquet blandit pharetra. Quisque lacus mi, tincidunt ac dui at, lobortis efficitur nisi. Fusce laoreet maximus purus, sit amet pulvinar mauris facilisis in. Integer fermentum elit eu aliquam sodales. Curabitur laoreet pharetra est rutrum posuere. In at eros tempus ex sodales facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras placerat dolor ac urna elementum facilisis. Aenean diam nibh, sollicitudin in porta sed, laoreet in nisl. Ut scelerisque tortor augue, vitae fermentum dui ornare non. Nulla fringilla libero non metus venenatis, eu maximus massa placerat. Praesent elementum convallis metus, vel iaculis sem pretium cursus.
7432
+ </p>
7433
+ <gov-button slot="footer" variant="primary" wcag-label="Vyplnit formulář o výši dávky">Vyplnit formulář</gov-button>
7434
+ </gov-modal>
7001
7435
  `;
7002
7436
  }
7003
7437
  }
7004
- if (customElements.get('loading-page') === undefined) {
7005
- customElements.define('loading-page', LoadingPage);
7438
+ if (customElements.get('modal-page') === undefined) {
7439
+ customElements.define('modal-page', ModalPage);
7006
7440
  }
7007
7441
 
7008
7442
  class NavPage extends HTMLElement {
@@ -7986,9 +8420,127 @@ if (customElements.get('tiles-page') === undefined) {
7986
8420
  customElements.define('tiles-page', TilesPage);
7987
8421
  }
7988
8422
 
8423
+ class ToastMessagePage extends HTMLElement {
8424
+ connectedCallback() {
8425
+ this.innerHTML = `
8426
+ <h2>
8427
+ Toast Message
8428
+ </h2>
8429
+ <gov-toast variant="success">
8430
+ <gov-icon name="check-lg" slot="icon"></gov-icon>
8431
+ <p>
8432
+ Vaše dokumenty byly úspěšně staženy.
8433
+ </p>
8434
+ </gov-toast>
8435
+ <br>
8436
+ <gov-toast variant="error" gravity="bottom" position="left">
8437
+ <gov-icon name="info" slot="icon"></gov-icon>
8438
+ <p>
8439
+ Není možné požadavek zpracovat z důvodu chyby serveru.
8440
+ </p>
8441
+ </gov-toast>
8442
+ <br>
8443
+ <gov-toast variant="warning" position="left">
8444
+ <gov-icon name="info" slot="icon"></gov-icon>
8445
+ <p>
8446
+ Žádost se nepodařilo odeslat, zkontrolujte nastavení.
8447
+ </p>
8448
+ </gov-toast>
8449
+ <br>
8450
+ <gov-toast variant="primary" position="center">
8451
+ <gov-icon name="info" slot="icon"></gov-icon>
8452
+ <p>
8453
+ Soubory jsou připraveny ke stažení.
8454
+ </p>
8455
+ </gov-toast>
8456
+ <br>
8457
+ <gov-toast variant="secondary" gravity="bottom" position="right">
8458
+ <gov-icon name="info" slot="icon"></gov-icon>
8459
+ <p>
8460
+ Vaše aplikace byla aktualizovaná na novou verzi!
8461
+ </p>
8462
+ </gov-toast>
8463
+ `;
8464
+ }
8465
+ }
8466
+ if (customElements.get('toast-message-page') === undefined) {
8467
+ customElements.define('toast-message-page', ToastMessagePage);
8468
+ }
8469
+
8470
+ class ToastMessageCountdownPage extends HTMLElement {
8471
+ connectedCallback() {
8472
+ this.innerHTML = `
8473
+ <h2>
8474
+ Toast Message Countdown
8475
+ </h2>
8476
+ <gov-toast variant="success" type="solid">
8477
+ <gov-icon name="check-lg" slot="icon"></gov-icon>
8478
+ <p>
8479
+ Vaše dokumenty byly úspěšně staženy.
8480
+ </p>
8481
+ </gov-toast>
8482
+ <br>
8483
+ <gov-toast variant="error" type="solid" gravity="bottom" position="left">
8484
+ <gov-icon name="info" slot="icon"></gov-icon>
8485
+ <p>
8486
+ Není možné požadavek zpracovat z důvodu chyby serveru.
8487
+ </p>
8488
+ </gov-toast>
8489
+ <br>
8490
+ <gov-toast variant="warning" type="solid" position="left">
8491
+ <gov-icon name="info" slot="icon"></gov-icon>
8492
+ <p>
8493
+ Žádost se nepodařilo odeslat, zkontrolujte nastavení.
8494
+ </p>
8495
+ </gov-toast>
8496
+ <br>
8497
+ <gov-toast variant="primary" type="solid" position="center">
8498
+ <gov-icon name="info" slot="icon"></gov-icon>
8499
+ <p>
8500
+ Soubory jsou připraveny ke stažení.
8501
+ </p>
8502
+ </gov-toast>
8503
+ <br>
8504
+ <gov-toast variant="secondary" type="solid" gravity="bottom" position="right">
8505
+ <gov-icon name="info" slot="icon"></gov-icon>
8506
+ <p>
8507
+ Vaše aplikace byla aktualizovaná na novou verzi!
8508
+ </p>
8509
+ </gov-toast>
8510
+ `;
8511
+ }
8512
+ }
8513
+ if (customElements.get('toast-message-countdown-page') === undefined) {
8514
+ customElements.define('toast-message-countdown-page', ToastMessageCountdownPage);
8515
+ }
8516
+
7989
8517
  class TooltipPage extends HTMLElement {
7990
8518
  connectedCallback() {
7991
8519
  this.innerHTML = `
8520
+ <div style="width: 500px; overflow: auto; height: 100px">
8521
+ <div style="width: 800px; display: flex; flex-direction: row; height: 100px; gap: 20px">
8522
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8523
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8524
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8525
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8526
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8527
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8528
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8529
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8530
+ <div style="width: 100px; border: 1px solid black; height: 100px"></div>
8531
+ <div style="width: 100px; border: 1px solid black; height: 100px">
8532
+ <gov-tooltip position="right" size="s" icon>
8533
+ <gov-icon name="info"></gov-icon>
8534
+ <gov-tooltip-content>
8535
+ <ul>
8536
+ <li>Toggler div, h1, h2 rozbije celou komponentu. </li>
8537
+ <li>Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome</li>
8538
+ </ul>
8539
+ </gov-tooltip-content>
8540
+ </gov-tooltip>
8541
+ </div>
8542
+ </div>
8543
+ </div>
7992
8544
  <p>
7993
8545
  Default scheme, size Small. Nelze umístit jako toggle element který je blokový - tj. div, h1, h2, atp.
7994
8546
  <gov-tooltip position="right" size="s" icon>
@@ -8198,100 +8750,6 @@ if (customElements.get('typography-page') === undefined) {
8198
8750
  customElements.define('typography-page', TypographyPage);
8199
8751
  }
8200
8752
 
8201
- class ToastMessagePage extends HTMLElement {
8202
- connectedCallback() {
8203
- this.innerHTML = `
8204
- <h2>
8205
- Toast Message
8206
- </h2>
8207
- <gov-toast variant="success">
8208
- <gov-icon name="check-lg" slot="icon"></gov-icon>
8209
- <p>
8210
- Vaše dokumenty byly úspěšně staženy.
8211
- </p>
8212
- </gov-toast>
8213
- <br>
8214
- <gov-toast variant="error" gravity="bottom" position="left">
8215
- <gov-icon name="info" slot="icon"></gov-icon>
8216
- <p>
8217
- Není možné požadavek zpracovat z důvodu chyby serveru.
8218
- </p>
8219
- </gov-toast>
8220
- <br>
8221
- <gov-toast variant="warning" position="left">
8222
- <gov-icon name="info" slot="icon"></gov-icon>
8223
- <p>
8224
- Žádost se nepodařilo odeslat, zkontrolujte nastavení.
8225
- </p>
8226
- </gov-toast>
8227
- <br>
8228
- <gov-toast variant="primary" position="center">
8229
- <gov-icon name="info" slot="icon"></gov-icon>
8230
- <p>
8231
- Soubory jsou připraveny ke stažení.
8232
- </p>
8233
- </gov-toast>
8234
- <br>
8235
- <gov-toast variant="secondary" gravity="bottom" position="right">
8236
- <gov-icon name="info" slot="icon"></gov-icon>
8237
- <p>
8238
- Vaše aplikace byla aktualizovaná na novou verzi!
8239
- </p>
8240
- </gov-toast>
8241
- `;
8242
- }
8243
- }
8244
- if (customElements.get('toast-message-page') === undefined) {
8245
- customElements.define('toast-message-page', ToastMessagePage);
8246
- }
8247
-
8248
- class ToastMessageCountdownPage extends HTMLElement {
8249
- connectedCallback() {
8250
- this.innerHTML = `
8251
- <h2>
8252
- Toast Message Countdown
8253
- </h2>
8254
- <gov-toast variant="success" type="solid">
8255
- <gov-icon name="check-lg" slot="icon"></gov-icon>
8256
- <p>
8257
- Vaše dokumenty byly úspěšně staženy.
8258
- </p>
8259
- </gov-toast>
8260
- <br>
8261
- <gov-toast variant="error" type="solid" gravity="bottom" position="left">
8262
- <gov-icon name="info" slot="icon"></gov-icon>
8263
- <p>
8264
- Není možné požadavek zpracovat z důvodu chyby serveru.
8265
- </p>
8266
- </gov-toast>
8267
- <br>
8268
- <gov-toast variant="warning" type="solid" position="left">
8269
- <gov-icon name="info" slot="icon"></gov-icon>
8270
- <p>
8271
- Žádost se nepodařilo odeslat, zkontrolujte nastavení.
8272
- </p>
8273
- </gov-toast>
8274
- <br>
8275
- <gov-toast variant="primary" type="solid" position="center">
8276
- <gov-icon name="info" slot="icon"></gov-icon>
8277
- <p>
8278
- Soubory jsou připraveny ke stažení.
8279
- </p>
8280
- </gov-toast>
8281
- <br>
8282
- <gov-toast variant="secondary" type="solid" gravity="bottom" position="right">
8283
- <gov-icon name="info" slot="icon"></gov-icon>
8284
- <p>
8285
- Vaše aplikace byla aktualizovaná na novou verzi!
8286
- </p>
8287
- </gov-toast>
8288
- `;
8289
- }
8290
- }
8291
- if (customElements.get('toast-message-countdown-page') === undefined) {
8292
- customElements.define('toast-message-countdown-page', ToastMessageCountdownPage);
8293
- }
8294
-
8295
8753
  class WizzardPage extends HTMLElement {
8296
8754
  connectedCallback() {
8297
8755
  this.innerHTML = `
@@ -8401,6 +8859,7 @@ const GovApp = class {
8401
8859
  { path: '/message', component: 'message-page' },
8402
8860
  { path: '/cookiebar', component: 'cookiebar-page' },
8403
8861
  { path: '/container', component: 'container-page' },
8862
+ { path: '/control-group', component: 'control-group-page' },
8404
8863
  { path: '/empty', component: 'empty-page' },
8405
8864
  { path: '/error', component: 'error-page' },
8406
8865
  { path: '/forms', component: 'forms-page' },