@public-ui/components 1.1.10-rc.11 → 1.1.10-rc.13

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 (318) hide show
  1. package/custom-elements.json +70 -12
  2. package/dist/cjs/{controller-75951fbb.js → controller-61e40173.js} +1 -1
  3. package/dist/cjs/controller-7a0bcadc.js +4 -0
  4. package/dist/cjs/{controller-a5ac2e29.js → controller-99a9ae13.js} +1 -1
  5. package/dist/cjs/{controller-5d7d9001.js → controller-e05fa91b.js} +1 -1
  6. package/dist/cjs/icon-d1b56c51.js +4 -0
  7. package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
  8. package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
  9. package/dist/cjs/kol-alert.cjs.entry.js +1 -1
  10. package/dist/cjs/kol-badge.cjs.entry.js +1 -1
  11. package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
  12. package/dist/cjs/kol-button-group.cjs.entry.js +1 -1
  13. package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
  14. package/dist/cjs/kol-button-wc_3.cjs.entry.js +1 -1
  15. package/dist/cjs/kol-button.cjs.entry.js +1 -1
  16. package/dist/cjs/kol-card.cjs.entry.js +1 -1
  17. package/dist/cjs/kol-color.cjs.entry.js +1 -1
  18. package/dist/cjs/kol-details.cjs.entry.js +1 -1
  19. package/dist/cjs/kol-heading.cjs.entry.js +1 -1
  20. package/dist/cjs/kol-icon.cjs.entry.js +1 -1
  21. package/dist/cjs/kol-indented-text.cjs.entry.js +1 -1
  22. package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
  23. package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
  24. package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
  25. package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
  26. package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
  27. package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
  28. package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
  29. package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
  30. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  31. package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
  32. package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
  33. package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
  34. package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
  35. package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
  36. package/dist/cjs/kol-link.cjs.entry.js +1 -1
  37. package/dist/cjs/kol-logo.cjs.entry.js +1 -1
  38. package/dist/cjs/kol-modal.cjs.entry.js +1 -1
  39. package/dist/cjs/kol-nav.cjs.entry.js +1 -1
  40. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  41. package/dist/cjs/kol-select.cjs.entry.js +1 -1
  42. package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
  43. package/dist/cjs/kol-span-wc.cjs.entry.js +4 -0
  44. package/dist/cjs/kol-span.cjs.entry.js +1 -1
  45. package/dist/cjs/kol-spin.cjs.entry.js +1 -1
  46. package/dist/cjs/kol-table.cjs.entry.js +1 -1
  47. package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
  48. package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
  49. package/dist/cjs/kol-toast.cjs.entry.js +1 -1
  50. package/dist/cjs/kol-tooltip.cjs.entry.js +1 -1
  51. package/dist/cjs/kol-version.cjs.entry.js +1 -1
  52. package/dist/cjs/kolibri.cjs.js +1 -1
  53. package/dist/cjs/loader.cjs.js +1 -1
  54. package/dist/cjs/tab-index-7dd665c2.js +4 -0
  55. package/dist/cjs/validator-3a019e4f.js +4 -0
  56. package/dist/components/component.js +1 -1
  57. package/dist/components/component10.js +1 -1
  58. package/dist/components/component11.js +1 -1
  59. package/dist/components/component12.js +1 -1
  60. package/dist/components/component13.js +1 -1
  61. package/dist/components/component14.js +1 -1
  62. package/dist/components/component15.js +1 -1
  63. package/dist/components/component16.js +1 -1
  64. package/dist/components/component2.js +1 -1
  65. package/dist/components/component3.js +1 -1
  66. package/dist/components/component4.js +1 -1
  67. package/dist/components/component6.js +1 -1
  68. package/dist/components/component8.js +1 -1
  69. package/dist/components/component9.js +1 -1
  70. package/dist/components/controller.js +1 -1
  71. package/dist/components/controller2.js +1 -1
  72. package/dist/components/controller3.js +1 -1
  73. package/dist/components/controller4.js +1 -1
  74. package/dist/components/controller5.js +1 -1
  75. package/dist/components/devtools.js +1 -1
  76. package/dist/components/index.d.ts +2 -1
  77. package/dist/components/index.js +1 -1
  78. package/dist/components/kol-abbr.js +1 -1
  79. package/dist/components/kol-accordion.js +1 -1
  80. package/dist/components/kol-breadcrumb.js +1 -1
  81. package/dist/components/kol-button-link.js +1 -1
  82. package/dist/components/kol-card.js +1 -1
  83. package/dist/components/kol-color.js +1 -1
  84. package/dist/components/kol-details.js +1 -1
  85. package/dist/components/kol-heading.js +1 -1
  86. package/dist/components/kol-input-adapter-leanup.js +1 -1
  87. package/dist/components/kol-input-checkbox.js +1 -1
  88. package/dist/components/kol-input-color.js +1 -1
  89. package/dist/components/kol-input-date.js +1 -1
  90. package/dist/components/kol-input-email.js +1 -1
  91. package/dist/components/kol-input-file.js +1 -1
  92. package/dist/components/kol-input-password.js +1 -1
  93. package/dist/components/kol-input-radio-group.js +1 -1
  94. package/dist/components/kol-input-range.js +1 -1
  95. package/dist/components/kol-input-text.js +1 -1
  96. package/dist/components/kol-kolibri.js +1 -1
  97. package/dist/components/kol-link-button.js +1 -1
  98. package/dist/components/kol-link-group.js +1 -1
  99. package/dist/components/kol-logo.js +1 -1
  100. package/dist/components/kol-modal.js +1 -1
  101. package/dist/components/kol-nav.js +1 -1
  102. package/dist/components/kol-skip-nav.js +1 -1
  103. package/dist/components/kol-span-wc.d.ts +11 -0
  104. package/dist/components/kol-span-wc.js +4 -0
  105. package/dist/components/kol-span.js +1 -1
  106. package/dist/components/kol-spin.js +1 -1
  107. package/dist/components/kol-table.js +1 -1
  108. package/dist/components/kol-tabs.js +1 -1
  109. package/dist/components/kol-textarea.js +1 -1
  110. package/dist/components/kol-toast.js +1 -1
  111. package/dist/components/kol-version.js +1 -1
  112. package/dist/components/prop.validators.js +1 -1
  113. package/dist/components/shadow.js +1 -1
  114. package/dist/components/shadow2.js +1 -1
  115. package/dist/components/tab-index.js +4 -0
  116. package/dist/custom-elements/index.d.ts +6 -0
  117. package/dist/custom-elements/index.js +1 -1
  118. package/dist/esm/controller-5191c911.js +4 -0
  119. package/dist/esm/{controller-9ef3b1e3.js → controller-71b1c941.js} +1 -1
  120. package/dist/esm/{controller-f00b88d4.js → controller-79bf4f2f.js} +1 -1
  121. package/dist/esm/{controller-d846a1e7.js → controller-86a4dd7b.js} +1 -1
  122. package/dist/esm/icon-7cfc4157.js +4 -0
  123. package/dist/esm/kol-abbr.entry.js +1 -1
  124. package/dist/esm/kol-accordion.entry.js +1 -1
  125. package/dist/esm/kol-alert.entry.js +1 -1
  126. package/dist/esm/kol-badge.entry.js +1 -1
  127. package/dist/esm/kol-breadcrumb.entry.js +1 -1
  128. package/dist/esm/kol-button-group.entry.js +1 -1
  129. package/dist/esm/kol-button-link.entry.js +1 -1
  130. package/dist/esm/kol-button-wc_3.entry.js +1 -1
  131. package/dist/esm/kol-button.entry.js +1 -1
  132. package/dist/esm/kol-card.entry.js +1 -1
  133. package/dist/esm/kol-color.entry.js +1 -1
  134. package/dist/esm/kol-details.entry.js +1 -1
  135. package/dist/esm/kol-heading.entry.js +1 -1
  136. package/dist/esm/kol-icon.entry.js +1 -1
  137. package/dist/esm/kol-indented-text.entry.js +1 -1
  138. package/dist/esm/kol-input-checkbox.entry.js +1 -1
  139. package/dist/esm/kol-input-color.entry.js +1 -1
  140. package/dist/esm/kol-input-date.entry.js +1 -1
  141. package/dist/esm/kol-input-email.entry.js +1 -1
  142. package/dist/esm/kol-input-file.entry.js +1 -1
  143. package/dist/esm/kol-input-number.entry.js +1 -1
  144. package/dist/esm/kol-input-password.entry.js +1 -1
  145. package/dist/esm/kol-input-radio.entry.js +1 -1
  146. package/dist/esm/kol-input-range.entry.js +1 -1
  147. package/dist/esm/kol-input-text.entry.js +1 -1
  148. package/dist/esm/kol-kolibri.entry.js +1 -1
  149. package/dist/esm/kol-link-button.entry.js +1 -1
  150. package/dist/esm/kol-link-group.entry.js +1 -1
  151. package/dist/esm/kol-link-wc.entry.js +1 -1
  152. package/dist/esm/kol-link.entry.js +1 -1
  153. package/dist/esm/kol-logo.entry.js +1 -1
  154. package/dist/esm/kol-modal.entry.js +1 -1
  155. package/dist/esm/kol-nav.entry.js +1 -1
  156. package/dist/esm/kol-pagination.entry.js +1 -1
  157. package/dist/esm/kol-select.entry.js +1 -1
  158. package/dist/esm/kol-skip-nav.entry.js +1 -1
  159. package/dist/esm/kol-span-wc.entry.js +4 -0
  160. package/dist/esm/kol-span.entry.js +1 -1
  161. package/dist/esm/kol-spin.entry.js +1 -1
  162. package/dist/esm/kol-table.entry.js +1 -1
  163. package/dist/esm/kol-tabs.entry.js +1 -1
  164. package/dist/esm/kol-textarea.entry.js +1 -1
  165. package/dist/esm/kol-toast.entry.js +1 -1
  166. package/dist/esm/kol-tooltip.entry.js +1 -1
  167. package/dist/esm/kol-version.entry.js +1 -1
  168. package/dist/esm/kolibri.js +1 -1
  169. package/dist/esm/loader.js +1 -1
  170. package/dist/esm/tab-index-69ee0c1b.js +4 -0
  171. package/dist/esm/validator-05e130c7.js +4 -0
  172. package/dist/kolibri/assets/tabs-simulation.js +1 -1
  173. package/dist/kolibri/controller-5191c911.js +4 -0
  174. package/{www/build/controller-9ef3b1e3.js → dist/kolibri/controller-71b1c941.js} +1 -1
  175. package/dist/kolibri/{controller-f00b88d4.js → controller-79bf4f2f.js} +1 -1
  176. package/{www/build/controller-d846a1e7.js → dist/kolibri/controller-86a4dd7b.js} +1 -1
  177. package/dist/kolibri/icon-7cfc4157.js +4 -0
  178. package/dist/kolibri/kol-abbr.entry.js +1 -1
  179. package/dist/kolibri/kol-accordion.entry.js +1 -1
  180. package/dist/kolibri/kol-alert.entry.js +1 -1
  181. package/dist/kolibri/kol-badge.entry.js +1 -1
  182. package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
  183. package/dist/kolibri/kol-button-group.entry.js +1 -1
  184. package/dist/kolibri/kol-button-link.entry.js +1 -1
  185. package/dist/kolibri/kol-button-wc_3.entry.js +1 -1
  186. package/dist/kolibri/kol-button.entry.js +1 -1
  187. package/dist/kolibri/kol-card.entry.js +1 -1
  188. package/dist/kolibri/kol-color.entry.js +1 -1
  189. package/dist/kolibri/kol-details.entry.js +1 -1
  190. package/dist/kolibri/kol-heading.entry.js +1 -1
  191. package/dist/kolibri/kol-icon.entry.js +1 -1
  192. package/dist/kolibri/kol-indented-text.entry.js +1 -1
  193. package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
  194. package/dist/kolibri/kol-input-color.entry.js +1 -1
  195. package/dist/kolibri/kol-input-date.entry.js +1 -1
  196. package/dist/kolibri/kol-input-email.entry.js +1 -1
  197. package/dist/kolibri/kol-input-file.entry.js +1 -1
  198. package/dist/kolibri/kol-input-number.entry.js +1 -1
  199. package/dist/kolibri/kol-input-password.entry.js +1 -1
  200. package/dist/kolibri/kol-input-radio.entry.js +1 -1
  201. package/dist/kolibri/kol-input-range.entry.js +1 -1
  202. package/dist/kolibri/kol-input-text.entry.js +1 -1
  203. package/dist/kolibri/kol-kolibri.entry.js +1 -1
  204. package/dist/kolibri/kol-link-button.entry.js +1 -1
  205. package/dist/kolibri/kol-link-group.entry.js +1 -1
  206. package/dist/kolibri/kol-link-wc.entry.js +1 -1
  207. package/dist/kolibri/kol-link.entry.js +1 -1
  208. package/dist/kolibri/kol-logo.entry.js +1 -1
  209. package/dist/kolibri/kol-modal.entry.js +1 -1
  210. package/dist/kolibri/kol-nav.entry.js +1 -1
  211. package/dist/kolibri/kol-pagination.entry.js +1 -1
  212. package/dist/kolibri/kol-select.entry.js +1 -1
  213. package/dist/kolibri/kol-skip-nav.entry.js +1 -1
  214. package/dist/kolibri/kol-span-wc.entry.js +4 -0
  215. package/dist/kolibri/kol-span.entry.js +1 -1
  216. package/dist/kolibri/kol-spin.entry.js +1 -1
  217. package/dist/kolibri/kol-table.entry.js +1 -1
  218. package/dist/kolibri/kol-tabs.entry.js +1 -1
  219. package/dist/kolibri/kol-textarea.entry.js +1 -1
  220. package/dist/kolibri/kol-toast.entry.js +1 -1
  221. package/dist/kolibri/kol-tooltip.entry.js +1 -1
  222. package/dist/kolibri/kol-version.entry.js +1 -1
  223. package/dist/kolibri/kolibri.esm.js +1 -1
  224. package/dist/kolibri/tab-index-69ee0c1b.js +4 -0
  225. package/dist/kolibri/validator-05e130c7.js +4 -0
  226. package/dist/types/components/@deprecated/input/controller.d.ts +2 -2
  227. package/dist/types/components/badge/component.d.ts +6 -16
  228. package/dist/types/components/button/component.d.ts +4 -1
  229. package/dist/types/components/button/shadow.d.ts +3 -1
  230. package/dist/types/components/button-link/component.d.ts +4 -1
  231. package/dist/types/components/component-list.d.ts +2 -2
  232. package/dist/types/components/link/component.d.ts +4 -1
  233. package/dist/types/components/link/shadow.d.ts +3 -1
  234. package/dist/types/components/link-button/component.d.ts +6 -1
  235. package/dist/types/components/span/component.d.ts +15 -18
  236. package/dist/types/components/span/shadow.d.ts +10 -0
  237. package/dist/types/components/span/test/html.mock.d.ts +7 -0
  238. package/dist/types/components/tabs/component.d.ts +3 -5
  239. package/dist/types/components.d.ts +127 -36
  240. package/dist/types/types/button-link.d.ts +14 -6
  241. package/dist/types/types/icon.d.ts +8 -7
  242. package/dist/types/utils/prop.validators.d.ts +1 -1
  243. package/dist/types/utils/testing.d.ts +2 -0
  244. package/dist/types/utils/validator.d.ts +1 -0
  245. package/dist/types/utils/validators/icon.d.ts +6 -0
  246. package/dist/types/utils/validators/tab-index.d.ts +2 -0
  247. package/jest-test-results.json +1 -1
  248. package/package.json +1 -1
  249. package/vscode-custom-data.json +2343 -2293
  250. package/www/assets/tabs-simulation.js +1 -1
  251. package/www/build/controller-5191c911.js +4 -0
  252. package/{dist/kolibri/controller-9ef3b1e3.js → www/build/controller-71b1c941.js} +1 -1
  253. package/www/build/{controller-f00b88d4.js → controller-79bf4f2f.js} +1 -1
  254. package/{dist/kolibri/controller-d846a1e7.js → www/build/controller-86a4dd7b.js} +1 -1
  255. package/www/build/icon-7cfc4157.js +4 -0
  256. package/www/build/kol-abbr.entry.js +1 -1
  257. package/www/build/kol-accordion.entry.js +1 -1
  258. package/www/build/kol-alert.entry.js +1 -1
  259. package/www/build/kol-badge.entry.js +1 -1
  260. package/www/build/kol-breadcrumb.entry.js +1 -1
  261. package/www/build/kol-button-group.entry.js +1 -1
  262. package/www/build/kol-button-link.entry.js +1 -1
  263. package/www/build/kol-button-wc_3.entry.js +1 -1
  264. package/www/build/kol-button.entry.js +1 -1
  265. package/www/build/kol-card.entry.js +1 -1
  266. package/www/build/kol-color.entry.js +1 -1
  267. package/www/build/kol-details.entry.js +1 -1
  268. package/www/build/kol-heading.entry.js +1 -1
  269. package/www/build/kol-icon.entry.js +1 -1
  270. package/www/build/kol-indented-text.entry.js +1 -1
  271. package/www/build/kol-input-checkbox.entry.js +1 -1
  272. package/www/build/kol-input-color.entry.js +1 -1
  273. package/www/build/kol-input-date.entry.js +1 -1
  274. package/www/build/kol-input-email.entry.js +1 -1
  275. package/www/build/kol-input-file.entry.js +1 -1
  276. package/www/build/kol-input-number.entry.js +1 -1
  277. package/www/build/kol-input-password.entry.js +1 -1
  278. package/www/build/kol-input-radio.entry.js +1 -1
  279. package/www/build/kol-input-range.entry.js +1 -1
  280. package/www/build/kol-input-text.entry.js +1 -1
  281. package/www/build/kol-kolibri.entry.js +1 -1
  282. package/www/build/kol-link-button.entry.js +1 -1
  283. package/www/build/kol-link-group.entry.js +1 -1
  284. package/www/build/kol-link-wc.entry.js +1 -1
  285. package/www/build/kol-link.entry.js +1 -1
  286. package/www/build/kol-logo.entry.js +1 -1
  287. package/www/build/kol-modal.entry.js +1 -1
  288. package/www/build/kol-nav.entry.js +1 -1
  289. package/www/build/kol-pagination.entry.js +1 -1
  290. package/www/build/kol-select.entry.js +1 -1
  291. package/www/build/kol-skip-nav.entry.js +1 -1
  292. package/www/build/kol-span-wc.entry.js +4 -0
  293. package/www/build/kol-span.entry.js +1 -1
  294. package/www/build/kol-spin.entry.js +1 -1
  295. package/www/build/kol-table.entry.js +1 -1
  296. package/www/build/kol-tabs.entry.js +1 -1
  297. package/www/build/kol-textarea.entry.js +1 -1
  298. package/www/build/kol-toast.entry.js +1 -1
  299. package/www/build/kol-tooltip.entry.js +1 -1
  300. package/www/build/kol-version.entry.js +1 -1
  301. package/www/build/kolibri.esm.js +1 -1
  302. package/www/build/tab-index-69ee0c1b.js +4 -0
  303. package/www/build/validator-05e130c7.js +4 -0
  304. package/www/index.html +15 -3
  305. package/dist/cjs/controller-97800130.js +0 -4
  306. package/dist/cjs/icon-0741e060.js +0 -4
  307. package/dist/cjs/validator-a391018d.js +0 -4
  308. package/dist/components/controller6.js +0 -4
  309. package/dist/components/icon.js +0 -4
  310. package/dist/esm/controller-2882c7d6.js +0 -4
  311. package/dist/esm/icon-589227b1.js +0 -4
  312. package/dist/esm/validator-985dcb65.js +0 -4
  313. package/dist/kolibri/controller-2882c7d6.js +0 -4
  314. package/dist/kolibri/icon-589227b1.js +0 -4
  315. package/dist/kolibri/validator-985dcb65.js +0 -4
  316. package/www/build/controller-2882c7d6.js +0 -4
  317. package/www/build/icon-589227b1.js +0 -4
  318. package/www/build/validator-985dcb65.js +0 -4
