@public-ui/sample-react 3.0.0-rc.1 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (240) hide show
  1. package/dist/1068.js +2 -0
  2. package/dist/1219.js +2 -0
  3. package/dist/1258.js +2 -0
  4. package/dist/1298.js +2 -0
  5. package/dist/136.js +2 -0
  6. package/dist/1416.js +2 -0
  7. package/dist/1676.js +2 -0
  8. package/dist/1718.js +2 -0
  9. package/dist/1744.js +2 -0
  10. package/dist/1791.js +1 -1
  11. package/dist/2078.js +2 -0
  12. package/dist/2115.js +2 -0
  13. package/dist/2195.js +2 -0
  14. package/dist/3021.js +2 -0
  15. package/dist/3027.js +2 -0
  16. package/dist/3186.js +2 -0
  17. package/dist/{4288.js → 3241.js} +2 -2
  18. package/dist/364.js +2 -0
  19. package/dist/{2450.js → 3758.js} +2 -2
  20. package/dist/{7648.js → 3836.js} +2 -2
  21. package/dist/3872.js +2 -0
  22. package/dist/3879.js +2 -0
  23. package/dist/3949.js +2 -0
  24. package/dist/4211.js +2 -0
  25. package/dist/4350.js +2 -0
  26. package/dist/4390.js +2 -0
  27. package/dist/{2986.js → 4566.js} +2 -2
  28. package/dist/4662.js +2 -0
  29. package/dist/4928.js +2 -0
  30. package/dist/5000.js +2 -0
  31. package/dist/5151.js +2 -0
  32. package/dist/5171.js +2 -0
  33. package/dist/{6740.js → 5792.js} +2 -2
  34. package/dist/5876.js +2 -0
  35. package/dist/597.js +2 -0
  36. package/dist/6451.js +2 -0
  37. package/dist/{9148.js → 6480.js} +2 -2
  38. package/dist/{1325.js → 6577.js} +2 -2
  39. package/dist/6983.js +2 -0
  40. package/dist/7084.js +2 -0
  41. package/dist/7225.js +2 -0
  42. package/dist/7267.js +2 -0
  43. package/dist/7779.js +2 -0
  44. package/dist/7958.js +2 -0
  45. package/dist/7997.js +2 -0
  46. package/dist/8069.js +2 -0
  47. package/dist/8177.js +1 -1
  48. package/dist/8212.js +2 -0
  49. package/dist/8243.js +2 -0
  50. package/dist/8283.js +2 -0
  51. package/dist/8478.js +2 -0
  52. package/dist/851.js +2 -0
  53. package/dist/8573.js +2 -0
  54. package/dist/8728.js +2 -0
  55. package/dist/8808.js +2 -0
  56. package/dist/8999.js +2 -0
  57. package/dist/9068.js +2 -0
  58. package/dist/9130.js +2 -0
  59. package/dist/9162.js +2 -0
  60. package/dist/9219.js +2 -0
  61. package/dist/9423.js +2 -0
  62. package/dist/9430.js +2 -0
  63. package/dist/9542.js +2 -0
  64. package/dist/{7141.js → 9929.js} +2 -2
  65. package/dist/993.js +2 -0
  66. package/dist/index.html +0 -1
  67. package/dist/main.css +1 -1
  68. package/dist/main.js +1 -1
  69. package/package.json +15 -15
  70. package/public/index.html +0 -1
  71. package/src/App.tsx +0 -2
  72. package/src/components/handout/basic.tsx +18 -23
  73. package/src/components/input-date/partials/minMax.tsx +3 -3
  74. package/src/components/input-date/partials/variants.tsx +1 -1
  75. package/src/components/input-date/show-hide-msg.tsx +0 -1
  76. package/src/components/input-text/partials/cases.tsx +1 -1
  77. package/src/components/input-text/smart-button.tsx +14 -1
  78. package/src/components/input-text/text-formatter.tsx +1 -2
  79. package/src/components/link/access-key.tsx +1 -3
  80. package/src/components/nav/basic.tsx +8 -2
  81. package/src/components/nav/horizontal.tsx +2 -2
  82. package/src/components/pagination/basic.tsx +1 -1
  83. package/src/components/select/partials/cases.tsx +16 -1
  84. package/src/components/single-select/partials/cases.tsx +5 -4
  85. package/src/components/single-select/partials/variants.tsx +5 -5
  86. package/src/components/split-button/basic.tsx +2 -2
  87. package/src/components/table/column-alignment.tsx +12 -12
  88. package/src/components/table/complex-headers.tsx +3 -3
  89. package/src/components/table/horizontal-scrollbar.tsx +12 -6
  90. package/src/components/table/multi-sort.tsx +4 -4
  91. package/src/components/table/pagination-position.tsx +23 -5
  92. package/src/components/table/render-cell.tsx +4 -4
  93. package/src/components/table/sort-data.tsx +14 -16
  94. package/src/components/table/stateful-with-selection.tsx +5 -5
  95. package/src/components/table/stateful-with-single-selection.tsx +5 -5
  96. package/src/components/table/stateless-with-selection.tsx +6 -6
  97. package/src/components/table/stateless-with-single-selection.tsx +6 -6
  98. package/src/components/table/with-footer.tsx +3 -3
  99. package/src/components/table/with-pagination.tsx +3 -3
  100. package/src/react.main.tsx +2 -7
  101. package/src/scenarios/appointment-form/PersonalInformationForm.tsx +4 -1
  102. package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx +2 -2
  103. package/src/shares/routes.ts +0 -6
  104. package/dist/1073.js +0 -2
  105. package/dist/1392.js +0 -2
  106. package/dist/1604.js +0 -2
  107. package/dist/175.js +0 -2
  108. package/dist/178.js +0 -2
  109. package/dist/2220.js +0 -2
  110. package/dist/2444.js +0 -2
  111. package/dist/2671.js +0 -2
  112. package/dist/3030.js +0 -2
  113. package/dist/3270.js +0 -2
  114. package/dist/3340.js +0 -2
  115. package/dist/3392.js +0 -2
  116. package/dist/3529.js +0 -2
  117. package/dist/3756.js +0 -2
  118. package/dist/3960.js +0 -2
  119. package/dist/399.js +0 -2
  120. package/dist/4145.js +0 -2
  121. package/dist/4539.js +0 -2
  122. package/dist/4563.js +0 -2
  123. package/dist/4571.js +0 -2
  124. package/dist/5260.js +0 -2
  125. package/dist/5301.js +0 -2
  126. package/dist/5333.js +0 -2
  127. package/dist/5523.js +0 -2
  128. package/dist/5551.js +0 -2
  129. package/dist/5575.js +0 -2
  130. package/dist/5665.js +0 -2
  131. package/dist/572.js +0 -2
  132. package/dist/5873.js +0 -2
  133. package/dist/5879.js +0 -2
  134. package/dist/5964.js +0 -2
  135. package/dist/6005.js +0 -2
  136. package/dist/618.js +0 -2
  137. package/dist/623.js +0 -2
  138. package/dist/643.js +0 -2
  139. package/dist/6610.js +0 -2
  140. package/dist/6618.js +0 -2
  141. package/dist/6711.js +0 -2
  142. package/dist/6786.js +0 -2
  143. package/dist/685.js +0 -2
  144. package/dist/6950.js +0 -2
  145. package/dist/7055.js +0 -2
  146. package/dist/7106.js +0 -2
  147. package/dist/7146.js +0 -2
  148. package/dist/7287.js +0 -2
  149. package/dist/7599.js +0 -2
  150. package/dist/7668.js +0 -2
  151. package/dist/7855.js +0 -2
  152. package/dist/8165.js +0 -2
  153. package/dist/8306.js +0 -2
  154. package/dist/8543.js +0 -2
  155. package/dist/866.js +0 -2
  156. package/dist/8859.js +0 -2
  157. package/dist/904.js +0 -2
  158. package/dist/9522.js +0 -2
  159. package/dist/9625.js +0 -2
  160. package/dist/9625.js.LICENSE.txt +0 -3
  161. package/dist/971.js +0 -2
  162. package/dist/971.js.LICENSE.txt +0 -3
  163. package/dist/9712.js +0 -2
  164. package/dist/9712.js.LICENSE.txt +0 -3
  165. package/dist/976.js +0 -2
  166. package/dist/976.js.LICENSE.txt +0 -3
  167. package/dist/982.js +0 -2
  168. package/dist/982.js.LICENSE.txt +0 -3
  169. package/dist/986.js +0 -2
  170. package/dist/986.js.LICENSE.txt +0 -3
  171. package/src/components/button-group/basic.tsx +0 -34
  172. package/src/components/button-group/routes.ts +0 -8
  173. package/src/components/indented-text/basic.tsx +0 -37
  174. package/src/components/indented-text/routes.ts +0 -8
  175. package/src/components/link-group/basic.tsx +0 -23
  176. package/src/components/link-group/horizontal.tsx +0 -23
  177. package/src/components/link-group/routes.ts +0 -10
  178. /package/dist/{1073.js.LICENSE.txt → 1068.js.LICENSE.txt} +0 -0
  179. /package/dist/{1325.js.LICENSE.txt → 1219.js.LICENSE.txt} +0 -0
  180. /package/dist/{1392.js.LICENSE.txt → 1258.js.LICENSE.txt} +0 -0
  181. /package/dist/{1604.js.LICENSE.txt → 1298.js.LICENSE.txt} +0 -0
  182. /package/dist/{175.js.LICENSE.txt → 136.js.LICENSE.txt} +0 -0
  183. /package/dist/{178.js.LICENSE.txt → 1416.js.LICENSE.txt} +0 -0
  184. /package/dist/{2220.js.LICENSE.txt → 1676.js.LICENSE.txt} +0 -0
  185. /package/dist/{2444.js.LICENSE.txt → 1718.js.LICENSE.txt} +0 -0
  186. /package/dist/{2450.js.LICENSE.txt → 1744.js.LICENSE.txt} +0 -0
  187. /package/dist/{2671.js.LICENSE.txt → 2078.js.LICENSE.txt} +0 -0
  188. /package/dist/{2986.js.LICENSE.txt → 2115.js.LICENSE.txt} +0 -0
  189. /package/dist/{3030.js.LICENSE.txt → 2195.js.LICENSE.txt} +0 -0
  190. /package/dist/{3270.js.LICENSE.txt → 3021.js.LICENSE.txt} +0 -0
  191. /package/dist/{3340.js.LICENSE.txt → 3027.js.LICENSE.txt} +0 -0
  192. /package/dist/{3392.js.LICENSE.txt → 3186.js.LICENSE.txt} +0 -0
  193. /package/dist/{3529.js.LICENSE.txt → 3241.js.LICENSE.txt} +0 -0
  194. /package/dist/{3756.js.LICENSE.txt → 364.js.LICENSE.txt} +0 -0
  195. /package/dist/{3960.js.LICENSE.txt → 3758.js.LICENSE.txt} +0 -0
  196. /package/dist/{399.js.LICENSE.txt → 3836.js.LICENSE.txt} +0 -0
  197. /package/dist/{4145.js.LICENSE.txt → 3872.js.LICENSE.txt} +0 -0
  198. /package/dist/{4288.js.LICENSE.txt → 3879.js.LICENSE.txt} +0 -0
  199. /package/dist/{4539.js.LICENSE.txt → 3949.js.LICENSE.txt} +0 -0
  200. /package/dist/{4563.js.LICENSE.txt → 4211.js.LICENSE.txt} +0 -0
  201. /package/dist/{4571.js.LICENSE.txt → 4350.js.LICENSE.txt} +0 -0
  202. /package/dist/{5260.js.LICENSE.txt → 4390.js.LICENSE.txt} +0 -0
  203. /package/dist/{5301.js.LICENSE.txt → 4566.js.LICENSE.txt} +0 -0
  204. /package/dist/{5333.js.LICENSE.txt → 4662.js.LICENSE.txt} +0 -0
  205. /package/dist/{5523.js.LICENSE.txt → 4928.js.LICENSE.txt} +0 -0
  206. /package/dist/{5551.js.LICENSE.txt → 5000.js.LICENSE.txt} +0 -0
  207. /package/dist/{5575.js.LICENSE.txt → 5151.js.LICENSE.txt} +0 -0
  208. /package/dist/{5665.js.LICENSE.txt → 5171.js.LICENSE.txt} +0 -0
  209. /package/dist/{572.js.LICENSE.txt → 5792.js.LICENSE.txt} +0 -0
  210. /package/dist/{5873.js.LICENSE.txt → 5876.js.LICENSE.txt} +0 -0
  211. /package/dist/{5879.js.LICENSE.txt → 597.js.LICENSE.txt} +0 -0
  212. /package/dist/{5964.js.LICENSE.txt → 6451.js.LICENSE.txt} +0 -0
  213. /package/dist/{6005.js.LICENSE.txt → 6480.js.LICENSE.txt} +0 -0
  214. /package/dist/{618.js.LICENSE.txt → 6577.js.LICENSE.txt} +0 -0
  215. /package/dist/{623.js.LICENSE.txt → 6983.js.LICENSE.txt} +0 -0
  216. /package/dist/{643.js.LICENSE.txt → 7084.js.LICENSE.txt} +0 -0
  217. /package/dist/{6610.js.LICENSE.txt → 7225.js.LICENSE.txt} +0 -0
  218. /package/dist/{6618.js.LICENSE.txt → 7267.js.LICENSE.txt} +0 -0
  219. /package/dist/{6711.js.LICENSE.txt → 7779.js.LICENSE.txt} +0 -0
  220. /package/dist/{6740.js.LICENSE.txt → 7958.js.LICENSE.txt} +0 -0
  221. /package/dist/{6786.js.LICENSE.txt → 7997.js.LICENSE.txt} +0 -0
  222. /package/dist/{685.js.LICENSE.txt → 8069.js.LICENSE.txt} +0 -0
  223. /package/dist/{6950.js.LICENSE.txt → 8212.js.LICENSE.txt} +0 -0
  224. /package/dist/{7055.js.LICENSE.txt → 8243.js.LICENSE.txt} +0 -0
  225. /package/dist/{7106.js.LICENSE.txt → 8283.js.LICENSE.txt} +0 -0
  226. /package/dist/{7141.js.LICENSE.txt → 8478.js.LICENSE.txt} +0 -0
  227. /package/dist/{7146.js.LICENSE.txt → 851.js.LICENSE.txt} +0 -0
  228. /package/dist/{7287.js.LICENSE.txt → 8573.js.LICENSE.txt} +0 -0
  229. /package/dist/{7599.js.LICENSE.txt → 8728.js.LICENSE.txt} +0 -0
  230. /package/dist/{7648.js.LICENSE.txt → 8808.js.LICENSE.txt} +0 -0
  231. /package/dist/{7668.js.LICENSE.txt → 8999.js.LICENSE.txt} +0 -0
  232. /package/dist/{7855.js.LICENSE.txt → 9068.js.LICENSE.txt} +0 -0
  233. /package/dist/{8165.js.LICENSE.txt → 9130.js.LICENSE.txt} +0 -0
  234. /package/dist/{8306.js.LICENSE.txt → 9162.js.LICENSE.txt} +0 -0
  235. /package/dist/{8543.js.LICENSE.txt → 9219.js.LICENSE.txt} +0 -0
  236. /package/dist/{866.js.LICENSE.txt → 9423.js.LICENSE.txt} +0 -0
  237. /package/dist/{8859.js.LICENSE.txt → 9430.js.LICENSE.txt} +0 -0
  238. /package/dist/{904.js.LICENSE.txt → 9542.js.LICENSE.txt} +0 -0
  239. /package/dist/{9148.js.LICENSE.txt → 9929.js.LICENSE.txt} +0 -0
  240. /package/dist/{9522.js.LICENSE.txt → 993.js.LICENSE.txt} +0 -0
