@public-ui/components 3.0.0-alpha.1 → 3.0.0-rc.0

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 (456) hide show
  1. package/assets/codicons/codicon.css +54 -1
  2. package/assets/codicons/codicon.csv +41 -0
  3. package/assets/codicons/codicon.html +328 -0
  4. package/assets/codicons/codicon.svg +1 -1
  5. package/assets/codicons/codicon.ttf +0 -0
  6. package/custom-elements.json +1 -1
  7. package/dist/cjs/{Alert-f6b0d38e.js → Alert-5272b50e.js} +1 -1
  8. package/dist/cjs/{Alert-f6b0d38e.js.map → Alert-5272b50e.js.map} +1 -1
  9. package/dist/cjs/{Collapsible-4e60c250.js → Collapsible-fbb78a82.js} +1 -1
  10. package/dist/cjs/{Collapsible-4e60c250.js.map → Collapsible-fbb78a82.js.map} +1 -1
  11. package/dist/cjs/FormFieldMsg-cdfee048.js +4 -0
  12. package/dist/cjs/{FormFieldMsg-f9c66f2b.js.map → FormFieldMsg-cdfee048.js.map} +1 -1
  13. package/dist/cjs/{Heading-862fa562.js → Heading-f551ed31.js} +1 -1
  14. package/dist/cjs/{Heading-862fa562.js.map → Heading-f551ed31.js.map} +1 -1
  15. package/dist/cjs/{InternalUnderlinedBadgeText-1c6598a7.js → InternalUnderlinedBadgeText-1eab6f37.js} +1 -1
  16. package/dist/cjs/{InternalUnderlinedBadgeText-1c6598a7.js.map → InternalUnderlinedBadgeText-1eab6f37.js.map} +1 -1
  17. package/dist/cjs/{Span-95000179.js → Span-9d8e4664.js} +1 -1
  18. package/dist/cjs/{Span-95000179.js.map → Span-9d8e4664.js.map} +1 -1
  19. package/dist/cjs/{app-globals-cbed5be9.js → app-globals-63e1b69d.js} +1 -1
  20. package/dist/cjs/{app-globals-cbed5be9.js.map → app-globals-63e1b69d.js.map} +1 -1
  21. package/dist/cjs/{aria-expanded-6f9152b4.js → button-variant-acac72ee.js} +1 -1
  22. package/dist/cjs/button-variant-acac72ee.js.map +1 -0
  23. package/dist/cjs/{dev.utils-91b818ef.js → dev.utils-2bfc459d.js} +1 -1
  24. package/dist/cjs/{dev.utils-91b818ef.js.map → dev.utils-2bfc459d.js.map} +1 -1
  25. package/dist/cjs/{devtools-189e17b0.js → devtools-8c9e3519.js} +1 -1
  26. package/dist/cjs/{devtools-189e17b0.js.map → devtools-8c9e3519.js.map} +1 -1
  27. package/dist/cjs/index-907ce00e.js +4 -0
  28. package/dist/cjs/index-907ce00e.js.map +1 -0
  29. package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
  30. package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
  31. package/dist/cjs/kol-alert-wc.cjs.entry.js +1 -1
  32. package/dist/cjs/kol-alert.cjs.entry.js +1 -1
  33. package/dist/cjs/kol-avatar-wc.cjs.entry.js +1 -1
  34. package/dist/cjs/kol-avatar.cjs.entry.js +1 -1
  35. package/dist/cjs/kol-badge.cjs.entry.js +1 -1
  36. package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
  37. package/dist/cjs/kol-button-group-wc.cjs.entry.js +1 -1
  38. package/dist/cjs/kol-button-group.cjs.entry.js +1 -1
  39. package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
  40. package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
  41. package/dist/cjs/kol-button-wc.cjs.entry.js +1 -1
  42. package/dist/cjs/kol-button-wc.cjs.entry.js.map +1 -1
  43. package/dist/cjs/kol-button.cjs.entry.js +1 -1
  44. package/dist/cjs/kol-button.cjs.entry.js.map +1 -1
  45. package/dist/cjs/kol-card.cjs.entry.js +1 -1
  46. package/dist/cjs/kol-combobox.cjs.entry.js +1 -1
  47. package/dist/cjs/kol-details.cjs.entry.js +1 -1
  48. package/dist/cjs/kol-drawer.cjs.entry.js +1 -1
  49. package/dist/cjs/kol-form.cjs.entry.js +1 -1
  50. package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
  51. package/dist/cjs/kol-heading.cjs.entry.js +1 -1
  52. package/dist/cjs/kol-icon.cjs.entry.js +1 -1
  53. package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
  54. package/dist/cjs/kol-image.cjs.entry.js +1 -1
  55. package/dist/cjs/kol-indented-text-wc.cjs.entry.js +1 -1
  56. package/dist/cjs/kol-indented-text.cjs.entry.js +1 -1
  57. package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
  58. package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
  59. package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
  60. package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
  61. package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
  62. package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
  63. package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
  64. package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
  65. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  66. package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
  67. package/dist/cjs/kol-input.cjs.entry.js +1 -1
  68. package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
  69. package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
  70. package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
  71. package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
  72. package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
  73. package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
  74. package/dist/cjs/kol-link.cjs.entry.js +1 -1
  75. package/dist/cjs/kol-link.cjs.entry.js.map +1 -1
  76. package/dist/cjs/kol-logo.cjs.entry.js +1 -1
  77. package/dist/cjs/kol-modal.cjs.entry.js +1 -1
  78. package/dist/cjs/kol-nav.cjs.entry.js +1 -1
  79. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  80. package/dist/cjs/kol-pagination.cjs.entry.js.map +1 -1
  81. package/dist/cjs/kol-popover-wc.cjs.entry.js +1 -1
  82. package/dist/cjs/kol-progress.cjs.entry.js +1 -1
  83. package/dist/cjs/kol-quote.cjs.entry.js +1 -1
  84. package/dist/cjs/kol-quote.cjs.entry.js.map +1 -1
  85. package/dist/cjs/kol-select.cjs.entry.js +1 -1
  86. package/dist/cjs/kol-single-select.cjs.entry.js +1 -1
  87. package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
  88. package/dist/cjs/kol-skip-nav.cjs.entry.js.map +1 -1
  89. package/dist/cjs/kol-spin.cjs.entry.js +1 -1
  90. package/dist/cjs/kol-split-button.cjs.entry.js +1 -1
  91. package/dist/cjs/kol-symbol.cjs.entry.js +1 -1
  92. package/dist/cjs/kol-table-stateful.cjs.entry.js +1 -1
  93. package/dist/cjs/kol-table-stateful.cjs.entry.js.map +1 -1
  94. package/dist/cjs/kol-table-stateless-wc.cjs.entry.js +1 -1
  95. package/dist/cjs/kol-table-stateless.cjs.entry.js +1 -1
  96. package/dist/cjs/kol-table-stateless.cjs.entry.js.map +1 -1
  97. package/dist/cjs/kol-table.cjs.entry.js +1 -1
  98. package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
  99. package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
  100. package/dist/cjs/kol-toast-container.cjs.entry.js +1 -1
  101. package/dist/cjs/kol-toolbar.cjs.entry.js +1 -1
  102. package/dist/cjs/kol-tooltip-wc.cjs.entry.js +1 -1
  103. package/dist/cjs/kol-tree-item-wc.cjs.entry.js +1 -1
  104. package/dist/cjs/kol-tree-item.cjs.entry.js +1 -1
  105. package/dist/cjs/kol-tree-wc.cjs.entry.js +1 -1
  106. package/dist/cjs/kol-tree.cjs.entry.js +1 -1
  107. package/dist/cjs/kol-version.cjs.entry.js +1 -1
  108. package/dist/cjs/kolibri.cjs.js +1 -1
  109. package/dist/cjs/loader.cjs.js +1 -1
  110. package/dist/cjs/test-component.cjs.entry.js +1 -1
  111. package/dist/cjs/tslib.es6-5e301284.js.map +1 -0
  112. package/dist/components/{aria-expanded.js → button-variant.js} +1 -1
  113. package/dist/components/button-variant.js.map +1 -0
  114. package/dist/components/kol-button-link.js +1 -1
  115. package/dist/components/kol-button-link.js.map +1 -1
  116. package/dist/components/kol-button-wc.js +1 -1
  117. package/dist/components/kol-button-wc.js.map +1 -1
  118. package/dist/components/kol-button.js +1 -1
  119. package/dist/components/kol-button.js.map +1 -1
  120. package/dist/components/kol-card.js +1 -1
  121. package/dist/components/kol-combobox.js +1 -1
  122. package/dist/components/kol-details.js +1 -1
  123. package/dist/components/kol-drawer.js +1 -1
  124. package/dist/components/kol-form.js +1 -1
  125. package/dist/components/kol-form.js.map +1 -1
  126. package/dist/components/kol-heading.js +1 -1
  127. package/dist/components/kol-icon.js +1 -1
  128. package/dist/components/kol-icon.js.map +1 -1
  129. package/dist/components/kol-image.js +1 -1
  130. package/dist/components/kol-indented-text-wc.js +1 -1
  131. package/dist/components/kol-indented-text.js +1 -1
  132. package/dist/components/kol-input-checkbox.js +1 -1
  133. package/dist/components/kol-input-color.js +1 -1
  134. package/dist/components/kol-input-date.js +1 -1
  135. package/dist/components/kol-input-email.js +1 -1
  136. package/dist/components/kol-input-file.js +1 -1
  137. package/dist/components/kol-input-number.js +1 -1
  138. package/dist/components/kol-input-password.js +1 -1
  139. package/dist/components/kol-input-radio.js +1 -1
  140. package/dist/components/kol-input-range.js +1 -1
  141. package/dist/components/kol-input-text.js +1 -1
  142. package/dist/components/kol-input.js +1 -1
  143. package/dist/components/kol-kolibri.js +1 -1
  144. package/dist/components/kol-link-button.js +1 -1
  145. package/dist/components/kol-link-button.js.map +1 -1
  146. package/dist/components/kol-link-group.js +1 -1
  147. package/dist/components/kol-link-wc.js +1 -1
  148. package/dist/components/kol-link-wc.js.map +1 -1
  149. package/dist/components/kol-link.js +1 -1
  150. package/dist/components/kol-link.js.map +1 -1
  151. package/dist/components/kol-logo.js +1 -1
  152. package/dist/components/kol-modal.js +1 -1
  153. package/dist/components/kol-nav.js +1 -1
  154. package/dist/components/kol-pagination.js +1 -1
  155. package/dist/components/kol-pagination.js.map +1 -1
  156. package/dist/components/kol-popover-wc.js +1 -1
  157. package/dist/components/kol-progress.js +1 -1
  158. package/dist/components/kol-quote.js +1 -1
  159. package/dist/components/kol-quote.js.map +1 -1
  160. package/dist/components/kol-select.js +1 -1
  161. package/dist/components/kol-single-select.js +1 -1
  162. package/dist/components/kol-skip-nav.js +1 -1
  163. package/dist/components/kol-skip-nav.js.map +1 -1
  164. package/dist/components/kol-spin.js +1 -1
  165. package/dist/components/kol-split-button.js +1 -1
  166. package/dist/components/kol-symbol.js +1 -1
  167. package/dist/components/kol-table-stateful.js +1 -1
  168. package/dist/components/kol-table-stateful.js.map +1 -1
  169. package/dist/components/kol-table-stateless-wc.js +1 -1
  170. package/dist/components/kol-table-stateless.js +1 -1
  171. package/dist/components/kol-table-stateless.js.map +1 -1
  172. package/dist/components/kol-table.js +1 -1
  173. package/dist/components/kol-tabs.js +1 -1
  174. package/dist/components/kol-textarea.js +1 -1
  175. package/dist/components/kol-toast-container.js +1 -1
  176. package/dist/components/kol-toolbar.js +1 -1
  177. package/dist/components/kol-tooltip-wc.js +1 -1
  178. package/dist/components/kol-tree-item-wc.js +1 -1
  179. package/dist/components/kol-tree-item.js +1 -1
  180. package/dist/components/kol-tree-wc.js +1 -1
  181. package/dist/components/kol-tree.js +1 -1
  182. package/dist/components/kol-version.js +1 -1
  183. package/dist/components/tslib.es6.js.map +1 -1
  184. package/dist/esm/{Alert-1b318619.js → Alert-99d1ad26.js} +1 -1
  185. package/dist/esm/{Alert-1b318619.js.map → Alert-99d1ad26.js.map} +1 -1
  186. package/dist/esm/{Collapsible-53867075.js → Collapsible-de47cd81.js} +1 -1
  187. package/dist/esm/{Collapsible-53867075.js.map → Collapsible-de47cd81.js.map} +1 -1
  188. package/dist/esm/{FormFieldMsg-6843c725.js → FormFieldMsg-b9819240.js} +1 -1
  189. package/dist/esm/{FormFieldMsg-6843c725.js.map → FormFieldMsg-b9819240.js.map} +1 -1
  190. package/dist/esm/{Heading-1fe830dd.js → Heading-fac772d4.js} +1 -1
  191. package/dist/esm/{Heading-1fe830dd.js.map → Heading-fac772d4.js.map} +1 -1
  192. package/dist/esm/InternalUnderlinedBadgeText-529a9dbb.js +4 -0
  193. package/dist/esm/{InternalUnderlinedBadgeText-8f2a64b6.js.map → InternalUnderlinedBadgeText-529a9dbb.js.map} +1 -1
  194. package/dist/esm/{Span-7f84ad00.js → Span-facb30b0.js} +1 -1
  195. package/dist/esm/{Span-7f84ad00.js.map → Span-facb30b0.js.map} +1 -1
  196. package/dist/esm/{app-globals-ebbcf310.js → app-globals-ab3a9d93.js} +1 -1
  197. package/dist/esm/{app-globals-ebbcf310.js.map → app-globals-ab3a9d93.js.map} +1 -1
  198. package/dist/esm/{aria-expanded-1b7c2c54.js → button-variant-f5fd361b.js} +1 -1
  199. package/dist/esm/button-variant-f5fd361b.js.map +1 -0
  200. package/dist/esm/{dev.utils-8fad8415.js → dev.utils-4087c69c.js} +1 -1
  201. package/dist/esm/{dev.utils-8fad8415.js.map → dev.utils-4087c69c.js.map} +1 -1
  202. package/dist/esm/{devtools-a0824082.js → devtools-23952fae.js} +1 -1
  203. package/dist/esm/{devtools-a0824082.js.map → devtools-23952fae.js.map} +1 -1
  204. package/dist/esm/index-ed42fc56.js +4 -0
  205. package/dist/esm/index-ed42fc56.js.map +1 -0
  206. package/dist/esm/kol-abbr.entry.js +1 -1
  207. package/dist/esm/kol-accordion.entry.js +1 -1
  208. package/dist/esm/kol-alert-wc.entry.js +1 -1
  209. package/dist/esm/kol-alert.entry.js +1 -1
  210. package/dist/esm/kol-avatar-wc.entry.js +1 -1
  211. package/dist/esm/kol-avatar.entry.js +1 -1
  212. package/dist/esm/kol-badge.entry.js +1 -1
  213. package/dist/esm/kol-breadcrumb.entry.js +1 -1
  214. package/dist/esm/kol-button-group-wc.entry.js +1 -1
  215. package/dist/esm/kol-button-group.entry.js +1 -1
  216. package/dist/esm/kol-button-link.entry.js +1 -1
  217. package/dist/esm/kol-button-link.entry.js.map +1 -1
  218. package/dist/esm/kol-button-wc.entry.js +1 -1
  219. package/dist/esm/kol-button-wc.entry.js.map +1 -1
  220. package/dist/esm/kol-button.entry.js +1 -1
  221. package/dist/esm/kol-button.entry.js.map +1 -1
  222. package/dist/esm/kol-card.entry.js +1 -1
  223. package/dist/esm/kol-combobox.entry.js +1 -1
  224. package/dist/esm/kol-details.entry.js +1 -1
  225. package/dist/esm/kol-drawer.entry.js +1 -1
  226. package/dist/esm/kol-form.entry.js +1 -1
  227. package/dist/esm/kol-form.entry.js.map +1 -1
  228. package/dist/esm/kol-heading.entry.js +1 -1
  229. package/dist/esm/kol-icon.entry.js +1 -1
  230. package/dist/esm/kol-icon.entry.js.map +1 -1
  231. package/dist/esm/kol-image.entry.js +1 -1
  232. package/dist/esm/kol-indented-text-wc.entry.js +1 -1
  233. package/dist/esm/kol-indented-text.entry.js +1 -1
  234. package/dist/esm/kol-input-checkbox.entry.js +1 -1
  235. package/dist/esm/kol-input-color.entry.js +1 -1
  236. package/dist/esm/kol-input-date.entry.js +1 -1
  237. package/dist/esm/kol-input-email.entry.js +1 -1
  238. package/dist/esm/kol-input-file.entry.js +1 -1
  239. package/dist/esm/kol-input-number.entry.js +1 -1
  240. package/dist/esm/kol-input-password.entry.js +1 -1
  241. package/dist/esm/kol-input-radio.entry.js +1 -1
  242. package/dist/esm/kol-input-range.entry.js +1 -1
  243. package/dist/esm/kol-input-text.entry.js +1 -1
  244. package/dist/esm/kol-input.entry.js +1 -1
  245. package/dist/esm/kol-kolibri.entry.js +1 -1
  246. package/dist/esm/kol-link-button.entry.js +1 -1
  247. package/dist/esm/kol-link-button.entry.js.map +1 -1
  248. package/dist/esm/kol-link-group.entry.js +1 -1
  249. package/dist/esm/kol-link-wc.entry.js +1 -1
  250. package/dist/esm/kol-link-wc.entry.js.map +1 -1
  251. package/dist/esm/kol-link.entry.js +1 -1
  252. package/dist/esm/kol-link.entry.js.map +1 -1
  253. package/dist/esm/kol-logo.entry.js +1 -1
  254. package/dist/esm/kol-modal.entry.js +1 -1
  255. package/dist/esm/kol-nav.entry.js +1 -1
  256. package/dist/esm/kol-pagination.entry.js +1 -1
  257. package/dist/esm/kol-pagination.entry.js.map +1 -1
  258. package/dist/esm/kol-popover-wc.entry.js +1 -1
  259. package/dist/esm/kol-progress.entry.js +1 -1
  260. package/dist/esm/kol-quote.entry.js +1 -1
  261. package/dist/esm/kol-quote.entry.js.map +1 -1
  262. package/dist/esm/kol-select.entry.js +1 -1
  263. package/dist/esm/kol-single-select.entry.js +1 -1
  264. package/dist/esm/kol-skip-nav.entry.js +1 -1
  265. package/dist/esm/kol-skip-nav.entry.js.map +1 -1
  266. package/dist/esm/kol-spin.entry.js +1 -1
  267. package/dist/esm/kol-split-button.entry.js +1 -1
  268. package/dist/esm/kol-symbol.entry.js +1 -1
  269. package/dist/esm/kol-table-stateful.entry.js +1 -1
  270. package/dist/esm/kol-table-stateful.entry.js.map +1 -1
  271. package/dist/esm/kol-table-stateless-wc.entry.js +1 -1
  272. package/dist/esm/kol-table-stateless.entry.js +1 -1
  273. package/dist/esm/kol-table-stateless.entry.js.map +1 -1
  274. package/dist/esm/kol-table.entry.js +1 -1
  275. package/dist/esm/kol-tabs.entry.js +1 -1
  276. package/dist/esm/kol-textarea.entry.js +1 -1
  277. package/dist/esm/kol-toast-container.entry.js +1 -1
  278. package/dist/esm/kol-toolbar.entry.js +1 -1
  279. package/dist/esm/kol-tooltip-wc.entry.js +1 -1
  280. package/dist/esm/kol-tree-item-wc.entry.js +1 -1
  281. package/dist/esm/kol-tree-item.entry.js +1 -1
  282. package/dist/esm/kol-tree-wc.entry.js +1 -1
  283. package/dist/esm/kol-tree.entry.js +1 -1
  284. package/dist/esm/kol-version.entry.js +1 -1
  285. package/dist/esm/kolibri.js +1 -1
  286. package/dist/esm/loader.js +1 -1
  287. package/dist/esm/test-component.entry.js +1 -1
  288. package/dist/esm/tslib.es6-1173d062.js.map +1 -0
  289. package/dist/kolibri/Alert-99d1ad26.js +4 -0
  290. package/dist/kolibri/{Collapsible-53867075.js → Collapsible-de47cd81.js} +1 -1
  291. package/dist/kolibri/FormFieldMsg-b9819240.js +4 -0
  292. package/dist/kolibri/Heading-fac772d4.js +4 -0
  293. package/dist/kolibri/{Heading-1fe830dd.js.map → Heading-fac772d4.js.map} +1 -1
  294. package/dist/kolibri/InternalUnderlinedBadgeText-529a9dbb.js +4 -0
  295. package/dist/kolibri/{Span-7f84ad00.js → Span-facb30b0.js} +1 -1
  296. package/dist/kolibri/app-globals-ab3a9d93.js +4 -0
  297. package/dist/kolibri/{app-globals-ebbcf310.js.map → app-globals-ab3a9d93.js.map} +1 -1
  298. package/dist/kolibri/assets/codicons/LICENSE +394 -394
  299. package/dist/kolibri/assets/codicons/LICENSE-CODE +21 -21
  300. package/dist/kolibri/assets/codicons/codicon.css +65 -1
  301. package/dist/kolibri/assets/codicons/codicon.csv +48 -2
  302. package/dist/kolibri/assets/codicons/codicon.html +381 -13
  303. package/dist/kolibri/assets/codicons/codicon.svg +1 -1
  304. package/dist/kolibri/assets/codicons/codicon.ttf +0 -0
  305. package/dist/kolibri/assets/kolibri.ico +0 -0
  306. package/dist/kolibri/button-variant-f5fd361b.js +4 -0
  307. package/dist/kolibri/button-variant-f5fd361b.js.map +1 -0
  308. package/dist/kolibri/{dev.utils-8fad8415.js → dev.utils-4087c69c.js} +1 -1
  309. package/dist/kolibri/devtools-23952fae.js +4 -0
  310. package/dist/kolibri/{index-a49af574.js → index-ed42fc56.js} +2 -2
  311. package/dist/kolibri/index-ed42fc56.js.map +1 -0
  312. package/dist/kolibri/kol-abbr.entry.js +1 -1
  313. package/dist/kolibri/kol-accordion.entry.js +1 -1
  314. package/dist/kolibri/kol-alert-wc.entry.js +1 -1
  315. package/dist/kolibri/kol-alert.entry.js +1 -1
  316. package/dist/kolibri/kol-avatar-wc.entry.js +1 -1
  317. package/dist/kolibri/kol-avatar.entry.js +1 -1
  318. package/dist/kolibri/kol-badge.entry.js +1 -1
  319. package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
  320. package/dist/kolibri/kol-button-group-wc.entry.js +1 -1
  321. package/dist/kolibri/kol-button-group.entry.js +1 -1
  322. package/dist/kolibri/kol-button-link.entry.js +1 -1
  323. package/dist/kolibri/kol-button-link.entry.js.map +1 -1
  324. package/dist/kolibri/kol-button-wc.entry.js +1 -1
  325. package/dist/kolibri/kol-button-wc.entry.js.map +1 -1
  326. package/dist/kolibri/kol-button.entry.js +1 -1
  327. package/dist/kolibri/kol-button.entry.js.map +1 -1
  328. package/dist/kolibri/kol-card.entry.js +1 -1
  329. package/dist/kolibri/kol-combobox.entry.js +1 -1
  330. package/dist/kolibri/kol-details.entry.js +1 -1
  331. package/dist/kolibri/kol-drawer.entry.js +1 -1
  332. package/dist/kolibri/kol-form.entry.js +1 -1
  333. package/dist/kolibri/kol-form.entry.js.map +1 -1
  334. package/dist/kolibri/kol-heading.entry.js +1 -1
  335. package/dist/kolibri/kol-icon.entry.js +1 -1
  336. package/dist/kolibri/kol-icon.entry.js.map +1 -1
  337. package/dist/kolibri/kol-image.entry.js +1 -1
  338. package/dist/kolibri/kol-indented-text-wc.entry.js +1 -1
  339. package/dist/kolibri/kol-indented-text.entry.js +1 -1
  340. package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
  341. package/dist/kolibri/kol-input-color.entry.js +1 -1
  342. package/dist/kolibri/kol-input-date.entry.js +1 -1
  343. package/dist/kolibri/kol-input-email.entry.js +1 -1
  344. package/dist/kolibri/kol-input-file.entry.js +1 -1
  345. package/dist/kolibri/kol-input-number.entry.js +1 -1
  346. package/dist/kolibri/kol-input-password.entry.js +1 -1
  347. package/dist/kolibri/kol-input-radio.entry.js +1 -1
  348. package/dist/kolibri/kol-input-range.entry.js +1 -1
  349. package/dist/kolibri/kol-input-text.entry.js +1 -1
  350. package/dist/kolibri/kol-input.entry.js +1 -1
  351. package/dist/kolibri/kol-kolibri.entry.js +1 -1
  352. package/dist/kolibri/kol-link-button.entry.js +1 -1
  353. package/dist/kolibri/kol-link-button.entry.js.map +1 -1
  354. package/dist/kolibri/kol-link-group.entry.js +1 -1
  355. package/dist/kolibri/kol-link-wc.entry.js +1 -1
  356. package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
  357. package/dist/kolibri/kol-link.entry.js +1 -1
  358. package/dist/kolibri/kol-link.entry.js.map +1 -1
  359. package/dist/kolibri/kol-logo.entry.js +1 -1
  360. package/dist/kolibri/kol-modal.entry.js +1 -1
  361. package/dist/kolibri/kol-nav.entry.js +1 -1
  362. package/dist/kolibri/kol-pagination.entry.js +1 -1
  363. package/dist/kolibri/kol-pagination.entry.js.map +1 -1
  364. package/dist/kolibri/kol-popover-wc.entry.js +1 -1
  365. package/dist/kolibri/kol-progress.entry.js +1 -1
  366. package/dist/kolibri/kol-quote.entry.js +1 -1
  367. package/dist/kolibri/kol-quote.entry.js.map +1 -1
  368. package/dist/kolibri/kol-select.entry.js +1 -1
  369. package/dist/kolibri/kol-single-select.entry.js +1 -1
  370. package/dist/kolibri/kol-skip-nav.entry.js +1 -1
  371. package/dist/kolibri/kol-skip-nav.entry.js.map +1 -1
  372. package/dist/kolibri/kol-spin.entry.js +1 -1
  373. package/dist/kolibri/kol-split-button.entry.js +1 -1
  374. package/dist/kolibri/kol-symbol.entry.js +1 -1
  375. package/dist/kolibri/kol-symbol.entry.js.map +1 -1
  376. package/dist/kolibri/kol-table-stateful.entry.js +1 -1
  377. package/dist/kolibri/kol-table-stateful.entry.js.map +1 -1
  378. package/dist/kolibri/kol-table-stateless-wc.entry.js +1 -1
  379. package/dist/kolibri/kol-table-stateless.entry.js +1 -1
  380. package/dist/kolibri/kol-table-stateless.entry.js.map +1 -1
  381. package/dist/kolibri/kol-table.entry.js +1 -1
  382. package/dist/kolibri/kol-tabs.entry.js +1 -1
  383. package/dist/kolibri/kol-textarea.entry.js +1 -1
  384. package/dist/kolibri/kol-toast-container.entry.js +1 -1
  385. package/dist/kolibri/kol-toolbar.entry.js +1 -1
  386. package/dist/kolibri/kol-tooltip-wc.entry.js +1 -1
  387. package/dist/kolibri/kol-tree-item-wc.entry.js +1 -1
  388. package/dist/kolibri/kol-tree-item.entry.js +1 -1
  389. package/dist/kolibri/kol-tree-wc.entry.js +1 -1
  390. package/dist/kolibri/kol-tree.entry.js +1 -1
  391. package/dist/kolibri/kol-version.entry.js +1 -1
  392. package/dist/kolibri/kolibri.esm.js +1 -1
  393. package/dist/kolibri/kolibri.esm.js.map +1 -1
  394. package/dist/kolibri/test-component.entry.js +1 -1
  395. package/dist/kolibri/tslib.es6-1173d062.js.map +1 -0
  396. package/dist/types/components/link/component.d.ts +5 -1
  397. package/dist/types/components.d.ts +16 -0
  398. package/dist/types/schema/components/link-button.d.ts +2 -2
  399. package/dist/types/schema/components/link.d.ts +2 -2
  400. package/package.json +1 -1
  401. package/dist/cjs/FormFieldMsg-f9c66f2b.js +0 -4
  402. package/dist/cjs/aria-expanded-6f9152b4.js.map +0 -1
  403. package/dist/cjs/index-80062b8e.js +0 -4
  404. package/dist/cjs/index-80062b8e.js.map +0 -1
  405. package/dist/cjs/tslib.es6-16e4524f.js.map +0 -1
  406. package/dist/components/aria-expanded.js.map +0 -1
  407. package/dist/esm/InternalUnderlinedBadgeText-8f2a64b6.js +0 -4
  408. package/dist/esm/aria-expanded-1b7c2c54.js.map +0 -1
  409. package/dist/esm/index-a49af574.js +0 -4
  410. package/dist/esm/index-a49af574.js.map +0 -1
  411. package/dist/esm/tslib.es6-2e5096f8.js.map +0 -1
  412. package/dist/kolibri/Alert-1b318619.js +0 -4
  413. package/dist/kolibri/FormFieldMsg-6843c725.js +0 -4
  414. package/dist/kolibri/Heading-1fe830dd.js +0 -4
  415. package/dist/kolibri/InternalUnderlinedBadgeText-8f2a64b6.js +0 -4
  416. package/dist/kolibri/app-globals-ebbcf310.js +0 -4
  417. package/dist/kolibri/aria-expanded-1b7c2c54.js +0 -4
  418. package/dist/kolibri/aria-expanded-1b7c2c54.js.map +0 -1
  419. package/dist/kolibri/assets/favicon.ico +0 -0
  420. package/dist/kolibri/assets/images/abgrenzung.jpg +0 -0
  421. package/dist/kolibri/assets/itzbund.logo.svg +0 -6
  422. package/dist/kolibri/assets/kolibri.logo.svg +0 -31
  423. package/dist/kolibri/assets/loader.css +0 -46
  424. package/dist/kolibri/assets/logo.kolibri.invert.svg +0 -9
  425. package/dist/kolibri/assets/logo.kolibri.svg +0 -9
  426. package/dist/kolibri/assets/logo.kolibri.text.invert.svg +0 -9
  427. package/dist/kolibri/assets/logo.kolibri.text.svg +0 -10
  428. package/dist/kolibri/assets/simulations/alert-simulation.js +0 -1
  429. package/dist/kolibri/assets/simulations/button-simulation.js +0 -1
  430. package/dist/kolibri/assets/simulations/form-simulation.js +0 -1
  431. package/dist/kolibri/assets/simulations/form-simulation.textarea.js +0 -1
  432. package/dist/kolibri/assets/simulations/form-simulation.weitere-cases.js +0 -1
  433. package/dist/kolibri/assets/simulations/modal-simulation.js +0 -1
  434. package/dist/kolibri/assets/simulations/nav-simulation.js +0 -1
  435. package/dist/kolibri/assets/simulations/pagination-simulation.js +0 -1
  436. package/dist/kolibri/assets/simulations/popover-simulation.js +0 -1
  437. package/dist/kolibri/assets/simulations/progress-simulation.js +0 -1
  438. package/dist/kolibri/assets/simulations/smart-button-simulation.js +0 -1
  439. package/dist/kolibri/assets/simulations/spin-simulation.js +0 -1
  440. package/dist/kolibri/assets/simulations/table-simulation.js +0 -1
  441. package/dist/kolibri/assets/simulations/tabs-simulation.js +0 -1
  442. package/dist/kolibri/assets/simulations/toast-simulation.js +0 -1
  443. package/dist/kolibri/assets/style.css +0 -139
  444. package/dist/kolibri/devtools-a0824082.js +0 -4
  445. package/dist/kolibri/index-a49af574.js.map +0 -1
  446. package/dist/kolibri/tslib.es6-2e5096f8.js.map +0 -1
  447. /package/dist/cjs/{tslib.es6-16e4524f.js → tslib.es6-5e301284.js} +0 -0
  448. /package/dist/esm/{tslib.es6-2e5096f8.js → tslib.es6-1173d062.js} +0 -0
  449. /package/dist/kolibri/{Alert-1b318619.js.map → Alert-99d1ad26.js.map} +0 -0
  450. /package/dist/kolibri/{Collapsible-53867075.js.map → Collapsible-de47cd81.js.map} +0 -0
  451. /package/dist/kolibri/{FormFieldMsg-6843c725.js.map → FormFieldMsg-b9819240.js.map} +0 -0
  452. /package/dist/kolibri/{InternalUnderlinedBadgeText-8f2a64b6.js.map → InternalUnderlinedBadgeText-529a9dbb.js.map} +0 -0
  453. /package/dist/kolibri/{Span-7f84ad00.js.map → Span-facb30b0.js.map} +0 -0
  454. /package/dist/kolibri/{dev.utils-8fad8415.js.map → dev.utils-4087c69c.js.map} +0 -0
  455. /package/dist/kolibri/{devtools-a0824082.js.map → devtools-23952fae.js.map} +0 -0
  456. /package/dist/kolibri/{tslib.es6-2e5096f8.js → tslib.es6-1173d062.js} +0 -0