package/www/index.html CHANGED
@@ -1,4 +1,16 @@
1
- <!doctype html><html dir="ltr" lang="de"><head> <meta charset="utf-8"> <title>BIK BITV-Test | KoliBri</title> <meta name="description" content="Auf der Seite werden alle KoliBri-Komponenten für den BIK BITV-Test dargestellt."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.jsdelivr.net " /> --> <script type="module" src="build/kolibri.esm.js"></script> <script nomodule="" src="build/kolibri.js"></script> <link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="stylesheet" href="assets/fontawesome-free/v5/css/all.css"> <link rel="stylesheet" href="assets/fontawesome-free/v6/css/all.css"> <link rel="stylesheet" href="assets/icofont/icofont.css"> <link rel="stylesheet" href="assets/bund/bund.css"> <link rel="stylesheet" href="assets/roboto/roboto.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="assets/themes/bamf.css"> <link rel="stylesheet" href="assets/themes/bmf.css"> <link rel="stylesheet" href="assets/themes/bzst.css"> <link rel="stylesheet" href="assets/themes/itzbund.css"> <link rel="stylesheet" href="assets/themes/mapz.css"> <link rel="stylesheet" href="assets/style.css"> <meta name="robots" content="noindex"> <meta name="kolibri" content="dev-mode=true,color-contrast-analysis=false"> </head> <body data-theme="mapz" data-theme-cache="true" data-theme-reset="true"> <header class="container"> <!-- <kol-all></kol-all> --> <div class="row"> <div class="col-12"> <kol-kolibri style="display: block; width: 150px;"></kol-kolibri> </div> <div class="col-12"> <kol-heading>BIK BITV-Test</kol-heading> </div> <div class="gap-2 col-12 d-flex"> <kol-version _version="1.1.10-rc.11"></kol-version> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test"></kol-badge> <kol-badge _color="#f0f" _label="Test"></kol-badge> <kol-badge _color="#0bf" _label="Test"></kol-badge> <kol-badge _label="Content-Security-Policy" _icon="check" _color="#300"></kol-badge> </div> <div class="col-12"> <kol-details _summary="Sternchenhinweise" _open=""> <p>* Gibt an, dass der BIK BITV-Test noch Verbesserungsvorschläge beinhaltet.</p> </kol-details> </div> <p> Bookmarklet: <a href="javascript:(function(){var d=document,id='phltsbkmklt',el=d.getElementById(id),f=d.querySelectorAll('iframe'),i=0,l=f.length;if(el){function removeFromShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.getElementById(id).remove();removeFromShadows(el.shadowRoot);}}}el.remove();if(l){for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementById(id).remove();removeFromShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}}removeFromShadows(d);}else{s=d.createElement('style');s.id=id;s.appendChild(d.createTextNode('*{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important;}p{margin-bottom:2em !important;}'));function applyToShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.appendChild(s.cloneNode(true));applyToShadows(el.shadowRoot);}}}d.getElementsByTagName('head')[0].appendChild(s);for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementsByTagName('head')[0].appendChild(s.cloneNode(true));applyToShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}applyToShadows(d);}})();"> Text Spacing </a> </p> <div class="py-2 col-12"> <kol-alert _type="info" _level="2" _heading="Hinweise an das A11y-Test-Team" class="pb-2"> <p>Liebe Tester:innen bitte lest vor dem 9. BIK BITV-Test folgende Hinweise.</p> <kol-heading _level="3">Refactoring Eingabefelder</kol-heading> <p> <kol-details _summary="Beschreibung"> Wir haben ein umfangreiches Refactoring an den Eingabefeldern vorgenommen, um die Developer Experience deutlich zu verbessern. Hierzu wurde alle
1
+ <!doctype html><html dir="ltr" lang="de"><head> <script type="module">
2
+ import { register } from 'https://esm.sh/@public-ui/core@1.1.10-rc.13';
3
+ import { BMF } from 'https://esm.sh/@public-ui/themes@1.1.10-rc.13';
4
+ import { KoliBriDevHelper } from 'https://esm.sh/@public-ui/components@1.1.10-rc.13';
5
+ register([BMF], [])
6
+ .then(() => {
7
+ KoliBriDevHelper.patchTheme('bmf', {
8
+ 'KOL-LINK-BUTTON':
9
+ ':host {display: inline-block;}/*-----------*/a {min-width: 44px;min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;text-decoration: none !important;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}a > kol-span > span > span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}a:disabled {cursor: not-allowed;opacity: 0.5;}a.primary,a.primary:disabled:hover {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}a.secondary,a.secondary:disabled:hover,a.normal,a.normal:disabled:hover {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}a.danger,a.danger:disabled:hover {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}a.ghost,a.ghost:disabled:hover {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);}/*-----------*/a.primary:active,a.primary:hover,a.secondary:active,a.secondary:hover,a.normal:active,a.normal:hover,a.danger:active,a.danger:hover,a.ghost:active,a.ghost:hover {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}a.danger:active,a.danger:hover {background-color: var(--color-crimson);border-color: var(--color-crimson);}a:disabled:hover,a:focus:hover {box-shadow: none;}a.primary:active,a.secondary:active,a.normal:active,a.danger:active,a.ghost:active {border-color: var(--color-white);box-shadow: none;outline: none;}a > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}a.icon-only {padding: 8px;}a.icon-only kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}a.loading kol-icon {animation: spin 5s infinite linear;}',
10
+ });
11
+ })
12
+ .catch(console.warn);
13
+ </script> <meta charset="utf-8"> <title>BIK BITV-Test | KoliBri</title> <meta name="description" content="Auf der Seite werden alle KoliBri-Komponenten für den BIK BITV-Test dargestellt."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.jsdelivr.net " /> --> <script type="module" src="build/kolibri.esm.js"></script> <script nomodule="" src="build/kolibri.js"></script> <link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="stylesheet" href="assets/fontawesome-free/v5/css/all.css"> <link rel="stylesheet" href="assets/fontawesome-free/v6/css/all.css"> <link rel="stylesheet" href="assets/icofont/icofont.css"> <link rel="stylesheet" href="assets/bund/bund.css"> <link rel="stylesheet" href="assets/roboto/roboto.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="assets/themes/bamf.css"> <link rel="stylesheet" href="assets/themes/bmf.css"> <link rel="stylesheet" href="assets/themes/bzst.css"> <link rel="stylesheet" href="assets/themes/itzbund.css"> <link rel="stylesheet" href="assets/themes/mapz.css"> <link rel="stylesheet" href="assets/style.css"> <meta name="robots" content="noindex"> <meta name="kolibri" content="dev-mode=true,color-contrast-analysis=false"> </head> <body data-theme="mapz" data-theme-cache="true" data-theme-reset="true"> <header class="container"> <!-- <kol-all></kol-all> --> <div class="row"> <div class="col-12"> <kol-kolibri style="display: block; width: 150px;"></kol-kolibri> </div> <div class="col-12"> <kol-heading>BIK BITV-Test</kol-heading> </div> <div class="gap-2 col-12 d-flex"> <kol-version _version="1.1.10-rc.13"></kol-version> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test"></kol-badge> <kol-badge _color="#f0f" _label="Test"></kol-badge> <kol-badge _color="#0bf" _label="Test"></kol-badge> <kol-badge _label="Content-Security-Policy" _icon="check" _color="#300"></kol-badge> </div> <div class="col-12"> <kol-details _summary="Sternchenhinweise" _open=""> <p>* Gibt an, dass der BIK BITV-Test noch Verbesserungsvorschläge beinhaltet.</p> </kol-details> </div> <p> Bookmarklet: <a href="javascript:(function(){var d=document,id='phltsbkmklt',el=d.getElementById(id),f=d.querySelectorAll('iframe'),i=0,l=f.length;if(el){function removeFromShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.getElementById(id).remove();removeFromShadows(el.shadowRoot);}}}el.remove();if(l){for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementById(id).remove();removeFromShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}}removeFromShadows(d);}else{s=d.createElement('style');s.id=id;s.appendChild(d.createTextNode('*{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important;}p{margin-bottom:2em !important;}'));function applyToShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.appendChild(s.cloneNode(true));applyToShadows(el.shadowRoot);}}}d.getElementsByTagName('head')[0].appendChild(s);for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementsByTagName('head')[0].appendChild(s.cloneNode(true));applyToShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}applyToShadows(d);}})();"> Text Spacing </a> </p> <div class="py-2 col-12"> <kol-alert _type="info" _level="2" _heading="Hinweise an das A11y-Test-Team" class="pb-2"> <p>Liebe Tester:innen bitte lest vor dem 9. BIK BITV-Test folgende Hinweise.</p> <kol-heading _level="3">Refactoring Eingabefelder</kol-heading> <p> <kol-details _summary="Beschreibung"> Wir haben ein umfangreiches Refactoring an den Eingabefeldern vorgenommen, um die Developer Experience deutlich zu verbessern. Hierzu wurde alle
2
14
  Eingabefeldtypen gemäß der <kol-link _href="https://www.w3.org/TR/2010/WD-html5-20101019/the-input-element.html" _target="w3c"> W3C-Klassifizierung</kol-link> separiert.<br> Durch die Überarbeitung der Eingabefelder wurden jetzt auch noch mehr Eingabefeldtypen umgesetzt: <code>checkbox</code>, <code>color</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>file</code>, <code>month</code>, <code>number</code>, <code>radio, password</code>, <code>range</code>, <code>search</code>, <code>text</code>, <code>tel</code>, <code>time</code>, <code>url</code> und <code>week</code> <br> Darüber hinaus wurde das Label eines Eingabefeldes flexibler gemacht. Es kann jetzt im Label individuelles <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> verwendet werden. Wodurch auch Links oder andere Anforderungen am Label umgesetzt