@@ -1,7 +1,7 @@
1
1
  import type { FC } from 'react';
2
2
  import React from 'react';
3
3
 
4
- import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
4
+ import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react';
5
5
 
6
6
  import { getRoot } from '../../shares/react-roots';
7
7
  import { SampleDescription } from '../SampleDescription';
@@ -80,7 +80,7 @@ const HEADERS: KoliBriTableHeaders = {
80
80
  render: (el, cell) => {
81
81
  el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
82
82
  },
83
- sort: (data) => data.sort((data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime()),
83
+ compareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),
84
84
  },
85
85
  {
86
86
  label: 'Action (react)',
@@ -112,9 +112,9 @@ const HEADERS: KoliBriTableHeaders = {
112
112
  export const TableRenderCell: FC = () => (
113
113
  <>
114
114
  <SampleDescription>
115
- <p>This sample shows KolTable using React render functions for the cell contents.</p>
115
+ <p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
116
116
  </SampleDescription>
117
117
 
118
- <KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
118
+ <KolTableStateful _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
119
119
  </>
120
120
  );
@@ -1,7 +1,7 @@
1
1
  import type { FC } from 'react';
2
2
  import React from 'react';
3
3
 
4
- import { KolHeading, KolTable } from '@public-ui/react';
4
+ import { KolHeading, KolTableStateful } from '@public-ui/react';
5
5
  import type { KoliBriTableHeaders } from '@public-ui/components';
6
6
  import type { Data } from './test-data';
7
7
  import { DATA } from './test-data';
@@ -22,12 +22,11 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
22
22
  key: 'date',
23
23
  textAlign: 'center',
24
24
  render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
25
- sort: (data) =>
26
- data.sort((data0, data1) => {
27
- if ((data0 as Data).date < (data1 as Data).date) return -1;
28
- else if ((data1 as Data).date < (data0 as Data).date) return 1;
29
- else return 0;
30
- }),
25
+ compareFn: (data0, data1) => {
26
+ if ((data0 as Data).date < (data1 as Data).date) return -1;
27
+ else if ((data1 as Data).date < (data0 as Data).date) return 1;
28
+ else return 0;
29
+ },
31
30
  },
32
31
  ],