@@ -1 +1 @@
1
- {"file":"kol-quote.entry.js","mappings":";;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,2kJAA2kJ,CAAC;AACpmJ,8BAAe,eAAe;;MCYjB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjD,cAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,+DACC,KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,qEACC,+DACC,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,CACH,EACN;KACF;;;;;;;;;;;;;;","names":[],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host class=\"kol-quote\">\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
1
+ {"file":"kol-quote.entry.js","mappings":";;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,muJAAmuJ,CAAC;AAC5vJ,8BAAe,eAAe;;MCajB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjD,cAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACC,+DAAQ,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChD,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,mEAAY,KAAK,EAAC,uBAAuB,IACxC,6DAAM,KAAK,EAAC,iBAAiB,IAC5B,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,EACR;KACF;;;;;;;;;;;;;;","names":[],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tfont-size: rem(16);\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-a49af574.js";import{n as nonce}from"./dev.utils-8fad8415.js";import{t as tryToDispatchKoliBriEvent,s as stopPropagation}from"./events-29e84d75.js";import{g as getRenderStates}from"./controller-64301c42.js";import{I as InputIconController}from"./controller-icon-e20e2d63.js";import{f as fillKeyOptionMap,v as validateOptionsWithOptgroup}from"./controller-506a6c81.js";import{v as validateRows}from"./rows-64f9b5cb.js";import{b as watchBoolean,g as watchJsonArrayString}from"./prop.validators-c5e6ad2d.js";import{i as KolInputTag}from"./component-names-aa3cbc3c.js";import{p as propagateSubmitEventToForm}from"./controller-6c2714a5.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText-8f2a64b6.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./icons-f3b7aabd.js";import"./index-541b643a.js";class SelectController extends InputIconController{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?e.set("_value",[n[0].value]):Array.isArray(t)&&i.length<t.length&&e.set("_value",i)}},this.component=t}validateOptions(t){validateOptionsWithOptgroup(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){watchBoolean(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchJsonArrayString(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host option:checked::before {\n content: \"✓ \";\n }\n}",KolSelectDefaultStyle0=defaultStyleCss,isSelected=(t,e)=>Array.isArray(t)&&t.includes(e),KolSelect=class{async getValue(){return this.state._value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.selectRef)||void 0===t||t.focus()}renderOptgroup(t,e){var n;return h("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const i=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):h("option",{disabled:t.disabled,key:i,selected:isSelected(this.state._value,t.value),value:i},t.label)})))}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{key:"ba2c0f8702fedaee9cb639f6f8ed54b68bf2cbb3",class:{"kol-select":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"455f7e16906b52721be9b1e79a5015a101f2d849",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{key:"fa12f9428a693206a0e0450b9d588bc28da335cd",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"6f6b2c5104e6d9165f919fdbac2a2fd10d56b9a9",slot:"input"},h("form",{key:"6859a1a8a1a425d2fbd898afab3234e3b86c57e2",onSubmit:t=>{t.preventDefault(),propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},h("input",{key:"26e5874b3f93ff7e46ffb1a89bd8ed4595bfc99b",type:"submit",hidden:!0}),h("select",Object.assign({key:"8fbf4647f4600c9fadb0c0ba87b7c029c26c480e",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}),this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):h("option",{disabled:t.disabled,key:n,selected:isSelected(this.state._value,t.value),value:n},t.label)})))))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.selectRef=t},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}onInput(t){var e,n,i;this._value=Array.from((null===(e=this.selectRef)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),tryToDispatchKoliBriEvent("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,t,this._value)}onChange(t){var e,n;stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onChange)||void 0===n||n.call(e,t,this._value)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0};export{KolSelect as kol_select};
4
+ import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-ed42fc56.js";import{n as nonce}from"./dev.utils-4087c69c.js";import{t as tryToDispatchKoliBriEvent,s as stopPropagation}from"./events-29e84d75.js";import{g as getRenderStates}from"./controller-64301c42.js";import{I as InputIconController}from"./controller-icon-e20e2d63.js";import{f as fillKeyOptionMap,v as validateOptionsWithOptgroup}from"./controller-506a6c81.js";import{v as validateRows}from"./rows-64f9b5cb.js";import{b as watchBoolean,g as watchJsonArrayString}from"./prop.validators-c5e6ad2d.js";import{i as KolInputTag}from"./component-names-aa3cbc3c.js";import{p as propagateSubmitEventToForm}from"./controller-6c2714a5.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText-529a9dbb.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./icons-f3b7aabd.js";import"./index-541b643a.js";class SelectController extends InputIconController{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?e.set("_value",[n[0].value]):Array.isArray(t)&&i.length<t.length&&e.set("_value",i)}},this.component=t}validateOptions(t){validateOptionsWithOptgroup(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){watchBoolean(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchJsonArrayString(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host option:checked::before {\n content: \"✓ \";\n }\n}",KolSelectDefaultStyle0=defaultStyleCss,isSelected=(t,e)=>Array.isArray(t)&&t.includes(e),KolSelect=class{async getValue(){return this.state._value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.selectRef)||void 0===t||t.focus()}renderOptgroup(t,e){var n;return h("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const i=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):h("option",{disabled:t.disabled,key:i,selected:isSelected(this.state._value,t.value),value:i},t.label)})))}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{key:"3bc385543e42044dcfdd881d47b3b22ccddca4f6",class:{"kol-select":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"c5480b05b5244e53f66d7ea62e2777bbc1b4cfcc",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{key:"74b9fa4b8733a71e9a4f9aa2f7cccfec986fa8f0",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"c2906d81d3db2549755b6367a5879620f0ce8959",slot:"input"},h("form",{key:"fd1120cec7dd4a102dd0a858f18c98d12acdeb8d",onSubmit:t=>{t.preventDefault(),propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},h("input",{key:"343a2400b6b84a22619c71de19e32ca9a00f8fc2",type:"submit",hidden:!0}),h("select",Object.assign({key:"6cf83c500d06092cde9095140b2e46489aea0890",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}),this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):h("option",{disabled:t.disabled,key:n,selected:isSelected(this.state._value,t.value),value:n},t.label)})))))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.selectRef=t},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}onInput(t){var e,n,i;this._value=Array.from((null===(e=this.selectRef)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),tryToDispatchKoliBriEvent("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,t,this._value)}onChange(t){var e,n;stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onChange)||void 0===n||n.call(e,t,this._value)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0};export{KolSelect as kol_select};
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-a49af574.js";import{n as nonce}from"./dev.utils-8fad8415.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{I as InputIconController}from"./controller-icon-e20e2d63.js";import{f as fillKeyOptionMap,b as validateOptions}from"./controller-506a6c81.js";import{b as watchBoolean,i as watchString}from"./prop.validators-c5e6ad2d.js";import{i as KolInputTag,d as KolIconTag}from"./component-names-aa3cbc3c.js";import{g as getRenderStates}from"./controller-64301c42.js";import{t as translate}from"./i18n-5fe08f1c.js";import{c as clsx}from"./clsx-09a06a12.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText-8f2a64b6.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./i18n-7ea9f137.js";class SingleSelectController extends InputIconController{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,i))},this.component=t}validateOptions(t){validateOptions(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .single-select__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}",KolSingleSelectDefaultStyle0=defaultStyleCss,KolSingleSelect=class{async getValue(){return this.state._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((t=>t.label===this._inputValue))&&(this._inputValue=null===(t=this.state._options.find((t=>t.value===this.state._value)))||void 0===t?void 0:t.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(t,e){this.state._value=e.value,this._inputValue=e.label,this.controller.onFacade.onChange(t,e.value),this.controller.onFacade.onInput(t,!1,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter((e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())})))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((t=>t.label.toLowerCase().startsWith(e)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const t=showExpertSlot(this.state._label),{ariaDescribedBy:e}=getRenderStates(this.state);return h(Host,{key:"f1b125d154269f8798ca398d4758aa7f2bb2de89",class:"kol-single-select"},h("div",{key:"1feeaa993980bd0f3b232b7b7ec665255441f32a",class:`single-select ${!0===this.state._disabled?"disabled":""} `},h(KolInputTag,{key:"2fd4010e8c6693ed6379bb9abddbc4c98e821863",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},h("span",{key:"ebb88dbc40ed8fb316ddff6711f3911002b4a170",slot:"label"},t?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"d06368b2fb224322bf71c7729d49d3a94932c27d",slot:"input"},h("div",{key:"cb38b979a612d8627af2750299deaff727144315",class:"single-select__group"},h("input",Object.assign({key:"18e3663ff9240ee0099241aa3abcf565baf88e62",ref:this.catchRef,class:"single-select__input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.toggleListbox.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&h(KolIconTag,{key:"04057a3d47a0a010049b42cf80b1146006c610ea",_icons:"codicon codicon-close",_label:translate("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),h("button",{key:"83d7ab31fa2934ff6a4fc94a30973dd968642c91",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},h(KolIconTag,{key:"acd8cda1d3cb09f4d0f42abd08c8140add58cb68",_icons:"codicon codicon-triangle-down",_label:translate("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&h("ul",{key:"4ba32c4153350e0828dcc3d17200c3108aadc3fb",role:"listbox",class:clsx("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((t,e)=>h("li",{id:`option-${e}`,key:`-${e}`,ref:t=>{t&&(this.refOptions[e]=t)},tabIndex:-1,role:"option","aria-selected":this.state._value===t.value?"true":void 0,onClick:e=>{var i;this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=e,this.focusOption(e))},onFocus:()=>{this._focusedOptionIndex=e,this.focusOption(e)},class:"single-select__item",onKeyDown:e=>{var i;"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e),e.preventDefault())}},h("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${e}`,value:t.value,checked:this.state._value===t.value||e===this._focusedOptionIndex}),h("label",{htmlFor:`option-radio-${e}`,class:"radio-label"},t.label)))):h("li",{class:"single-select__no-results-message"},translate("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(t,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(t){registerInstance(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((t=>t.label===this._inputValue)):-1;this._focusedOptionIndex=t>=0?t:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:"",_options:[],_value:""},this.inputHasFocus=!1,this.controller=new SingleSelectController(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find((e=>e.value===t));this._inputValue=e?e.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,o;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(t,this._value&&this.oldValue!==(null===(o=this.refInput)||void 0===o?void 0:o.value))}static get delegatesFocus(){return!0}get host(){return getElement(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSingleSelect.style={default:KolSingleSelectDefaultStyle0};export{KolSingleSelect as kol_single_select};
4
+ import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-ed42fc56.js";import{n as nonce}from"./dev.utils-4087c69c.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{I as InputIconController}from"./controller-icon-e20e2d63.js";import{f as fillKeyOptionMap,b as validateOptions}from"./controller-506a6c81.js";import{b as watchBoolean,i as watchString}from"./prop.validators-c5e6ad2d.js";import{i as KolInputTag,d as KolIconTag}from"./component-names-aa3cbc3c.js";import{g as getRenderStates}from"./controller-64301c42.js";import{t as translate}from"./i18n-5fe08f1c.js";import{c as clsx}from"./clsx-09a06a12.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText-529a9dbb.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./i18n-7ea9f137.js";class SingleSelectController extends InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,i,n)=>{"_value"===n&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,i))},this.component=e}validateOptions(e){validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){watchBoolean(this.component,"_required",e)}validateValue(e){watchString(this.component,"_value",e)}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .single-select__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}",KolSingleSelectDefaultStyle0=defaultStyleCss,KolSingleSelect=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this.state._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(e,t){this.state._value=t.value,this._inputValue=t.label,this.controller.onFacade.onChange(e,t.value),this.controller.onFacade.onInput(e,!1,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var i,n;return null===(n=null===(i=t.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const e=showExpertSlot(this.state._label),{ariaDescribedBy:t}=getRenderStates(this.state);return h(Host,{key:"ebdff0301dfa87e96054e860672d637beeb8be1d",class:"kol-single-select"},h("div",{key:"692c5d73f1529831e68d90f290bd4f716aa61b43",class:`single-select ${!0===this.state._disabled?"disabled":""} `},h(KolInputTag,{key:"e6ab237dd5a45304f997b8aacdc7288c92b46990",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},h("span",{key:"d2d817a2cfdc9a239899969e7672241328525660",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"dd2049755362dabcf9193c38fbd39f296d0e5d6a",slot:"input"},h("div",{key:"3b2f11db77a370ebeda6fae410ef262507fcfbee",class:"single-select__group"},h("input",Object.assign({key:"3bc118d5f2622237cf9caea93ce7ec15da25dc3c",ref:this.catchRef,class:"single-select__input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.toggleListbox.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&h(KolIconTag,{key:"743415916dfc8d26b837cb7ed4bf8ffb4dc44974",_icons:"codicon codicon-close",_label:translate("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"single-select__delete"}),h("button",{key:"a600583a3b1965376d9f9ca605a894ddf7b02284",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},h(KolIconTag,{key:"e9857d1f416db917cd0c7b2fe36c37389ffcdbad",_icons:"codicon codicon-triangle-down",_label:translate("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&h("ul",{key:"90cecb3d203d040d2b6bc1e59a707588dd187e4f",role:"listbox",class:clsx("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,t)=>h("li",{id:`option-${t}`,key:`-${t}`,ref:e=>{e&&(this.refOptions[t]=e)},tabIndex:-1,role:"option","aria-selected":this.state._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{this._focusedOptionIndex=t,this.focusOption(t)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},h("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${t}`,value:e.value,checked:this.state._value===e.value||t===this._focusedOptionIndex}),h("label",{htmlFor:`option-radio-${t}`,class:"radio-label"},e.label)))):h("li",{class:"single-select__no-results-message"},translate("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,i;const n=(t,i)=>{var n;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(e,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){registerInstance(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:"",_options:[],_value:""},this.inputHasFocus=!1,this.controller=new SingleSelectController(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?t.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(e){var t,i,n,o;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),stopPropagation(e),tryToDispatchKoliBriEvent("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(e,this._value&&this.oldValue!==(null===(o=this.refInput)||void 0===o?void 0:o.value))}static get delegatesFocus(){return!0}get host(){return getElement(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSingleSelect.style={default:KolSingleSelectDefaultStyle0};export{KolSingleSelect as kol_single_select};
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{r as registerInstance,h,H as Host}from"./index-a49af574.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-768d04e9.js";import{w as watchNavLinks}from"./validation-1a210179.js";import{g as KolLinkWcTag}from"./component-names-aa3cbc3c.js";import{v as validateLabel}from"./label-d70e7c34.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-c5e6ad2d.js";import"./index-541b643a.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n display: grid;\n list-style: none;\n place-items: center;\n }\n ul li {\n height: 0;\n }\n .kol-link-wc a {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc a:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav=class{constructor(n){registerInstance(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"5ea83803fc89d53743361866ce8b871f93e8f3eb",class:"kol-skip-nav"},h("nav",{key:"1895f68248ebf407c4bdb441d56c2fc86892b798","aria-label":this.state._label},h("ul",{key:"701903212b0d1b7bec455f0ba3cb0d8487b3e840"},this.state._links.map(((n,e)=>h("li",{key:e},h(KolLinkWcTag,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:KolSkipNavDefaultStyle0};export{KolSkipNav as kol_skip_nav};
4
+ import{r as registerInstance,h,H as Host}from"./index-ed42fc56.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-768d04e9.js";import{w as watchNavLinks}from"./validation-1a210179.js";import{g as KolLinkWcTag}from"./component-names-aa3cbc3c.js";import{v as validateLabel}from"./label-d70e7c34.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-c5e6ad2d.js";import"./index-541b643a.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n display: grid;\n list-style: none;\n place-items: center;\n }\n ul li {\n height: 0;\n }\n .kol-link {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav=class{constructor(n){registerInstance(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"c4475d2ac72b100a4a40a9ab74ecee5b9f6ae736",class:"kol-skip-nav"},h("nav",{key:"a085486a7d1b57ad900fda8900a76a1de8f1dcfd","aria-label":this.state._label},h("ul",{key:"9f997ac1f6ef920cfd9aab295e68cea439a3680f"},this.state._links.map(((n,e)=>h("li",{key:e},h(KolLinkWcTag,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:KolSkipNavDefaultStyle0};export{KolSkipNav as kol_skip_nav};
@@ -1 +1 @@
1
- {"file":"kol-skip-nav.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,0lJAA0lJ,CAAC;AACnnJ,gCAAe,eAAe;;MCejB,UAAU;;;;;qBA6BiB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;;IA/BM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,IACzB,0EAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,6DACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;YACrD,QACC,UAAI,GAAG,EAAE,KAAK,IACb,EAAC,YAAY,oBAAK,IAAI,EAAiB,CACnC,EACJ;SACF,CAAC,CACE,CACA,CACA,EACN;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;","names":[],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\t.kol-link-wc a {\n\t\tleft: rem(-99999);\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1;\n\t}\n\n\t.kol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-skip-nav\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
1
+ {"file":"kol-skip-nav.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,glJAAglJ,CAAC;AACzmJ,gCAAe,eAAe;;MCejB,UAAU;;;;;qBA6BiB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;;IA/BM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,IACzB,0EAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,6DACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;YACrD,QACC,UAAI,GAAG,EAAE,KAAK,IACb,EAAC,YAAY,oBAAK,IAAI,EAAiB,CACnC,EACJ;SACF,CAAC,CACE,CACA,CACA,EACN;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;","names":[],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\t.kol-link {\n\t\tleft: rem(-99999);\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1;\n\n\t\t&:focus {\n\t\t\tbackground-color: #fff;\n\t\t\tleft: unset;\n\t\t\tposition: unset;\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-skip-nav\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{r as registerInstance,h,H as Host,F as Fragment}from"./index-a49af574.js";import{t as translate}from"./i18n-5fe08f1c.js";import{v as validateShow}from"./show-5d826542.js";import{w as watchValidator}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: calc(5rem / var(--kolibri-root-font-size, 16)) solid #333;\n animation: 3s linear infinite prixClipFix;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border-radius: 50%;\n border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:first-child {\n background-color: #000;\n z-index: 0;\n animation: 1s infinite spin1;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(2) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 1s infinite spin3;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .spin {\n display: block;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(n){switch(n){case"cycle":return h("span",{class:"loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"bg-spin-1"}),h("span",{class:"bg-spin-2"}),h("span",{class:"bg-spin-3"}),h("span",{class:"bg-neutral"}))}}const KolSpin=class{constructor(n){registerInstance(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return h(Host,{key:"c9c9feb29ef7ac4d0e0f6aac40013a6047310d6b",class:"kol-spin"},this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:KolSpinDefaultStyle0};export{KolSpin as kol_spin};
4
+ import{r as registerInstance,h,H as Host,F as Fragment}from"./index-ed42fc56.js";import{t as translate}from"./i18n-5fe08f1c.js";import{v as validateShow}from"./show-5d826542.js";import{w as watchValidator}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: calc(5rem / var(--kolibri-root-font-size, 16)) solid #333;\n animation: 3s linear infinite prixClipFix;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border-radius: 50%;\n border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:first-child {\n background-color: #000;\n z-index: 0;\n animation: 1s infinite spin1;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(2) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 1s infinite spin3;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .spin {\n display: block;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(n){switch(n){case"cycle":return h("span",{class:"loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"bg-spin-1"}),h("span",{class:"bg-spin-2"}),h("span",{class:"bg-spin-3"}),h("span",{class:"bg-neutral"}))}}const KolSpin=class{constructor(n){registerInstance(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return h(Host,{key:"eb389100d6f95babfdc0a46936cbfa02ad3f6182",class:"kol-spin"},this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:KolSpinDefaultStyle0};export{KolSpin as kol_spin};
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{r as registerInstance,h,H as Host}from"./index-a49af574.js";import{t as translate}from"./i18n-5fe08f1c.js";import{m as KolPopoverWcTag,a as KolButtonWcTag}from"./component-names-aa3cbc3c.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover {\n height: 0;\n position: absolute;\n }\n .kol-popover .popover {\n background-color: #fff;\n min-height: max-content;\n min-width: max-content;\n opacity: 0;\n position: absolute;\n }\n .kol-popover .show {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover .disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover .arrow {\n background-color: inherit;\n height: var(--font-size);\n position: absolute;\n rotate: 0.125turn;\n width: var(--font-size);\n z-index: -1;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return h(Host,{key:"d3892425d9d11f197860a4564ffd70c120f7b03c",class:"kol-split-button"},h("div",{key:"ad1eefef2d4afd1b21862faaf92c7e44fc51d46d",class:"split-button-root"},h(KolButtonWcTag,{key:"fedcf0e60dac1c1cb238828ce7d8f5c47cc99c78",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{key:"ea28cb5e29e5e48301597f3816da88ea60089314",class:"horizontal-line"}),h(KolButtonWcTag,{key:"87e31aa97726c9a9c9e80b43f5a87d51a02238a0",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"38bf2afd667db393b527c04c07e80f29ed7e9df2",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"4db1d90e1b41e602d6e4fc5a4a12c4d71ac6be6f"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0};export{KolSplitButton as kol_split_button};
4
+ import{r as registerInstance,h,H as Host}from"./index-ed42fc56.js";import{t as translate}from"./i18n-5fe08f1c.js";import{m as KolPopoverWcTag,a as KolButtonWcTag}from"./component-names-aa3cbc3c.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover {\n height: 0;\n position: absolute;\n }\n .kol-popover .popover {\n background-color: #fff;\n min-height: max-content;\n min-width: max-content;\n opacity: 0;\n position: absolute;\n }\n .kol-popover .show {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover .disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover .arrow {\n background-color: inherit;\n height: var(--font-size);\n position: absolute;\n rotate: 0.125turn;\n width: var(--font-size);\n z-index: -1;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return h(Host,{key:"ddcf029febe331482db74efb5178379d54dc3c7a",class:"kol-split-button"},h("div",{key:"ff07344d7fa0bfcd43b7bd67d3477f751f9b3327",class:"split-button-root"},h(KolButtonWcTag,{key:"0dac98bbbcde8f0141475b4d1634796cef02ba0d",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{key:"c9056bafd37896c5c38a07afea457415a7ccceab",class:"horizontal-line"}),h(KolButtonWcTag,{key:"f62e1506dd5ba1ea5f650e641492173e06743efc",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"98d55e1b2db53076dfc2e731e79e9bc4016fc2e0",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"a3ee880452532b8322c3f62415fd4506b7a8301e"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0};export{KolSplitButton as kol_split_button};
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{r as registerInstance,h,H as Host}from"./index-a49af574.js";import{t as translate}from"./i18n-5fe08f1c.js";import{v as validateLabel}from"./label-d70e7c34.js";import{i as watchString}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const KolSymbol=class{constructor(a){registerInstance(this,a),this._label=void 0,this._symbol=void 0,this.state={_label:translate("kol-warning"),_symbol:""}}render(){return h(Host,{key:"2f2f3e5a8a29ac4c42c0680ba5be729382c6c328",class:"kol-symbol"},h("span",{key:"1bf27b34686a8943c7fdc2fa898c251b2a131329","aria-label":this.state._label,role:"term"},this.state._symbol))}validateLabel(a){validateLabel(this,a,{required:!0})}validateSymbol(a){watchString(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateSymbol(this._symbol)}static get watchers(){return{_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{KolSymbol as kol_symbol};
4
+ import{r as registerInstance,h,H as Host}from"./index-ed42fc56.js";import{t as translate}from"./i18n-5fe08f1c.js";import{v as validateLabel}from"./label-d70e7c34.js";import{i as watchString}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const KolSymbol=class{constructor(a){registerInstance(this,a),this._label=void 0,this._symbol=void 0,this.state={_label:translate("kol-warning"),_symbol:""}}render(){return h(Host,{key:"ea3a214f28dd359428f7c3263c884de4365c4dd0",class:"kol-symbol"},h("span",{key:"d09793b71568079dce2ec150f3fa87eca5300abe","aria-label":this.state._label,role:"term"},this.state._symbol))}validateLabel(a){validateLabel(this,a,{required:!0})}validateSymbol(a){watchString(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateSymbol(this._symbol)}static get watchers(){return{_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{KolSymbol as kol_symbol};
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
- import{r as registerInstance,h,H as Host,g as getElement}from"./index-a49af574.js";import{t as translate}from"./i18n-5fe08f1c.js";import{p as KolPaginationTag,o as KolTableStatelessWcTag}from"./component-names-aa3cbc3c.js";import{t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,E as Events}from"./events-3111c1e8.js";import{w as watchValidator,s as setState,t as emptyStringByArrayHandler,i as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./prop.validators-c5e6ad2d.js";import{v as validateLabel}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}setState(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(e=s.vertical)||void 0===e||e.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return h("div",{class:"pagination"},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",null,h(KolPaginationTag,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Events.onSelectionChange])&&this.state._on[Events.onSelectionChange](t,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return h(Host,{key:"0637b51df24b703954c3e4e3f6dd6b5fdbe5d967",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,h(KolTableStatelessWcTag,{key:"c4aa2e137545638ac1137ff13c9425787a3f36b9",ref:this.catchRef,_data:a,_headerCells:l,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&s)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0};export{KolTableStateful as kol_table_stateful};
4
+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-ed42fc56.js";import{t as translate}from"./i18n-5fe08f1c.js";import{p as KolPaginationTag,o as KolTableStatelessWcTag}from"./component-names-aa3cbc3c.js";import{t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,E as Events}from"./events-3111c1e8.js";import{w as watchValidator,s as setState,t as emptyStringByArrayHandler,i as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./prop.validators-c5e6ad2d.js";import{v as validateLabel}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .kol-button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .kol-button__text,\n th.align-left .table-sort-button .kol-button__text {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .kol-button__text {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .kol-button__text {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}setState(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(e=s.vertical)||void 0===e||e.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return h("div",{class:"pagination"},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",null,h(KolPaginationTag,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Events.onSelectionChange])&&this.state._on[Events.onSelectionChange](t,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return h(Host,{key:"e898cfc70f398d71426a9ca6fff58421ac512978",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,h(KolTableStatelessWcTag,{key:"771fbc08b5053a9a55158aa8c3a8370934d97063",ref:this.catchRef,_data:a,_headerCells:l,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&s)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0};export{KolTableStateful as kol_table_stateful};