3
15
  werden können. </kol-details> </p> <kol-heading _level="3">Refactoring Icon</kol-heading> <p> <kol-details _summary="Beschreibung"> Wir haben festgestellt, dass wir mit einer einzigen Icon-Font nicht flexibel genug aufgestellt sind. Daher haben wir eine noch generischere
4
16
  Icon-Komponente umgesetzt, der nun egal ist, welche Icon-Font es verwendet. Es stellt, aber unabhängig davon weiterhin sicher, dass Icons für
@@ -32,7 +44,7 @@
32
44
  sint modi possimus. </p> </kol-accordion> <kol-accordion class="bordered" _heading="Accordion #3 Header" _level="3"> <p slot="header"> In den Accordion-Header kann auch noch was komplexeres eingefügt werden. <kol-button class="not-used" _icon="ui-add" _label="Hinzufügen" _variant="secondary"></kol-button> </p> <p slot="content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum
33
45
  earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
34
46
  elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
35
- molestias voluptas reiciendis. </p> </kol-accordion> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Alert</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-alert _heading="Nachricht" _level="2">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert>Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning">Hier wird die Warnung kurz beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _level="2" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3" _variant="card">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4" _variant="card">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5" _variant="card"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6" _variant="card"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _variant="card">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info" _variant="card">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success" _variant="card">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning" _variant="card">Hier wird die Warnung kurz beschrieben.</kol-alert> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Badge</kol-heading> <kol-details _summary="Erklärung zum Color-Contrast-Feature">Die folgende Komponente managed die Schriftfarbe in Abhängigkeit zur Hintergrundfarbe automatisch.</kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="3">Heller Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#c1ca31"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#f7bb3d"></kol-badge> <kol-badge _label="Und ich!" _color="#80cdec"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#f9e03a"></kol-badge> </div> <kol-heading _level="3">Dunkler Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#000"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#94083c"></kol-badge> <kol-badge _label="Und ich!" _color="#0c247d"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#030"></kol-badge> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Breadcrumb</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-breadcrumb _aria-label="Breadcrumb aus Text-Links" _links="[{'_label':'Startseite','_href':'#/'},{'_label':'Unterseite der Startseite','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- oder Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true,'_href':'#/'},{'_label':'Unterseite der Startseite mit sehr langem Link-Test','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_href':'#/'},{'_label':'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true, '_href':'#/'}]"></kol-breadcrumb> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Button</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-indented-text>Der folgende Schalter hat ein abweichendes Aria-Label:</kol-indented-text> <kol-button class="not-used" _aria-label="Ich bin ein abweichendes Label" _variant="primary" _label="Primary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'icofont-arrow-up'},'right': {'icon': 'icofont-arrow-right'},'bottom': {'icon': 'icofont-arrow-down'},'left': {'icon': 'icofont-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="ui-play" _label="Martin"></kol-button> <kol-button class="not-used" _icon="home" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _icon="home" _icon-only="" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _variant="secondary" _label="Secondary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="normal" _label="Normal-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="danger" _label="Danger-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="ghost" _label="Ghost-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _disabled="true" _label="Disabled-Schaltfläche"></kol-button> <kol-button class="not-used" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-80" _icon="ui-add" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-60" _icon="ui-add" _icon-align="right" _label="Hinzufügen"></kol-button> <kol-button class="not-used" _icon="ui-add" _icon-align="right" _icon-only="true" _label="Hinzufügen (nur Icon)"></kol-button> <kol-button class="not-used" _label="ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen"></kol-button> </div> <div class="gap-2 py-2 col-12 d-grid"> <div> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-60"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">ButtonGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-button-group> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-60"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Card</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-card _headline="Mit h1-Überschrift und Footer" _has-footer=""> <p slot="header">Test</p> <p slot="content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum
47
+ molestias voluptas reiciendis. </p> </kol-accordion> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Alert</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-alert _heading="Nachricht" _level="2">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert>Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning">Hier wird die Warnung kurz beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _level="2" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3" _variant="card">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4" _variant="card">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5" _variant="card"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6" _variant="card"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _variant="card">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info" _variant="card">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success" _variant="card">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning" _variant="card">Hier wird die Warnung kurz beschrieben.</kol-alert> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Badge</kol-heading> <kol-details _summary="Erklärung zum Color-Contrast-Feature">Die folgende Komponente managed die Schriftfarbe in Abhängigkeit zur Hintergrundfarbe automatisch.</kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="3">Heller Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#c1ca31"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#f7bb3d"></kol-badge> <kol-badge _label="Und ich!" _color="#80cdec"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#f9e03a"></kol-badge> </div> <kol-heading _level="3">Dunkler Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#000"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#94083c"></kol-badge> <kol-badge _label="Und ich!" _color="#0c247d"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#030"></kol-badge> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Breadcrumb</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-breadcrumb _aria-label="Breadcrumb aus Text-Links" _links="[{'_label':'Startseite','_href':'#/'},{'_label':'Unterseite der Startseite','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- oder Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true,'_href':'#/'},{'_label':'Unterseite der Startseite mit sehr langem Link-Test','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_href':'#/'},{'_label':'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true, '_href':'#/'}]"></kol-breadcrumb> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Button</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-indented-text>Der folgende Schalter hat ein abweichendes Aria-Label:</kol-indented-text> <kol-button class="not-used" _aria-label="Ich bin ein abweichendes Label" _variant="primary" _label="Primary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'icofont-arrow-up'},'right': {'icon': 'icofont-arrow-right'},'bottom': {'icon': 'icofont-arrow-down'},'left': {'icon': 'icofont-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="ui-play" _label="Martin"></kol-button> <kol-button class="not-used" _icon="home" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _icon="home" _icon-only="" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _variant="secondary" _label="Secondary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="normal" _label="Normal-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="danger" _label="Danger-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="ghost" _label="Ghost-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _disabled="true" _label="Disabled-Schaltfläche"></kol-button> <kol-button class="not-used" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-80" _icon="ui-add" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-60" _icon="ui-add" _icon-align="right" _label="Hinzufügen"></kol-button> <kol-button class="not-used" _icon="ui-add" _icon-align="right" _icon-only="true" _label="Hinzufügen (nur Icon)"></kol-button> <kol-button class="not-used" _label="ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen"></kol-button> </div> <div class="gap-2 py-2 col-12 d-grid"> <div> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-60"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <!-- <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> --> <!-- <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> --> </div> <kol-heading _level="2">Link-Button</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-indented-text>Der folgende Schalter hat ein abweichendes Aria-Label:</kol-indented-text> <kol-link-button class="not-used" _aria-label="Ich bin ein abweichendes Label" _variant="primary" _label="Primary-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'icofont-arrow-up'},'right': {'icon': 'icofont-arrow-right'},'bottom': {'icon': 'icofont-arrow-down'},'left': {'icon': 'icofont-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _icon="ui-play" _label="Martin"></kol-link-button> <kol-link-button class="not-used" _icon="home" _variant="primary" _label="Primary-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _icon="home" _icon-only="" _variant="primary" _label="Primary-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _variant="secondary" _label="Secondary-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="normal" _label="Normal-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="danger" _label="Danger-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="ghost" _label="Ghost-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _disabled="true" _label="Disabled-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used font-80" _icon="ui-add" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used font-60" _icon="ui-add" _icon-align="right" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used" _icon="ui-add" _icon-align="right" _icon-only="true" _label="Hinzufügen (nur Icon)"></kol-link-button> <kol-link-button class="not-used" _label="ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen"></kol-link-button> </div> <div class="gap-2 py-2 col-12 d-grid"> <div> <kol-link-button class="not-used" _label="Speichern" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _label="Bearbeiten" _disabled=""></kol-link-button> <kol-link-button class="not-used" _label="Abbrechen"></kol-link-button> <kol-link-button class="not-used" _label="Löschen"></kol-link-button> </div> <div class="font-80"> <kol-link-button class="not-used" _label="Speichern" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _label="Bearbeiten" _disabled=""></kol-link-button> <kol-link-button class="not-used" _label="Abbrechen"></kol-link-button> <kol-link-button class="not-used" _label="Löschen"></kol-link-button> </div> <div class="font-60"> <kol-link-button class="not-used" _label="Speichern" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _label="Bearbeiten" _disabled=""></kol-link-button> <kol-link-button class="not-used" _label="Abbrechen"></kol-link-button> <kol-link-button class="not-used" _label="Löschen"></kol-link-button> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">ButtonGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-button-group> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-60"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Card</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-card _headline="Mit h1-Überschrift und Footer" _has-footer=""> <p slot="header">Test</p> <p slot="content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum
36
48
  earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