33
32
  ],
@@ -42,12 +41,11 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
42
41
  key: 'date',
43
42
  textAlign: 'center',
44
43
  render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
45
- sort: (data) =>
46
- data.sort((data0, data1) => {
47
- if ((data0 as Data).date < (data1 as Data).date) return -1;
48
- else if ((data1 as Data).date < (data0 as Data).date) return 1;
49
- else return 0;
50
- }),
44
+ compareFn: (data0, data1) => {
45
+ if ((data0 as Data).date < (data1 as Data).date) return -1;
46
+ else if ((data1 as Data).date < (data0 as Data).date) return 1;
47
+ else return 0;
48
+ },
51
49
  },
52
50
  ],
53
51
  ],
@@ -56,17 +54,17 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
56
54
  export const TableSortData: FC = () => (
57
55
  <>
58
56
  <SampleDescription>
59
- <p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
57
+ <p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
60
58
  </SampleDescription>
61
59
 
62
60
  <section className="w-full grid gap-4">
63
61
  <section className="grid gap-4">
64
62
  <KolHeading _level={2} _label="Vertical" />
65
- <KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
63
+ <KolTableStateful _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
66
64
  </section>
67
65
  <section className="grid gap-4">
68
66
  <KolHeading _level={2} _label="Horizontal" />
69
- <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
67
+ <KolTableStateful _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
70
68
  </section>
71
69
  </section>
72
70
  </>
@@ -1,10 +1,10 @@
1
1
  import type { FC } from 'react';
2
2
  import React, { useEffect, useRef, useState } from 'react';
3
- import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
3
+ import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
- import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
5
+ import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
6
+ import { KolEvent } from '@public-ui/components';
6
7
  import { getRoot } from '../../shares/react-roots';
7
- import type { KoliBriTableCell } from '@public-ui/components';
8
8
  import { useToasterService } from '../../hooks/useToasterService';
9
9
 
10
10
  const DATA = [
@@ -48,11 +48,11 @@ export const TableStatefulWithSelection: FC = () => {
48
48
 
49
49
  useEffect(() => {
50
50
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
51
- kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
51
+ kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
52
52
 
53
53
  return () => {
54
54
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
55
- kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
55
+ kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
56
56
  };
57
57
  }, [kolTableStatefulRef]);
58
58
 
@@ -1,10 +1,10 @@
1
1
  import type { FC } from 'react';
2
2
  import React, { useEffect, useRef, useState } from 'react';
3
- import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
3
+ import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
- import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
5
+ import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
6
+ import { KolEvent } from '@public-ui/components';
6
7
  import { getRoot } from '../../shares/react-roots';
7
- import type { KoliBriTableCell } from '@public-ui/components';
8
8
  import { useToasterService } from '../../hooks/useToasterService';
9
9
 
10
10
  const DATA = [
@@ -50,11 +50,11 @@ export const TableStatefulWithSingleSelection: FC = () => {
50
50
 
51
51
  useEffect(() => {
52
52
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
53
- kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
53
+ kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
54
54
 
55
55
  return () => {
56
56
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
57
- kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
57
+ kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
58
58
  };
59
59
  }, [kolTableStatefulRef]);
60
60
 
@@ -1,10 +1,10 @@
1
1
  import type { FC } from 'react';
2
- import React, { useEffect, useState, useRef } from 'react';
3
- import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
2
+ import React, { useEffect, useRef, useState } from 'react';
3
+ import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
- import type { KoliBriTableSelection } from '@public-ui/components';
5
+ import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
6
+ import { KolEvent } from '@public-ui/components';
6
7
  import { getRoot } from '../../shares/react-roots';
7
- import type { KoliBriTableCell } from '@public-ui/components';
8
8
  import { useToasterService } from '../../hooks/useToasterService';
9
9
 
10
10
  const DATA = [
@@ -44,11 +44,11 @@ export const TableStatelessWithSelection: FC = () => {
44
44
 
45
45
  useEffect(() => {
46
46
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
47
- kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
47
+ kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
48
48
 
49
49
  return () => {
50
50
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
51
- kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
51
+ kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
52
52
  };
53
53
  }, [kolTableStatelessRef]);
54
54
 
@@ -1,10 +1,10 @@
1
1
  import type { FC } from 'react';
2
- import React, { useEffect, useState, useRef } from 'react';
3
- import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
2
+ import React, { useEffect, useRef, useState } from 'react';
3
+ import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
- import type { KoliBriTableSelection } from '@public-ui/components';
5
+ import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
6
+ import { KolEvent } from '@public-ui/components';
6
7
  import { getRoot } from '../../shares/react-roots';
7
- import type { KoliBriTableCell } from '@public-ui/components';
8
8
  import { useToasterService } from '../../hooks/useToasterService';
9
9
 
10
10
  const DATA = [
@@ -45,11 +45,11 @@ export const TableStatelessWithSingleSelection: FC = () => {
45
45
 
46
46
  useEffect(() => {
47
47
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
48
- kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
48
+ kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
49
49
 
50
50
  return () => {
51
51
  // @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
52
- kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
52
+ kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
53
53
  };
54
54
  }, [kolTableStatelessRef]);
55
55
 
@@ -1,15 +1,15 @@
1
1
  import type { FC } from 'react';
2
2
  import React from 'react';
3
- import { KolTable } from '@public-ui/react';
3
+ import { KolTableStateful } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
5
 
6
6
  export const TableWithFooter: FC = () => (
7
7
  <>
8
8
  <SampleDescription>
9
- <p>This sample shows KolTable with footer data.</p>
9
+ <p>This sample shows KolTableStateful with footer data.</p>
10
10
  </SampleDescription>
11
11
 
12
- <KolTable
12
+ <KolTableStateful
13
13
  className="w-full"
14
14
  _label="Business hours"
15
15
  _headers={{
@@ -1,7 +1,7 @@
1
1
  import type { FC } from 'react';
2
2
  import React from 'react';
3
3
 
4
- import { KolTable } from '@public-ui/react';
4
+ import { KolTableStateful } from '@public-ui/react';
5
5
 
6
6
  import { DATE_FORMATTER } from './formatter';
7
7
  import { SampleDescription } from '../SampleDescription';
@@ -23,10 +23,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
23
23
  export const TableWithPagination: FC = () => (
24
24
  <>
25
25
  <SampleDescription>
26
- <p>This sample shows how KolTable can be navigated using a pagination.</p>
26
+ <p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
27
27
  </SampleDescription>
28
28
  <div className="w-full">
29
- <KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
29
+ <KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
30
30
  </div>
31
31
  </>
32
32
  );
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
3
3
  import { HashRouter as Router } from 'react-router-dom';
4
4
  import { setTagNameTransformer } from '@public-ui/react';
5
5
 
6
- import { bootstrap, isInitialized, KoliBriDevHelper } from '@public-ui/components';
6
+ import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
7
7
  import { defineCustomElements } from '@public-ui/components/dist/loader';
8
8
  import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
9
9
 
@@ -40,9 +40,6 @@ const getThemes = async () => {
40
40
 
41
41
  void (async () => {
42
42
  try {
43
- console.info('bootstap is initialized: ', isInitialized());
44
- console.info('start kolibri bootstrap');
45
-
46
43
  await bootstrap(
47
44
  await getThemes(),
48
45
  () => {
@@ -107,8 +104,6 @@ void (async () => {
107
104
  },
108
105
  );
109
106
  }
110
-
111
- console.info('bootstap is initialized: ', isInitialized());
112
107
  } catch (error) {
113
108
  console.warn('Theme registration failed:', error);
114
109
  }
@@ -133,7 +128,7 @@ void (async () => {
133
128
  const root = createRoot(htmlDivElement);
134
129
  root.render(
135
130
  <StrictMode>
136
- <Router>
131
+ <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
137
132
  <App />
138
133
  </Router>
139
134
  </StrictMode>,
@@ -145,7 +145,10 @@ export function PersonalInformationForm() {
145
145
  id="field-email"
146
146
  _label="E-Mail"
147
147
  _value={field.value}
148
- _error={form.errors.email || ''}
148
+ _msg={{
149
+ _type: 'error',
150
+ _description: form.errors.email || '',
151
+ }}
149
152
  _touched={form.touched.email}
150
153
  _required
151
154
  _on={{
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { KolTable, KolTabs, KolNav } from '@public-ui/react';
2
+ import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react';
3
3
  import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
4
4
  import { SampleDescription } from '../../components/SampleDescription';
5
5
  import { LINKS } from '../../components/nav/links';
@@ -62,7 +62,7 @@ function TableHorizontalScrollbarAdvanced() {
62
62
  <div className="content">
63
63
  <KolTabs _tabs={TABS} _align="top" _label="Demo Tabs">
64
64
  <div style={{ overflow: 'hidden' }}>
65
- <KolTable
65
+ <KolTableStateful
66
66
  _label="Table for demonstration purposes with horizontal scrollbar"
67
67
  _minWidth={tableWith}
68
68
  _headers={HEADERS}
@@ -4,7 +4,6 @@ import { ALERT_ROUTES } from '../components/alert/routes';
4
4
  import { AVATAR_ROUTES } from '../components/avatar/routes';
5
5
  import { BADGE_ROUTES } from '../components/badge/routes';
6
6
  import { BREADCRUMB_ROUTES } from '../components/breadcrumb/routes';
7
- import { BUTTON_GROUP_ROUTES } from '../components/button-group/routes';
8
7
  import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
9
8
  import { BUTTON_ROUTES } from '../components/button/routes';
10
9
  import { CARD_ROUTES } from '../components/card/routes';
@@ -15,7 +14,6 @@ import { HANDOUT_ROUTES } from '../components/handout/routes';
15
14
  import { HEADING_ROUTES } from '../components/heading/routes';
16
15
  import { ICON_ROUTES } from '../components/icon/routes';
17
16
  import { IMAGE_ROUTES } from '../components/image/routes';
18
- import { INDENTED_ROUTES } from '../components/indented-text/routes';
19
17
  import { INPUT_CHECKBOX_ROUTES } from '../components/input-checkbox/routes';
20
18
  import { INPUT_COLOR_ROUTES } from '../components/input-color/routes';
21
19
  import { INPUT_DATE_ROUTES } from '../components/input-date/routes';
@@ -28,7 +26,6 @@ import { INPUT_RANGE_ROUTES } from '../components/input-range/routes';
28
26
  import { INPUT_TEXT_ROUTES } from '../components/input-text/routes';
29
27
  import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
30
28
  import { LINK_BUTTON_ROUTES } from '../components/link-button/routes';
31
- import { LINK_GROUP_ROUTES } from '../components/link-group/routes';
32
29
  import { LINK_ROUTES } from '../components/link/routes';
33
30
  import { MODAL_ROUTES } from '../components/modal/routes';
34
31
  import { NAV_ROUTES } from '../components/nav/routes';
@@ -59,7 +56,6 @@ export const ROUTES: Routes = {
59
56
  ...AVATAR_ROUTES,
60
57
  ...BADGE_ROUTES,
61
58
  ...BREADCRUMB_ROUTES,
62
- ...BUTTON_GROUP_ROUTES,
63
59
  ...BUTTON_LINK_ROUTES,
64
60
  ...BUTTON_ROUTES,
65
61
  ...CARD_ROUTES,
@@ -70,7 +66,6 @@ export const ROUTES: Routes = {
70
66
  ...HEADING_ROUTES,
71
67
  ...ICON_ROUTES,
72
68
  ...IMAGE_ROUTES,
73
- ...INDENTED_ROUTES,
74
69
  ...INPUT_CHECKBOX_ROUTES,
75
70
  ...INPUT_COLOR_ROUTES,
76
71
  ...INPUT_DATE_ROUTES,
@@ -83,7 +78,6 @@ export const ROUTES: Routes = {
83
78
  ...INPUT_TEXT_ROUTES,
84
79
  ...KOLIBRI_ROUTES,
85
80
  ...LINK_BUTTON_ROUTES,
86
- ...LINK_GROUP_ROUTES,
87
81
  ...LINK_ROUTES,
88
82
  ...MODAL_ROUTES,
89
83
  ...NAV_ROUTES,
package/dist/1073.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 1073.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1073],{1227:(e,n,t)=>{t.d(n,{c:()=>s,h:()=>m,v:()=>f});var o=t(4192),r=t(8474),a={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},i={red:0,orange:60,yellow:120,green:180,blue:240,purple:300},l=function(e){var n,t,o=[],r=1;if("string"==typeof e)if(e=e.toLowerCase(),a[e])o=a[e].slice(),t="rgb";else if("transparent"===e)r=0,t="rgb",o=[0,0,0];else if(/^#[A-Fa-f0-9]+$/.test(e)){var l=e.slice(1);r=1,(c=l.length)<=4?(o=[parseInt(l[0]+l[0],16),parseInt(l[1]+l[1],16),parseInt(l[2]+l[2],16)],4===c&&(r=parseInt(l[3]+l[3],16)/255)):(o=[parseInt(l[0]+l[1],16),parseInt(l[2]+l[3],16),parseInt(l[4]+l[5],16)],8===c&&(r=parseInt(l[6]+l[7],16)/255)),o[0]||(o[0]=0),o[1]||(o[1]=0),o[2]||(o[2]=0),t="rgb"}else if(n=/^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(e)){var s=n[1],d="rgb"===s;t=l=s.replace(/a$/,"");var c="cmyk"===l?4:"gray"===l?1:3;o=n[2].trim().split(/\s*[,\/]\s*|\s+/).map((function(e,n){if(/%$/.test(e))return n===c?parseFloat(e)/100:"rgb"===l?255*parseFloat(e)/100:parseFloat(e);if("h"===l[n]){if(/deg$/.test(e))return parseFloat(e);if(void 0!==i[e])return i[e]}return parseFloat(e)})),s===l&&o.push(1),r=d||void 0===o[c]?1:o[c],o=o.slice(0,c)}else e.length>10&&/[0-9](?:\s|\/)/.test(e)&&(o=e.match(/([0-9]+)/g).map((function(e){return parseFloat(e)})),t=e.match(/([a-z])/gi).join("").toLowerCase());else isNaN(e)?Array.isArray(e)||e.length?(o=[e[0],e[1],e[2]],t="rgb",r=4===e.length?e[3]:1):e instanceof Object&&(null!=e.r||null!=e.red||null!=e.R?(t="rgb",o=[e.r||e.red||e.R||0,e.g||e.green||e.G||0,e.b||e.blue||e.B||0]):(t="hsl",o=[e.h||e.hue||e.H||0,e.s||e.saturation||e.S||0,e.l||e.lightness||e.L||e.b||e.brightness]),r=e.a||e.alpha||e.opacity||1,null!=e.opacity&&(r/=100)):(t="rgb",o=[e>>>16,(65280&e)>>>8,255&e]);return{space:t,values:o,alpha:r}};const s=function(e){var n;Array.isArray(e)&&e.raw&&(e=String.raw.apply(null,arguments));var t=l(e);if(!t.space)return[];var o=[0,0,0],r="h"===t.space[0]?[360,100,100]:[255,255,255];return(n=Array(3))[0]=Math.min(Math.max(t.values[0],o[0]),r[0]),n[1]=Math.min(Math.max(t.values[1],o[1]),r[1]),n[2]=Math.min(Math.max(t.values[2],o[2]),r[2]),"h"===t.space[0]&&(n=function(e){var n,t,o,r,a,i=e[0]/360,l=e[1]/100,s=e[2]/100,d=0;if(0===l)return[a=255*s,a,a];for(n=2*s-(t=s<.5?s*(1+l):s+l-s*l),r=[0,0,0];d<3;)(o=i+1/3*-(d-1))<0?o++:o>1&&o--,a=6*o<1?n+6*(t-n)*o:2*o<1?t:3*o<2?n+(t-n)*(2/3-o)*6:n,r[d++]=255*a;return r}(n)),n.push(Math.min(Math.max(t.alpha,0),1)),n},d=(e,n,t,o=1)=>{const a=[Math.max(Math.min(Math.round(n[0]+o*Math.max(1,n[0]/100)),255),0),Math.max(Math.min(Math.round(n[1]+o*Math.max(1,n[1]/100)),255),0),Math.max(Math.min(Math.round(n[2]+o*Math.max(1,n[2]/100)),255),0)],i=(0,r.d)(r.r.hex(`rgba(${e.join(",")},1)`),r.r.hex(`rgba(${a.join(",")},1)`)),l=a[0]+a[1]+a[2];return 0===l||765===l||i>t?{background:e,foreground:a,contrast:i}:d(e,a,t,o)},c=new Map,u=(e,n=7)=>{let t=[0,0,0,1],o=[255,255,255,1];"string"==typeof e?(t=s(e),o=t):"object"==typeof e&&null!==e&&"string"==typeof e.background&&"string"==typeof e.foreground&&(t=s(e.background),o="string"==typeof e.foreground?s(e.foreground):t);const a=(299*t[0]+587*t[1]+114*t[2])/1e3>=128?-1:1;const i=((e,n,t,o=1)=>{if(c.has(e))return c.get(e);const r=d(e,n,t,o);return c.set(e,r),r})([t[0],t[1],t[2]],[o[0],o[1],o[2]],n,a);return o=[...i.foreground,1],{background:r.r.hex(`rgba(${t.join(",")})`),foreground:r.r.hex(`rgba(${o.join(",")})`),contrast:i.contrast}},h=/^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;function g(e){if(e)if("string"==typeof e){if(function(e){return h.test(e)}(e))return{type:"string",valid:!0,value:e};{const n=function(e){if(e.startsWith("{"))try{const n=JSON.parse(e);if(b(n))return{type:"ColorPair",value:n}}catch(e){return{type:null,value:null}}return{type:null,value:null}}(e);if(n.value)return{type:n.type,valid:!0,value:n.value}}}else{const n=e;if(b(n))return{type:"ColorPair",valid:!0,value:n}}return{type:null,valid:!1,value:""}}function b(e){return!("object"!=typeof e||!e||"string"!=typeof e.backgroundColor||!("string"==typeof e.foregroundColor||e.foregroundColor&&"string"==typeof e.foregroundColor.primary&&"string"==typeof e.foregroundColor.secondary&&"string"==typeof e.foregroundColor.neutral))}function p(e){const n=g(e);switch(n.type){case null:return!1;case"string":case"ColorPair":return n.valid}}const f=(e,n,t)=>{(0,r.w)(e,"_color",p,new Set(["rgb in hex","ColorPair"]),n,t)},m=e=>{var n;let t;const a=g(e);switch(a.type){case"string":t=u(a.value);break;case"ColorPair":{const e=a.value;let o="";"string"==typeof e.foregroundColor?o=e.foregroundColor:(null===(n=e.foregroundColor)||void 0===n?void 0:n.primary)&&(o=e.foregroundColor.primary),o&&"string"==typeof o||(o="#fff"),t=u({background:e.backgroundColor,foreground:o});break}case null:o.L.warn(`_color was empty or invalid (${JSON.stringify(e)})`,{forceLog:!0}),t=u({background:"#000",foreground:"#000"})}return t.contrast<7&&(0,r.a)(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is to low, between the color pair ${t.background} and ${t.foreground}.`),{backgroundColor:t.background,foregroundColor:t.foreground}}},3804:(e,n,t)=>{t.d(n,{S:()=>i,a:()=>a,b:()=>o,i:()=>r});const o=e=>"object"==typeof e&&null!==e,r=(e,n=0)=>"string"==typeof e&&e.length>=n,a=e=>{if("object"!=typeof e||null===e)return r(e,1);for(const n in e)if(!1===r(n,1))return!1;return!0},i=new Event("StateChange")},8395:(e,n,t)=>{t.d(n,{i:()=>l,n:()=>d,r:()=>s});var o=t(6916),r=t(5475),a=t(4192);const i=()=>{let e=(0,a.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,a.d)(),"KoliBri",{value:e,writable:!1})),e},l=()=>{(()=>{const e=(0,a.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const n=e.getAttribute("content");"string"==typeof n&&((0,a.s)(n.includes("dev-mode=true")),(0,a.b)(n.includes("experimental-mode=true")),(0,a.c)(n.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},s=()=>{!0!==i().adviceShown&&(Object.defineProperty(i(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===r.p&&(d=()=>"nonce")},9510:(e,n,t)=>{t.d(n,{i:()=>i,v:()=>l});var o=t(8474),r=t(3804);const a=(e,n,t)=>{(0,r.b)(t)?e[n]=t:(0,r.i)(t,1)&&(e[n]={icon:t})},i=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,r.a)(e.style))&&(void 0===e.label||(0,r.i)(e.label))&&(0,r.i)(e.icon,1),l=(e,n,t={})=>{(0,o.o)(n,(()=>{var l;try{n=(0,o.p)(n)}catch(e){}(0,o.w)(e,"_icons",(e=>{const n="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||n||(0,r.i)(e,1)||"object"==typeof e&&null!==e&&((0,r.i)(e.left,1)||i(e.left)||(0,r.i)(e.right,1)||i(e.right)||(0,r.i)(e.top,1)||i(e.top)||(0,r.i)(e.bottom,1)||i(e.bottom))}),new Set(["KoliBriIcon"]),n,Object.assign(Object.assign({},t),{defaultValue:{},hooks:{afterPatch:null===(l=t.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,n,o,i)=>{var l,s;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(s=t.hooks)||void 0===s||s.beforePatch(e,n,o,i)),(e=>{var n,t,o;if(null===(n=e.nextState)||void 0===n?void 0:n.has("_icons")){const n=null===(t=e.nextState)||void 0===t?void 0:t.get("_icons");null===(o=e.nextState)||void 0===o||o.set("_icons",(e=>{let n={};return(0,r.i)(e,1)?n={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(n,"top",e.top),a(n,"right",e.right),a(n,"bottom",e.bottom),a(n,"left",e.left)),n})(n))}})(o)}}}))}))}},1073:(e,n,t)=>{t.r(n),t.d(n,{kol_badge:()=>u});var o=t(6916),r=t(8395),a=t(3179),i=t(3928),l=t(1227),s=t(2671),d=t(9510),c=t(8474);(0,c.f)("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const u=class{constructor(e){(0,o.r)(this,e),this.bgColorStr="#000",this.colorStr="#fff",this.id=(0,r.n)(),this.handleColorChange=e=>{const n=(0,l.h)(e);this.bgColorStr=n.backgroundColor,this.colorStr=n.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}}}renderSmartButton(e){return(0,o.h)(a.a,{class:"kol-badge__smart-button",_ariaControls:this.id,_customClass:e._customClass,_disabled:e._disabled,_hideLabel:!0,_icons:e._icons,_id:e._id,_label:e._label,_on:e._on,_tooltipAlign:e._tooltipAlign,_variant:e._variant})}render(){const e="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return(0,o.h)("span",{key:"c04540b377e88484c6c982be4d411937ef3618ef",class:(0,i.c)("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},(0,o.h)(s.K,{key:"d01ea028555a90f21229d1584bfb93a5c2a00c25",class:"kol-badge__label",id:e?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),e&&this.renderSmartButton(this.state._smartButton))}validateIcons(e){(0,d.v)(this,e)}validateColor(e){(0,l.v)(this,e,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(e){(0,c.o)(e,(()=>{try{e=(0,c.p)(e)}catch(e){}(0,c.s)(this,"_smartButton",e)}))}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};u.style={default:"/*\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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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-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 .kol-badge {\n display: inline-flex;\n place-items: center;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}"}}}]);
package/dist/1392.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 1392.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1392],{1392:(n,e,t)=>{t.r(e),t.d(e,{kol_tree:()=>a});var i=t(6916),o=t(3179);const a=class{constructor(n){(0,i.r)(this,n),this._label=void 0}render(){return(0,i.h)(i.H,{key:"85948718a433a149151dba8a53aa8d42813621a9",class:"kol-tree"},(0,i.h)(o.q,{key:"6fc305e9913734e6374a870267e9966e81fffe8f",_label:this._label},(0,i.h)("slot",{key:"a0701d8800a0d80979e036b19209f2fc619994f1"})))}};a.style={default:"/*\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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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 .tree ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree:focus-within {\n outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}"}}}]);
package/dist/1604.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 1604.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1604],{1604:(n,t,e)=>{e.r(t),e.d(t,{kol_button:()=>s});var i=e(6916),o=e(3179),a=(n,t,e)=>new Promise(((i,o)=>{var a=n=>{try{l(e.next(n))}catch(n){o(n)}},s=n=>{try{l(e.throw(n))}catch(n){o(n)}},l=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,s);l((e=e.apply(n,t)).next())}));const s=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=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._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}getValue(){return a(this,null,(function*(){return this._value}))}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(o.a,{key:"d74adc5d321851f61762796d8bc7704630bf678d",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},(0,i.h)("slot",{key:"7ef100de9bb79db5d6df653e478248ec2c155d6c",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};s.style={default:"@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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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-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: inline-block;\n }\n .kol-button {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n .kol-button__text {\n margin: auto;\n width: 100%;\n }\n}"}}}]);
package/dist/175.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 175.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[175],{175:(s,c,e)=>{e.r(c),e.d(c,{test_component:()=>u});var t=e(6916);const u=class{constructor(s){(0,t.r)(this,s)}}}}]);
package/dist/178.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 178.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[178],{6581:(n,e,t)=>{t.d(e,{K:()=>d});var o=t(6948),i=t(6916),a=t(3928);const l=1;function s(n){return function(n){return n>=l&&n<=6}(n)?`h${n}`:"strong"}const r=(n,e)=>{var{class:t,level:r=l,variant:c}=n,d=(0,o._)(n,["class","level","variant"]);const h=s(r),u=c||h;return(0,i.h)(h,Object.assign({class:(0,a.c)("kol-headline",`kol-headline--${u}`,t)},d),e)},c=(n,e)=>{var{class:t,level:r=l}=n,c=(0,o._)(n,["class","level"]);const d=function(n){return 1===n?"span":s(n)}(r+1);return(0,i.h)(d,Object.assign({class:(0,a.c)("kol-headline kol-headline--group kol-headline--secondary",t)},c),e)},d=(n,e)=>{var{secondaryHeadline:t,level:s=l,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=n,p=(0,o._)(n,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b=Object.assign({level:s},p);if(!t)return(0,i.h)(r,Object.assign({class:(0,a.c)(d,"kol-headline--single")},b),e);const{class:f}=h,v=(0,o._)(h,["class"]),m=Object.assign({class:(0,a.c)("kol-heading-group",f)},v);return(0,i.h)("hgroup",Object.assign({},m),(0,i.h)(r,Object.assign({class:(0,a.c)(d,"kol-headline--group","kol-headline--primary")},b),e),(0,i.h)(c,Object.assign({level:s},u),t))}},3928:(n,e,t)=>{function o(n){var e,t,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=o(n[e]))&&(i&&(i+=" "),i+=t)}else for(t in n)n[t]&&(i&&(i+=" "),i+=t);return i}function i(){for(var n,e,t=0,i="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=o(n))&&(i&&(i+=" "),i+=e);return i}t.d(e,{c:()=>i})},9813:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(8474);const i=(n,e)=>{(0,o.b)(n,"_hasCloser",e)}},6524:(n,e,t)=>{t.d(e,{t:()=>a});var o=t(6137),i=t(5475);let a=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(a=n=>n)},178:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>h});var o=t(6916),i=t(6524),a=t(4808),l=t(3179),s=t(6581),r=t(9813),c=t(8474),d=t(6861);const h=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return(0,o.h)("div",{key:"886df0c46ed629f63c2b7b3739e53e7894a589bf",class:"kol-card"},(0,o.h)("div",{key:"85e0cb2dc4f9e0af4eff1171435d0eda15022b8a",class:"kol-card__header"},(0,o.h)(s.K,{key:"7e0311e81f7a3f2e51490e24f2ac47da61f7e1e2",class:"kol-card__headline",level:this.state._level},this.state._label)),(0,o.h)("div",{key:"939dc45e8366d405eec3ce6156ea3c64444672dc",class:"kol-card__content"},(0,o.h)("slot",{key:"f9d0daaa07715875247bb8e7a2754019701079b3"})),this.state._hasCloser&&(0,o.h)(l.a,{key:"959456e851e87ba76e3fd4ced993369dccf8370b",class:"kol-card__close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,i.t)("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateOn(n){this.validateOnValue(n)&&(0,c.s)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,r.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};h.style={default:"/*\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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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-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 .kol-card {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__close-button {\n position: absolute;\n top: 0;\n right: 0;\n }\n}"}},6861:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>d});var o=t(8474);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const c=new Set(["string"]),d=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),c,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(c=n.hooks)||void 0===c||c.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=d},5475:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""},6948:(n,e,t)=>{function o(n,e){var t={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)e.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(t[o[i]]=n[o[i]])}return t}t.d(e,{_:()=>o}),"function"==typeof SuppressedError&&SuppressedError},4808:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(6861),i=t(8474);const a=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&o.h.includes(n)),new Set([`Number {${o.h.join(", ")}`]),e,{defaultValue:1,required:!0})}}}]);
package/dist/2220.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 2220.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2220],{9725:(t,e,n)=>{n.d(e,{I:()=>r,a:()=>h});var i=n(8812),o=n(7369),a=n(8474),l=n(8975);const s=["text","search","url","tel"];class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateSuggestions(t){(0,l.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class h extends r{constructor(t,e,n){super(t,e,n),this.hasError=!1,this.component=t}validateSpellCheck(t){(0,o.v)(this.component,t)}validateType(t){(0,a.w)(this.component,"_type",(t=>"string"==typeof t&&s.includes(t)),new Set([`String {${s.join(", ")}`]),t)}componentWillLoad(){super.componentWillLoad(),this.validateSpellCheck(this.component._spellCheck),this.validateType(this.component._type)}}},8812:(t,e,n)=>{n.d(e,{I:()=>s});var i=n(8474),o=n(5539),a=n(843);const l=["default","visibility-toggle"];class s extends o.I{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){(0,i.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,a.v)(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){((t,e)=>{(0,i.w)(t,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),e)})(this.component,t)}validateMaxLength(t){(0,i.k)(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){(0,i.i)(this.component,"_pattern",t)}validatePlaceholder(t){(0,i.i)(this.component,"_placeholder",t)}validateReadOnly(t){(0,i.b)(this.component,"_readOnly",t)}validateRequired(t){(0,i.b)(this.component,"_required",t)}validateValue(t){(0,i.i)(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},6931:(t,e,n)=>{n.d(e,{a:()=>s,p:()=>r});var i=n(3179),o=n(8474),a=n(4192);const l=t=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&t.tagName!==i.j.toUpperCase();){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,a.a)()&&(a.L.debug(t),(0,o.j)("↑ Search form element finished."))}return t},s=(t={})=>{var e,n;const a=l(t.form);if(a instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.q)(t,a),a.dispatchEvent(t);else if(a.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(t))}}},r=(t={})=>{const e=l(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)(0,a.a)()&&!1===e.noValidate&&(0,o.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof e.requestSubmit?e.requestSubmit():((0,o.q)(t,e),e.dispatchEvent(t))}));else if(e.tagName===i.j.toUpperCase()){(0,o.q)(t,o.K.querySelector("form",e));const n=e;setTimeout((()=>{var e,i;"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(t))}))}}}},5539:(t,e,n)=>{n.d(e,{I:()=>r});var i=n(3651),o=n(9510),a=n(8474),l=n(3804);const s=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,l.i)(n.right,1)&&(n.right={icon:n.right}),(0,l.i)(n.left,1)&&(n.left={icon:n.left}),e.set("_icons",n))};class r extends i.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcons(t){(0,a.o)(t,(()=>{try{t=(0,a.p)(t)}catch(t){}(0,a.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,l.i)(t.left,1)||(0,o.i)(t.left)||(0,l.i)(t.right,1)||(0,o.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},843:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(8474);const o=(t,e,n)=>{(0,i.b)(t,"_hasCounter",e,n)}},9510:(t,e,n)=>{n.d(e,{i:()=>l,v:()=>s});var i=n(8474),o=n(3804);const a=(t,e,n)=>{(0,o.b)(n)?t[e]=n:(0,o.i)(n,1)&&(t[e]={icon:n})},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,o.a)(t.style))&&(void 0===t.label||(0,o.i)(t.label))&&(0,o.i)(t.icon,1),s=(t,e,n={})=>{(0,i.o)(e,(()=>{var s;try{e=(0,i.p)(e)}catch(t){}(0,i.w)(t,"_icons",(t=>{const e="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||e||(0,o.i)(t,1)||"object"==typeof t&&null!==t&&((0,o.i)(t.left,1)||l(t.left)||(0,o.i)(t.right,1)||l(t.right)||(0,o.i)(t.top,1)||l(t.top)||(0,o.i)(t.bottom,1)||l(t.bottom))}),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(t,e,i,l)),(t=>{var e,n,i;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(n=t.nextState)||void 0===n?void 0:n.get("_icons");null===(i=t.nextState)||void 0===i||i.set("_icons",(t=>{let e={};return(0,o.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(a(e,"top",t.top),a(e,"right",t.right),a(e,"bottom",t.bottom),a(e,"left",t.left)),e})(e))}})(i)}}}))}))}},2220:(t,e,n)=>{n.r(e),n.d(e,{kol_input_text:()=>p});var i=n(6916),o=n(8395),a=n(6931),l=n(3651),s=n(9725),r=n(3179),h=n(4293),d=n(8474),c=n(5475),u=(t,e,n)=>new Promise(((i,o)=>{var a=t=>{try{s(n.next(t))}catch(t){o(t)}},l=t=>{try{s(n.throw(t))}catch(t){o(t)}},s=t=>t.done?i(t.value):Promise.resolve(t.value).then(a,l);s((n=n.apply(t,e)).next())}));const p=class{getValue(){return u(this,null,(function*(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}))}focus(){return u(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return u(this,null,(function*(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"03063d763daed05b5e943ccb742e11ee6f0ca4cc",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},(0,i.h)(r.i,{key:"5c922b9b71bdf5238a627c0a40dc897e6be45999",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_suggestions:this.state._suggestions,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"ad679f85036ef3c42ab0fd08a88e1d423ed86333",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?(0,i.h)(i.F,null,(0,i.h)(h.I,{badgeText:(0,c.b)(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},(0,c.b)(this.state._accessKey,this.state._shortKey))):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"8172691ca60db9961ac30c2a6b598431dd368185",slot:"input"},(0,i.h)("input",Object.assign({key:"09e78d8c0f5f10d616877286da69bbecb3f2f1eb",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",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:this.state._spellCheck,type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{var e,n;this.oldValue!==(null===(e=this.inputRef)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.inputRef)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(t))},this.onInput=t=>{(0,d.s)(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||(0,a.p)({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,o.n)()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new s.a(this,"text",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){((t,e)=>{(0,d.b)(t,"_alert",e)})(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(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)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};p.style={default:"/*\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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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 .kol-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}"}},7369:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(8474);const o=(t,e)=>{(0,i.b)(t,"_spellCheck",e,{defaultValue:void 0})}},8975:(t,e,n)=>{n.d(e,{v:()=>o});var i=n(8474);const o=(t,e)=>{(0,i.g)(t,"_suggestions",(t=>"string"==typeof t||"number"==typeof t),e,void 0,{hooks:{afterPatch:t=>{Array.isArray(t)&&t.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);
package/dist/2444.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 2444.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2444],{2444:(n,e,t)=>{t.r(e),t.d(e,{kol_link:()=>l});var i=t(6916),o=t(3179),a=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const l=class{constructor(n){(0,i.r)(this,n),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right"}focus(){return a(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return a(this,null,(function*(){var n;yield null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){return(0,i.h)(o.g,{key:"806c52c5e2e1e01811caab666710f89bfbcbdcd5",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:this._role,_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},(0,i.h)("slot",{key:"92d80902ee8abe70f77196c59ae975ffd690a106",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};l.style={default:"/*\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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\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-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: inline-block;\n }\n .kol-link {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}"}}}]);