37
49
  elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
38
50
  molestias voluptas reiciendis. </p> <div slot="footer"> <kol-button class="not-used min-width" _label="Ok"></kol-button> <kol-button class="not-used min-width" _label="Abbrechen"></kol-button> </div> </kol-card> <kol-card _headline="Mit h2-Überschrift" _level="2" class="bordered"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
@@ -58,7 +70,7 @@
58
70
  Dabei wird automatisch die Rolle (<code>img</code>) gesetzt. </p> <p> Sollte eine Beschriftung nicht erforlderlich sein, weil beispielsweise eine Beschriftung schon durch ein übergeordnetes Element erfolgt, dann
59
71
  kann das explizit durch die Angabe einer leeren Beschriftung gemacht werden. Wobei hier die Rolle in diesem Fall nicht gesetzt wird. </p> Links: <ul> <li> <kol-link _href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html" _target="w3c"> https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html</kol-link> </li> </ul> </kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="3">FontAwesome</kol-heading> <kol-icon-font-awesome _prefix="fas" _icon="home" _aria-label="Haus"></kol-icon-font-awesome> <kol-indented-text>Mit Aria-Label</kol-indented-text> <kol-icon _icon="fas fa-home" _aria-label=""></kol-icon> <kol-indented-text>Ohne Aria-Label</kol-indented-text> <kol-heading _level="3">Icofont</kol-heading> <kol-icon-icofont _icon="home" _aria-label="Haus"></kol-icon-icofont> <kol-indented-text>Mit Aria-Label</kol-indented-text> <kol-icon _icon="icofont-home"></kol-icon> <kol-indented-text>Ohne Aria-Label</kol-indented-text> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v#"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Indented-Text</kol-heading> </div> <div class="col-12"> <p> Indented-Text ist ein eingerückter Text, der z.B. zu einer Erläuterung verwendet werden kann: <kol-indented-text> I'll be placed as detailed summary. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quidem, molestias consequuntur saepe
60
72
  rerum natus sequi unde modi magni laudantium deleniti aliquid quae maiores voluptate iusto earum cum cumque! Lorem ipsum dolor sit amet
61
- consectetur adipisicing elit. Itaque reprehenderit similique, at atque facere velit labore. </kol-indented-text> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> <kol-heading _level="2">Input's</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <div class="d-grid gap-2"> <kol-heading _level="3">InputCheckbox</kol-heading> <kol-controlled-input-next class="d-grid gap-2" id="new-input-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </kol-controlled-input-next> <lean-input-adapter class="d-grid gap-2" id="new-input-checkbox-leanup"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> <lean-input-adapter class="d-grid gap-2" id="change-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputColor</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-color"> <kol-input-color></kol-input-color> <kol-input-color _list="['#000000','#ff0000','#0000ff','#00ff00']"></kol-input-color> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputEmail</kol-heading> <kol-input-email _error="Test einer Fehlermeldung">E-Mail-Adresse</kol-input-email> <lean-input-adapter class="d-grid gap-2" id="new-input-email"> <kol-input-email></kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']">E-Mail-Adresse (Auto-Vervollständigung)</kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']" _multiple="">E-Mail-Adresse(n) (Auto-Vervollständigung, Mehrfachauswahl)</kol-input-email> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputFile</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-file"> <kol-input-file>Datei hochladen</kol-input-file> <kol-input-file _multiple="">Datei(en) hochladen (Mehrfachauswahl)</kol-input-file> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputNumber</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-number"> <kol-input-number _type="number">Zahleneingabe</kol-input-number> <kol-input-number _max="10" _min="-10" _step="2" _type="number">Zahleneingabe (-10 bis 10 in 2er Schritten)</kol-input-number> </lean-input-adapter> <kol-heading _level="3">InputDate</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-date"> <kol-input-date _type="date">Datum</kol-input-date> </lean-input-adapter> <kol-input-date _type="date" _min="2022-10-28">Datum (min)</kol-input-date> <kol-input-date _type="date" _max="2022-10-28">Datum (max)</kol-input-date> <kol-input-date _type="datetime-local">Local-Datetime (Standard)</kol-input-date> <kol-input-date _type="datetime-local" _step="1">Local-Datetime (mit Sekunden)</kol-input-date> <kol-input-date _type="month">Monat</kol-input-date> <kol-input-date _type="week">Woche</kol-input-date> <kol-input-date _type="time">Zeit (Standard)</kol-input-date> <kol-input-date _type="time" _step="1">Zeit (mit Sekunden)</kol-input-date> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputPassword</kol-heading> <kol-input-password _id="password">Passwort</kol-input-password> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRadioGroup</kol-heading> <div slot="content"> <lean-input-adapter class="d-grid gap-2" id="anrede-adapter"> <kol-input-radio>Anrede</kol-input-radio> </lean-input-adapter> <kol-input-radio id="anrede-input">Anrede es wird automatisch die 1. Option ausgewählt</kol-input-radio> </div> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRange</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-range"> <kol-input-range _min="0" _max="50">Schieberegler</kol-input-range> <kol-input-range _min="0" _max="50" _step="10">Schieberegler (mit Raster)</kol-input-range> <kol-input-range _list="[{'value':0,'label':'sehr schlecht'},{'value':10,'label':'schlecht'},{'value':20,'label':'mangelhaft'},{'value':30,'label':'gut'},{'value':40,'label':'naja'},{'value':50,'label':'sehr gut'}]" _min="0" _max="50" _step="10">Schieberegler (mit Rasterlinien)</kol-input-range> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputText</kol-heading> <kol-input-text class="vorname" _hint="Ich bin ein Hinweis." _id="input-text-vorname" _type="text">Vorname (Auto-Vervollständigung) </kol-input-text> <lean-input-adapter class="d-grid gap-2" id="kol-input-text"> <kol-input-text class="vorname" _id="input-text-vorname" _type="text"></kol-input-text> </lean-input-adapter> <kol-input-text _type="search">Suchbegriff</kol-input-text> <br> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Icon und Placeholder.</kol-indented-text> <kol-input-text _hide-label="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search"> Suche</kol-input-text> <kol-input-text _hide-label="" _required="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search">Suche</kol-input-text> <kol-input-text _type="url">Url</kol-input-text> <kol-input-text _type="tel">Telefonnummer</kol-input-text> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Select</kol-heading> <kol-select class="list4value">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="list4value">Stimmung (vorbelegt)</kol-select> <kol-select class="list4value" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select class="value4list">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="value4list">Stimmung (vorbelegt)</kol-select> <kol-select class="value4list" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select id="fix-select-multi" _multiple="">Mehrfachauswahl</kol-select> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Textarea</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-textarea"> <kol-textarea>Label</kol-textarea> </lean-input-adapter> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Placeholder.</kol-indented-text> <kol-textarea _has-counter="" _hide-label="" _placeholder="Ausgeblendetes Label">Ausgeblendetes Label</kol-textarea> <kol-textarea _has-counter="" _max-length="50" _value="Textfeld mit Zähler und maximaler Länge"> Textfeld mit Zähler und maximaler Länge. </kol-textarea> <kol-textarea _adjust-height="" _has-counter="" _value="Textfeld das seine Höhe automatisch anpasst">Textfeld das seine Höhe automatisch anpasst.</kol-textarea> </div> <div class="d-grid gap-2"> <kol-input-password class="smart-button">Passwort</kol-input-password> <kol-input-text class="smart-button">Text</kol-input-text> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Link</kol-heading> </div> <div class="gap-2 col-12"> <kol-link _href="https://de.wikipedia.org" _target="wikipedia">Wikipedia</kol-link> <kol-link _icon="paper-plane" _href="https://wikipedia.de">Wikipedia</kol-link> <p> E-Mail: <kol-link _href="mailto:info@wikipedia.org" _target="mail-client" _target-description="Link wird im E-Mail-Programm geöffnet.">info@wikipedia.org </kol-link> </p> <kol-link _use-case="image" _icon="paper-plane" _icon-only="" _aria-label="Icon als Link" _href="https://de.wikipedia.org" _target="wikipedia"></kol-link> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">LinkGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-link-group _aria-label="Fehlerliste" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]"></kol-link-group> <kol-link-group class="bordered" _aria-label="Fehlerliste mit Rahmen" _heading="Liste der Formularfehler (nummeriert)" _level="3" _ordered="" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]" style="padding: 0.25rem 0.5rem;"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (horizontal)" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]" _list-style-type="square" _orientation="horizontal"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (vertical)" _orientation="vertical" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]"></kol-link-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Logo</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-logo _abbr="BReg"></kol-logo> <kol-logo _abbr="BMF"></kol-logo> <kol-logo _abbr="BMG"></kol-logo> <p> <kol-indented-text>Im Folgenden wird ein "Zurück zur Startseite"-Link dargestellt:</kol-indented-text> <kol-link _href="https://itzbund.de" _use-case="image" _aria-label="Zurück zur Startseite des ITZBund"> <kol-logo _abbr="ITZBund"></kol-logo> </kol-link> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> </div> <kol-heading _level="2">Modal</kol-heading> <p> Die Modal-Komponete implementiert die Überlagerungsfunktion (Overlay's). Sie ist so realisiert, dass das Modal unabhängig von dem
73
+ consectetur adipisicing elit. Itaque reprehenderit similique, at atque facere velit labore. </kol-indented-text> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> <kol-heading _level="2">Input's</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <div class="d-grid gap-2"> <kol-heading _level="3">InputCheckbox</kol-heading> <kol-controlled-input-next class="d-grid gap-2" id="new-input-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </kol-controlled-input-next> <lean-input-adapter class="d-grid gap-2" id="new-input-checkbox-leanup"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> <lean-input-adapter class="d-grid gap-2" id="change-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputColor</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-color"> <kol-input-color></kol-input-color> <kol-input-color _list="['#000000','#ff0000','#0000ff','#00ff00']"></kol-input-color> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputEmail</kol-heading> <kol-input-email _error="Test einer Fehlermeldung">E-Mail-Adresse</kol-input-email> <lean-input-adapter class="d-grid gap-2" id="new-input-email"> <kol-input-email></kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']">E-Mail-Adresse (Auto-Vervollständigung)</kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']" _multiple="">E-Mail-Adresse(n) (Auto-Vervollständigung, Mehrfachauswahl)</kol-input-email> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputFile</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-file"> <kol-input-file>Datei hochladen</kol-input-file> <kol-input-file _multiple="">Datei(en) hochladen (Mehrfachauswahl)</kol-input-file> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputNumber</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-number"> <kol-input-number _type="number">Zahleneingabe</kol-input-number> <kol-input-number _max="10" _min="-10" _step="2" _type="number">Zahleneingabe (-10 bis 10 in 2er Schritten)</kol-input-number> </lean-input-adapter> <kol-heading _level="3">InputDate</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-date"> <kol-input-date _type="date">Datum</kol-input-date> </lean-input-adapter> <kol-input-date _type="date" _min="2022-10-28">Datum (min)</kol-input-date> <kol-input-date _type="date" _max="2022-10-28">Datum (max)</kol-input-date> <kol-input-date _type="datetime-local">Local-Datetime (Standard)</kol-input-date> <kol-input-date _type="datetime-local" _step="1">Local-Datetime (mit Sekunden)</kol-input-date> <kol-input-date _type="month">Monat</kol-input-date> <kol-input-date _type="week">Woche</kol-input-date> <kol-input-date _type="time">Zeit (Standard)</kol-input-date> <kol-input-date _type="time" _step="1">Zeit (mit Sekunden)</kol-input-date> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputPassword</kol-heading> <kol-input-password _id="password">Passwort</kol-input-password> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRadioGroup</kol-heading> <div slot="content"> <lean-input-adapter class="d-grid gap-2" id="anrede-adapter"> <kol-input-radio>Anrede</kol-input-radio> </lean-input-adapter> <kol-input-radio id="anrede-input">Anrede es wird automatisch die 1. Option ausgewählt</kol-input-radio> </div> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRange</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-range"> <kol-input-range _min="0" _max="50">Schieberegler</kol-input-range> <kol-input-range _min="0" _max="50" _step="10">Schieberegler (mit Raster)</kol-input-range> <kol-input-range _list="[{'value':0,'label':'sehr schlecht'},{'value':10,'label':'schlecht'},{'value':20,'label':'mangelhaft'},{'value':30,'label':'gut'},{'value':40,'label':'naja'},{'value':50,'label':'sehr gut'}]" _min="0" _max="50" _step="10">Schieberegler (mit Rasterlinien)</kol-input-range> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputText</kol-heading> <kol-input-text class="vorname" _hint="Ich bin ein Hinweis." _id="input-text-vorname" _type="text">Vorname (Auto-Vervollständigung) </kol-input-text> <lean-input-adapter class="d-grid gap-2" id="kol-input-text"> <kol-input-text class="vorname" _id="input-text-vorname" _type="text"></kol-input-text> </lean-input-adapter> <kol-input-text _type="search">Suchbegriff</kol-input-text> <br> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Icon und Placeholder.</kol-indented-text> <kol-input-text _hide-label="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search"> Suche</kol-input-text> <kol-input-text _hide-label="" _required="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search">Suche</kol-input-text> <kol-input-text _type="url">Url</kol-input-text> <kol-input-text _type="tel">Telefonnummer</kol-input-text> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Select</kol-heading> <kol-select class="list4value">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="list4value">Stimmung (vorbelegt)</kol-select> <kol-select class="list4value" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select class="value4list">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="value4list">Stimmung (vorbelegt)</kol-select> <kol-select class="value4list" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select id="fix-select-multi" _multiple="">Mehrfachauswahl</kol-select> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Textarea</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-textarea"> <kol-textarea>Label</kol-textarea> </lean-input-adapter> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Placeholder.</kol-indented-text> <kol-textarea _has-counter="" _hide-label="" _placeholder="Ausgeblendetes Label">Ausgeblendetes Label</kol-textarea> <kol-textarea _has-counter="" _max-length="50" _value="Textfeld mit Zähler und maximaler Länge"> Textfeld mit Zähler und maximaler Länge. </kol-textarea> <kol-textarea _adjust-height="" _has-counter="" _value="Textfeld das seine Höhe automatisch anpasst">Textfeld das seine Höhe automatisch anpasst.</kol-textarea> </div> <div class="d-grid gap-2"> <kol-input-password class="smart-button">Passwort</kol-input-password> <kol-input-text class="smart-button">Text</kol-input-text> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Link</kol-heading> </div> <div class="gap-2 col-12"> <kol-link _href="https://de.wikipedia.org" _target="wikipedia">Wikipedia</kol-link> <kol-link _href="https://wikipedia.de" _icon="paper-plane">Wikipedia</kol-link> <p> E-Mail: <kol-link _href="mailto:info@wikipedia.org" _target="mail-client" _target-description="Link wird im E-Mail-Programm geöffnet.">info@wikipedia.org </kol-link> </p> <kol-link _aria-label="Icon als Link" _href="https://de.wikipedia.org" _icon="paper-plane" _icon-only="" _target="wikipedia"></kol-link> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <!-- <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> --> </div> <kol-heading _level="2">Button-Link</kol-heading> </div> <div class="gap-2 col-12"> <kol-button-link _label="Wikipedia"></kol-button-link> <kol-button-link _icon="paper-plane" _label="Wikipedia"></kol-button-link> <p> E-Mail: <kol-button-link _label="info@wikipedia.org"></kol-button-link> </p> <kol-button-link _aria-label="Icon als Link" _icon="paper-plane" _icon-only=""></kol-button-link> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">LinkGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-link-group _aria-label="Fehlerliste" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]"></kol-link-group> <kol-link-group class="bordered" _aria-label="Fehlerliste mit Rahmen" _heading="Liste der Formularfehler (nummeriert)" _level="3" _ordered="" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]" style="padding: 0.25rem 0.5rem;"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (horizontal)" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]" _list-style-type="square" _orientation="horizontal"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (vertical)" _orientation="vertical" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]"></kol-link-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Logo</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-logo _abbr="BReg"></kol-logo> <kol-logo _abbr="BMF"></kol-logo> <kol-logo _abbr="BMG"></kol-logo> <p> <kol-indented-text>Im Folgenden wird ein "Zurück zur Startseite"-Link dargestellt:</kol-indented-text> <kol-link _href="https://itzbund.de" _use-case="image" _aria-label="Zurück zur Startseite des ITZBund"> <kol-logo _abbr="ITZBund"></kol-logo> </kol-link> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> </div> <kol-heading _level="2">Modal</kol-heading> <p> Die Modal-Komponete implementiert die Überlagerungsfunktion (Overlay's). Sie ist so realisiert, dass das Modal unabhängig von dem
62
74
  Überlagerungsinhalt ist. Es kann also nicht nur ein Dialog sondern auch jedes beliebige andere <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> als Überlagerungsinhalt verwendet werden. </p> <p> Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sperrung der Inhalte sorgt. Muss es auch eine Möglichkeit bieten,
63
75
  das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen. Das wird durch einen optionalen Schließen-Button rechts oben in der Ecke
64
76
  sichergestellt. </p> <kol-details _summary="Hinweise zur Barrierefreiheit"> <p> Beim Öffnen eines Modals, muss der Entwickler:in das aktive Element übergeben, zu dem nach dem Schließen des Modals automatisch der Fokus
package/dist/cjs/controller-97800130.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- "use strict";const icon=require("./icon-0741e060.js"),a11y_tipps=require("./a11y.tipps-c34c01ad.js"),prop_validators=require("./prop.validators-78c2b613.js"),validator=require("./validator-a391018d.js"),getRenderStates=t=>{const o="string"==typeof t._error&&t._error.length>0&&!0===t._touched,n="string"==typeof t._hint&&t._hint.length>0,e=[];return!0===o&&e.push(`${t._id}-error`),!0===n&&e.push(`${t._id}-hint`),{hasError:o,hasHint:n,ariaDiscribedBy:e}};class ControlledInputController{constructor(t,o){this.component=t,this.name=o}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){prop_validators.watchBoolean(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}const beforePatchIcon=(t,o)=>{const n=t;"object"==typeof n&&null!==n&&(validator.isString(n.right,1)&&(n.right={icon:n.right}),validator.isString(n.left,1)&&(n.left={icon:n.left}),o.set("_icon",n))};class InputController extends ControlledInputController{constructor(t,o){super(t,o),this.hideLabel=!1,this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){prop_validators.watchBoolean(this.component,"_adjustHeight",t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t,{minLength:0})}validateHideLabel(t){prop_validators.watchBoolean(this.component,"_hideLabel",t)}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateIcon(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this.component,"_icon",(t=>"object"==typeof t&&null!==t&&(validator.isString(t.left,1)||icon.isIcon(t.left)||validator.isString(t.right,1)||icon.isIcon(t.right))),new Set(["KoliBriInputIcon"]),t,{hooks:{beforePatch:beforePatchIcon},required:!0})}))}validateId(t){prop_validators.watchString(this.component,"_id",t),void 0===t&&a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){prop_validators.watchString(this.component,"_name",t),void 0===t&&a11y_tipps.devHint("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die Autocomplete-Funktion des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){prop_validators.watchNumber(this.component,"_tabIndex",t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateIcon(this.component._icon),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var o;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onBlur)&&this.component._on.onBlur(t)}onChange(t){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,t.target.value)}onClick(t){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onClick)&&this.component._on.onClick(t)}onFocus(t){var o;this.component._alert=!0,"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onFocus)&&this.component._on.onFocus(t)}setValue(t,o){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(t,o)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;
package/dist/cjs/icon-0741e060.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- "use strict";const prop_validators=require("./prop.validators-78c2b613.js"),validator=require("./validator-a391018d.js"),beforePatchIcon=t=>{var o,i,n,e,a,l,c,r,s,d;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icon")){const o=null===(i=t.nextState)||void 0===i?void 0:i.get("_icon");if("string"==typeof o&&o.length>0)switch((null===(n=t.nextState)||void 0===n?void 0:n.get("_iconAlign"))||t.state._iconAlign){case"left":null===(e=t.nextState)||void 0===e||e.set("_icon",{left:{icon:`icofont-${o}`}});break;case"right":null===(a=t.nextState)||void 0===a||a.set("_icon",{right:{icon:`icofont-${o}`}});break;default:null===(l=t.nextState)||void 0===l||l.set("_icon",{left:{icon:`icofont-${o}`}})}else"object"==typeof o&&null!==o&&(validator.isString(o.top,1)&&(o.top={icon:o.top}),validator.isString(o.right,1)&&(o.right={icon:o.right}),validator.isString(o.bottom,1)&&(o.bottom={icon:o.bottom}),validator.isString(o.left,1)&&(o.left={icon:o.left}),null===(c=t.nextState)||void 0===c||c.set("_icon",o))}else if(null===(r=t.nextState)||void 0===r?void 0:r.has("_iconAlign")){const o=t.state._iconAlign;null===(s=t.nextState)||void 0===s||s.set("_icon",{[o]:void 0,[null===(d=t.nextState)||void 0===d?void 0:d.get("_iconAlign")]:t.state._icon[o]})}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||validator.isStyle(t.style))&&validator.isString(t.icon,1),watchIcon=(t,o)=>{prop_validators.objectObjectHandler(o,(()=>{try{o=prop_validators.parseJson(o)}catch(t){}prop_validators.watchValidator(t,"_icon",(t=>null===t||validator.isString(t,1)||"object"==typeof t&&null!==t&&(validator.isString(t.left,1)||isIcon(t.left)||validator.isString(t.right,1)||isIcon(t.right)||validator.isString(t.top,1)||isIcon(t.top)||validator.isString(t.bottom,1)||isIcon(t.bottom))),new Set(["KoliBriIcon"]),o,{hooks:{beforePatch:(o,i)=>{null===o&&i.set("_icon",{}),beforePatchIcon(t)}},required:!0})}))},watchIconAlign=(t,o)=>{prop_validators.watchValidator(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),o,{hooks:{beforePatch:()=>{beforePatchIcon(t)}}})};exports.isIcon=isIcon,exports.watchIcon=watchIcon,exports.watchIconAlign=watchIconAlign;
package/dist/cjs/validator-a391018d.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- "use strict";const isString=(t,e=0)=>"string"==typeof t&&t.length>=e,isStyle=t=>{if("object"!=typeof t||null===t)return isString(t,1);for(const e in t)if(!1===isString(e,1))return!1;return!0},STATE_CHANGE_EVENT=new Event("StateChange");exports.STATE_CHANGE_EVENT=STATE_CHANGE_EVENT,exports.isString=isString,exports.isStyle=isStyle;
package/dist/components/controller6.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{j as watchValidator,o as watchJsonArrayString}from"./prop.validators.js";import{I as InputPasswordController}from"./controller4.js";class InputTextEmailController extends InputPasswordController{constructor(t,o){super(t,o),this.component=t}validateList(t){watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}componentWillLoad(){super.componentWillLoad(),this.validateList(this.component._list)}}class InputTextController extends InputTextEmailController{constructor(t,o){super(t,o),this.hasError=!1,this.hasList=!1,this.component=t}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("text"===t||"search"===t||"url"===t||"tel"===t)),new Set(["String {text, search, url, tel}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type)}}export{InputTextEmailController as I,InputTextController as a};
package/dist/components/icon.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{v as objectObjectHandler,j as watchValidator,u as parseJson}from"./prop.validators.js";const isString=(t,i=0)=>"string"==typeof t&&t.length>=i,isStyle=t=>{if("object"!=typeof t||null===t)return isString(t,1);for(const i in t)if(!1===isString(i,1))return!1;return!0},STATE_CHANGE_EVENT=new Event("StateChange"),beforePatchIcon=t=>{var i,o,n,e,c,l,s,a,r,g;if(null===(i=t.nextState)||void 0===i?void 0:i.has("_icon")){const i=null===(o=t.nextState)||void 0===o?void 0:o.get("_icon");if("string"==typeof i&&i.length>0)switch((null===(n=t.nextState)||void 0===n?void 0:n.get("_iconAlign"))||t.state._iconAlign){case"left":null===(e=t.nextState)||void 0===e||e.set("_icon",{left:{icon:`icofont-${i}`}});break;case"right":null===(c=t.nextState)||void 0===c||c.set("_icon",{right:{icon:`icofont-${i}`}});break;default:null===(l=t.nextState)||void 0===l||l.set("_icon",{left:{icon:`icofont-${i}`}})}else"object"==typeof i&&null!==i&&(isString(i.top,1)&&(i.top={icon:i.top}),isString(i.right,1)&&(i.right={icon:i.right}),isString(i.bottom,1)&&(i.bottom={icon:i.bottom}),isString(i.left,1)&&(i.left={icon:i.left}),null===(s=t.nextState)||void 0===s||s.set("_icon",i))}else if(null===(a=t.nextState)||void 0===a?void 0:a.has("_iconAlign")){const i=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icon",{[i]:void 0,[null===(g=t.nextState)||void 0===g?void 0:g.get("_iconAlign")]:t.state._icon[i]})}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||isStyle(t.style))&&isString(t.icon,1),watchIcon=(t,i)=>{objectObjectHandler(i,(()=>{try{i=parseJson(i)}catch(t){}watchValidator(t,"_icon",(t=>null===t||isString(t,1)||"object"==typeof t&&null!==t&&(isString(t.left,1)||isIcon(t.left)||isString(t.right,1)||isIcon(t.right)||isString(t.top,1)||isIcon(t.top)||isString(t.bottom,1)||isIcon(t.bottom))),new Set(["KoliBriIcon"]),i,{hooks:{beforePatch:(i,o)=>{null===i&&o.set("_icon",{}),beforePatchIcon(t)}},required:!0})}))},watchIconAlign=(t,i)=>{watchValidator(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),i,{hooks:{beforePatch:()=>{beforePatchIcon(t)}}})};export{STATE_CHANGE_EVENT as S,watchIconAlign as a,isIcon as b,isString as i,watchIcon as w};
package/dist/esm/controller-2882c7d6.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{i as isIcon}from"./icon-589227b1.js";import{b as a11yHintDisabled,d as devHint}from"./a11y.tipps-bec0e549.js";import{b as watchBoolean,w as watchString,o as objectObjectHandler,p as parseJson,a as watchValidator,s as setState,f as watchNumber}from"./prop.validators-359f6f9d.js";import{i as isString}from"./validator-985dcb65.js";const getRenderStates=t=>{const n="string"==typeof t._error&&t._error.length>0&&!0===t._touched,e="string"==typeof t._hint&&t._hint.length>0,o=[];return!0===n&&o.push(`${t._id}-error`),!0===e&&o.push(`${t._id}-hint`),{hasError:n,hasHint:e,ariaDiscribedBy:o}};class ControlledInputController{constructor(t,n){this.component=t,this.name=n}validateAlert(t){watchBoolean(this.component,"_alert",t)}validateTouched(t){watchBoolean(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}const beforePatchIcon=(t,n)=>{const e=t;"object"==typeof e&&null!==e&&(isString(e.right,1)&&(e.right={icon:e.right}),isString(e.left,1)&&(e.left={icon:e.left}),n.set("_icon",e))};class InputController extends ControlledInputController{constructor(t,n){super(t,n),this.hideLabel=!1,this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){watchBoolean(this.component,"_adjustHeight",t)}validateDisabled(t){watchBoolean(this.component,"_disabled",t),!0===t&&a11yHintDisabled()}validateError(t){watchString(this.component,"_error",t,{minLength:0})}validateHideLabel(t){watchBoolean(this.component,"_hideLabel",t)}validateHint(t){watchString(this.component,"_hint",t)}validateIcon(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this.component,"_icon",(t=>"object"==typeof t&&null!==t&&(isString(t.left,1)||isIcon(t.left)||isString(t.right,1)||isIcon(t.right))),new Set(["KoliBriInputIcon"]),t,{hooks:{beforePatch:beforePatchIcon},required:!0})}))}validateId(t){watchString(this.component,"_id",t),void 0===t&&devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){watchString(this.component,"_name",t),void 0===t&&devHint("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die Autocomplete-Funktion des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&setState(this.component,"_on",t)}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this.component,"_smartButton",t)}))}validateTabIndex(t){watchNumber(this.component,"_tabIndex",t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateIcon(this.component._icon),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var n;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onBlur)&&this.component._on.onBlur(t)}onChange(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(t,t.target.value)}onClick(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onClick)&&this.component._on.onClick(t)}onFocus(t){var n;this.component._alert=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onFocus)&&this.component._on.onFocus(t)}setValue(t,n){var e;"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,n)}}export{InputController as I,getRenderStates as g};
package/dist/esm/icon-589227b1.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{o as objectObjectHandler,a as watchValidator,p as parseJson}from"./prop.validators-359f6f9d.js";import{i as isString,a as isStyle}from"./validator-985dcb65.js";const beforePatchIcon=t=>{var o,i,n,e,c,l,a,s,r,g;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icon")){const o=null===(i=t.nextState)||void 0===i?void 0:i.get("_icon");if("string"==typeof o&&o.length>0)switch((null===(n=t.nextState)||void 0===n?void 0:n.get("_iconAlign"))||t.state._iconAlign){case"left":null===(e=t.nextState)||void 0===e||e.set("_icon",{left:{icon:`icofont-${o}`}});break;case"right":null===(c=t.nextState)||void 0===c||c.set("_icon",{right:{icon:`icofont-${o}`}});break;default:null===(l=t.nextState)||void 0===l||l.set("_icon",{left:{icon:`icofont-${o}`}})}else"object"==typeof o&&null!==o&&(isString(o.top,1)&&(o.top={icon:o.top}),isString(o.right,1)&&(o.right={icon:o.right}),isString(o.bottom,1)&&(o.bottom={icon:o.bottom}),isString(o.left,1)&&(o.left={icon:o.left}),null===(a=t.nextState)||void 0===a||a.set("_icon",o))}else if(null===(s=t.nextState)||void 0===s?void 0:s.has("_iconAlign")){const o=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icon",{[o]:void 0,[null===(g=t.nextState)||void 0===g?void 0:g.get("_iconAlign")]:t.state._icon[o]})}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||isStyle(t.style))&&isString(t.icon,1),watchIcon=(t,o)=>{objectObjectHandler(o,(()=>{try{o=parseJson(o)}catch(t){}watchValidator(t,"_icon",(t=>null===t||isString(t,1)||"object"==typeof t&&null!==t&&(isString(t.left,1)||isIcon(t.left)||isString(t.right,1)||isIcon(t.right)||isString(t.top,1)||isIcon(t.top)||isString(t.bottom,1)||isIcon(t.bottom))),new Set(["KoliBriIcon"]),o,{hooks:{beforePatch:(o,i)=>{null===o&&i.set("_icon",{}),beforePatchIcon(t)}},required:!0})}))},watchIconAlign=(t,o)=>{watchValidator(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),o,{hooks:{beforePatch:()=>{beforePatchIcon(t)}}})};export{watchIconAlign as a,isIcon as i,watchIcon as w};
package/dist/esm/validator-985dcb65.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- const isString=(t,n=0)=>"string"==typeof t&&t.length>=n,isStyle=t=>{if("object"!=typeof t||null===t)return isString(t,1);for(const n in t)if(!1===isString(n,1))return!1;return!0},STATE_CHANGE_EVENT=new Event("StateChange");export{STATE_CHANGE_EVENT as S,isStyle as a,isString as i};
package/dist/kolibri/controller-2882c7d6.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{i as t}from"./icon-589227b1.js";import{b as i,d as s}from"./a11y.tipps-bec0e549.js";import{b as e,w as o,o as n,p as a,a as h,s as r,f as d}from"./prop.validators-359f6f9d.js";import{i as l}from"./validator-985dcb65.js";const c=t=>{const n="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,e=[];return!0===n&&e.push(`${t._id}-error`),!0===o&&e.push(`${t._id}-hint`),{hasError:n,hasHint:o,ariaDiscribedBy:e}},v=(t,n)=>{const o=t;"object"==typeof o&&null!==o&&(l(o.right,1)&&(o.right={icon:o.right}),l(o.left,1)&&(o.left={icon:o.left}),n.set("_icon",o))};class u extends class{constructor(t,n){this.component=t,this.name=n}validateAlert(t){e(this.component,"_alert",t)}validateTouched(t){e(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}{constructor(t,n){super(t,n),this.hideLabel=!1,this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){o(this.component,"_accessKey",t)}validateAdjustHeight(t){e(this.component,"_adjustHeight",t)}validateDisabled(t){e(this.component,"_disabled",t),!0===t&&i()}validateError(t){o(this.component,"_error",t,{minLength:0})}validateHideLabel(t){e(this.component,"_hideLabel",t)}validateHint(t){o(this.component,"_hint",t)}validateIcon(o){n(o,(()=>{try{o=a(o)}catch(t){}h(this.component,"_icon",(n=>"object"==typeof n&&null!==n&&(l(n.left,1)||t(n.left)||l(n.right,1)||t(n.right))),new Set(["KoliBriInputIcon"]),o,{hooks:{beforePatch:v},required:!0})}))}validateId(t){o(this.component,"_id",t),void 0===t&&s("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){o(this.component,"_name",t),void 0===t&&s("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die Autocomplete-Funktion des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&r(this.component,"_on",t)}validateSmartButton(t){n(t,(()=>{try{t=a(t)}catch(t){}r(this.component,"_smartButton",t)}))}validateTabIndex(t){d(this.component,"_tabIndex",t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateIcon(this.component._icon),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var n;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onBlur)&&this.component._on.onBlur(t)}onChange(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(t,t.target.value)}onClick(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onClick)&&this.component._on.onClick(t)}onFocus(t){var n;this.component._alert=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onFocus)&&this.component._on.onFocus(t)}setValue(t,n){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,n)}}export{u as I,c as g};
package/dist/kolibri/icon-589227b1.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{o,a as i,p as n}from"./prop.validators-359f6f9d.js";import{i as l,a as t}from"./validator-985dcb65.js";const c=t=>{var o,e,i,n,c,a,s,f,r,d;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icon")){const o=null===(e=t.nextState)||void 0===e?void 0:e.get("_icon");if("string"==typeof o&&o.length>0)switch((null===(i=t.nextState)||void 0===i?void 0:i.get("_iconAlign"))||t.state._iconAlign){case"left":null===(n=t.nextState)||void 0===n||n.set("_icon",{left:{icon:`icofont-${o}`}});break;case"right":null===(c=t.nextState)||void 0===c||c.set("_icon",{right:{icon:`icofont-${o}`}});break;default:null===(a=t.nextState)||void 0===a||a.set("_icon",{left:{icon:`icofont-${o}`}})}else"object"==typeof o&&null!==o&&(l(o.top,1)&&(o.top={icon:o.top}),l(o.right,1)&&(o.right={icon:o.right}),l(o.bottom,1)&&(o.bottom={icon:o.bottom}),l(o.left,1)&&(o.left={icon:o.left}),null===(s=t.nextState)||void 0===s||s.set("_icon",o))}else if(null===(f=t.nextState)||void 0===f?void 0:f.has("_iconAlign")){const o=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icon",{[o]:void 0,[null===(d=t.nextState)||void 0===d?void 0:d.get("_iconAlign")]:t.state._icon[o]})}},e=o=>"object"==typeof o&&null!==o&&(void 0===o.style||t(o.style))&&l(o.icon,1),a=(t,a)=>{o(a,(()=>{try{a=n(a)}catch(t){}i(t,"_icon",(t=>null===t||l(t,1)||"object"==typeof t&&null!==t&&(l(t.left,1)||e(t.left)||l(t.right,1)||e(t.right)||l(t.top,1)||e(t.top)||l(t.bottom,1)||e(t.bottom))),new Set(["KoliBriIcon"]),a,{hooks:{beforePatch:(o,e)=>{null===o&&e.set("_icon",{}),c(t)}},required:!0})}))},d=(t,o)=>{i(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),o,{hooks:{beforePatch:()=>{c(t)}}})};export{d as a,e as i,a as w};
package/dist/kolibri/validator-985dcb65.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- const t=(t,e=0)=>"string"==typeof t&&t.length>=e,e=e=>{if("object"!=typeof e||null===e)return t(e,1);for(const n in e)if(!1===t(n,1))return!1;return!0},n=new Event("StateChange");export{n as S,e as a,t as i};
package/www/build/controller-2882c7d6.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{i as t}from"./icon-589227b1.js";import{b as i,d as s}from"./a11y.tipps-bec0e549.js";import{b as e,w as o,o as n,p as a,a as h,s as r,f as d}from"./prop.validators-359f6f9d.js";import{i as l}from"./validator-985dcb65.js";const c=t=>{const n="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,e=[];return!0===n&&e.push(`${t._id}-error`),!0===o&&e.push(`${t._id}-hint`),{hasError:n,hasHint:o,ariaDiscribedBy:e}},v=(t,n)=>{const o=t;"object"==typeof o&&null!==o&&(l(o.right,1)&&(o.right={icon:o.right}),l(o.left,1)&&(o.left={icon:o.left}),n.set("_icon",o))};class u extends class{constructor(t,n){this.component=t,this.name=n}validateAlert(t){e(this.component,"_alert",t)}validateTouched(t){e(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}{constructor(t,n){super(t,n),this.hideLabel=!1,this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){o(this.component,"_accessKey",t)}validateAdjustHeight(t){e(this.component,"_adjustHeight",t)}validateDisabled(t){e(this.component,"_disabled",t),!0===t&&i()}validateError(t){o(this.component,"_error",t,{minLength:0})}validateHideLabel(t){e(this.component,"_hideLabel",t)}validateHint(t){o(this.component,"_hint",t)}validateIcon(o){n(o,(()=>{try{o=a(o)}catch(t){}h(this.component,"_icon",(n=>"object"==typeof n&&null!==n&&(l(n.left,1)||t(n.left)||l(n.right,1)||t(n.right))),new Set(["KoliBriInputIcon"]),o,{hooks:{beforePatch:v},required:!0})}))}validateId(t){o(this.component,"_id",t),void 0===t&&s("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){o(this.component,"_name",t),void 0===t&&s("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die Autocomplete-Funktion des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&r(this.component,"_on",t)}validateSmartButton(t){n(t,(()=>{try{t=a(t)}catch(t){}r(this.component,"_smartButton",t)}))}validateTabIndex(t){d(this.component,"_tabIndex",t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateIcon(this.component._icon),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var n;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onBlur)&&this.component._on.onBlur(t)}onChange(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(t,t.target.value)}onClick(t){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onClick)&&this.component._on.onClick(t)}onFocus(t){var n;this.component._alert=!0,"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onFocus)&&this.component._on.onFocus(t)}setValue(t,n){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,n)}}export{u as I,c as g};
package/www/build/icon-589227b1.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- import{o,a as i,p as n}from"./prop.validators-359f6f9d.js";import{i as l,a as t}from"./validator-985dcb65.js";const c=t=>{var o,e,i,n,c,a,s,f,r,d;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icon")){const o=null===(e=t.nextState)||void 0===e?void 0:e.get("_icon");if("string"==typeof o&&o.length>0)switch((null===(i=t.nextState)||void 0===i?void 0:i.get("_iconAlign"))||t.state._iconAlign){case"left":null===(n=t.nextState)||void 0===n||n.set("_icon",{left:{icon:`icofont-${o}`}});break;case"right":null===(c=t.nextState)||void 0===c||c.set("_icon",{right:{icon:`icofont-${o}`}});break;default:null===(a=t.nextState)||void 0===a||a.set("_icon",{left:{icon:`icofont-${o}`}})}else"object"==typeof o&&null!==o&&(l(o.top,1)&&(o.top={icon:o.top}),l(o.right,1)&&(o.right={icon:o.right}),l(o.bottom,1)&&(o.bottom={icon:o.bottom}),l(o.left,1)&&(o.left={icon:o.left}),null===(s=t.nextState)||void 0===s||s.set("_icon",o))}else if(null===(f=t.nextState)||void 0===f?void 0:f.has("_iconAlign")){const o=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icon",{[o]:void 0,[null===(d=t.nextState)||void 0===d?void 0:d.get("_iconAlign")]:t.state._icon[o]})}},e=o=>"object"==typeof o&&null!==o&&(void 0===o.style||t(o.style))&&l(o.icon,1),a=(t,a)=>{o(a,(()=>{try{a=n(a)}catch(t){}i(t,"_icon",(t=>null===t||l(t,1)||"object"==typeof t&&null!==t&&(l(t.left,1)||e(t.left)||l(t.right,1)||e(t.right)||l(t.top,1)||e(t.top)||l(t.bottom,1)||e(t.bottom))),new Set(["KoliBriIcon"]),a,{hooks:{beforePatch:(o,e)=>{null===o&&e.set("_icon",{}),c(t)}},required:!0})}))},d=(t,o)=>{i(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),o,{hooks:{beforePatch:()=>{c(t)}}})};export{d as a,e as i,a as w};
package/www/build/validator-985dcb65.js DELETED
@@ -1,4 +0,0 @@
1
- /*!
2
- * KoliBri - the accessible web component library
3
- */
4
- const t=(t,e=0)=>"string"==typeof t&&t.length>=e,e=e=>{if("object"!=typeof e||null===e)return t(e,1);for(const n in e)if(!1===t(n,1))return!1;return!0},n=new Event("StateChange");export{n as S,e as a,t as i};