@public-ui/components 1.5.0-rc.11 → 1.5.0-rc.12

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 (217) hide show
  1. package/cheat-sheet.html +66 -92
  2. package/custom-elements.json +145 -144
  3. package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
  4. package/dist/cjs/kol-alert.cjs.entry.js.map +1 -1
  5. package/dist/cjs/kol-badge.cjs.entry.js.map +1 -1
  6. package/dist/cjs/kol-breadcrumb.cjs.entry.js.map +1 -1
  7. package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
  8. package/dist/cjs/kol-button-wc_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/kol-button.cjs.entry.js.map +1 -1
  10. package/dist/cjs/kol-card.cjs.entry.js.map +1 -1
  11. package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
  12. package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
  13. package/dist/cjs/kol-image.cjs.entry.js.map +1 -1
  14. package/dist/cjs/kol-input-checkbox.cjs.entry.js.map +1 -1
  15. package/dist/cjs/kol-input-color.cjs.entry.js.map +1 -1
  16. package/dist/cjs/kol-input-date.cjs.entry.js.map +1 -1
  17. package/dist/cjs/kol-input-email.cjs.entry.js.map +1 -1
  18. package/dist/cjs/kol-input-file.cjs.entry.js.map +1 -1
  19. package/dist/cjs/kol-input-number.cjs.entry.js.map +1 -1
  20. package/dist/cjs/kol-input-password.cjs.entry.js.map +1 -1
  21. package/dist/cjs/kol-input-radio-group.cjs.entry.js.map +1 -1
  22. package/dist/cjs/kol-input-radio.cjs.entry.js.map +1 -1
  23. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  24. package/dist/cjs/kol-input-range.cjs.entry.js.map +1 -1
  25. package/dist/cjs/kol-input-text.cjs.entry.js.map +1 -1
  26. package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
  27. package/dist/cjs/kol-link-group.cjs.entry.js.map +1 -1
  28. package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
  29. package/dist/cjs/kol-link.cjs.entry.js.map +1 -1
  30. package/dist/cjs/kol-modal.cjs.entry.js.map +1 -1
  31. package/dist/cjs/kol-nav.cjs.entry.js.map +1 -1
  32. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  33. package/dist/cjs/kol-pagination.cjs.entry.js.map +1 -1
  34. package/dist/cjs/kol-progress.cjs.entry.js.map +1 -1
  35. package/dist/cjs/kol-quote.cjs.entry.js.map +1 -1
  36. package/dist/cjs/kol-select.cjs.entry.js.map +1 -1
  37. package/dist/cjs/kol-skip-nav.cjs.entry.js.map +1 -1
  38. package/dist/cjs/kol-span-wc.cjs.entry.js.map +1 -1
  39. package/dist/cjs/kol-span.cjs.entry.js.map +1 -1
  40. package/dist/cjs/kol-tabs.cjs.entry.js.map +1 -1
  41. package/dist/cjs/kol-textarea.cjs.entry.js.map +1 -1
  42. package/dist/cjs/kol-toast.cjs.entry.js.map +1 -1
  43. package/dist/cjs/kol-tooltip.cjs.entry.js.map +1 -1
  44. package/dist/components/component.js.map +1 -1
  45. package/dist/components/component11.js.map +1 -1
  46. package/dist/components/component12.js.map +1 -1
  47. package/dist/components/component13.js.map +1 -1
  48. package/dist/components/component14.js +1 -1
  49. package/dist/components/component14.js.map +1 -1
  50. package/dist/components/component15.js.map +1 -1
  51. package/dist/components/component2.js.map +1 -1
  52. package/dist/components/component3.js.map +1 -1
  53. package/dist/components/component4.js.map +1 -1
  54. package/dist/components/component5.js.map +1 -1
  55. package/dist/components/component6.js.map +1 -1
  56. package/dist/components/component7.js.map +1 -1
  57. package/dist/components/component8.js.map +1 -1
  58. package/dist/components/kol-accordion.js.map +1 -1
  59. package/dist/components/kol-breadcrumb.js.map +1 -1
  60. package/dist/components/kol-button-link.js.map +1 -1
  61. package/dist/components/kol-card.js.map +1 -1
  62. package/dist/components/kol-form.js.map +1 -1
  63. package/dist/components/kol-image.js.map +1 -1
  64. package/dist/components/kol-input-checkbox.js.map +1 -1
  65. package/dist/components/kol-input-color.js.map +1 -1
  66. package/dist/components/kol-input-date.js.map +1 -1
  67. package/dist/components/kol-input-email.js.map +1 -1
  68. package/dist/components/kol-input-file.js.map +1 -1
  69. package/dist/components/kol-input-password.js.map +1 -1
  70. package/dist/components/kol-input-radio-group.js.map +1 -1
  71. package/dist/components/kol-input-range.js +1 -1
  72. package/dist/components/kol-input-range.js.map +1 -1
  73. package/dist/components/kol-input-text.js.map +1 -1
  74. package/dist/components/kol-link-button.js.map +1 -1
  75. package/dist/components/kol-link-group.js.map +1 -1
  76. package/dist/components/kol-modal.js.map +1 -1
  77. package/dist/components/kol-nav.js.map +1 -1
  78. package/dist/components/kol-progress.js.map +1 -1
  79. package/dist/components/kol-quote.js.map +1 -1
  80. package/dist/components/kol-skip-nav.js.map +1 -1
  81. package/dist/components/kol-span.js.map +1 -1
  82. package/dist/components/kol-tabs.js.map +1 -1
  83. package/dist/components/kol-textarea.js.map +1 -1
  84. package/dist/components/kol-toast.js.map +1 -1
  85. package/dist/components/shadow.js.map +1 -1
  86. package/dist/components/shadow2.js.map +1 -1
  87. package/dist/esm/kol-accordion.entry.js.map +1 -1
  88. package/dist/esm/kol-alert.entry.js.map +1 -1
  89. package/dist/esm/kol-badge.entry.js.map +1 -1
  90. package/dist/esm/kol-breadcrumb.entry.js.map +1 -1
  91. package/dist/esm/kol-button-link.entry.js.map +1 -1
  92. package/dist/esm/kol-button-wc_3.entry.js.map +1 -1
  93. package/dist/esm/kol-button.entry.js.map +1 -1
  94. package/dist/esm/kol-card.entry.js.map +1 -1
  95. package/dist/esm/kol-form.entry.js.map +1 -1
  96. package/dist/esm/kol-icon.entry.js.map +1 -1
  97. package/dist/esm/kol-image.entry.js.map +1 -1
  98. package/dist/esm/kol-input-checkbox.entry.js.map +1 -1
  99. package/dist/esm/kol-input-color.entry.js.map +1 -1
  100. package/dist/esm/kol-input-date.entry.js.map +1 -1
  101. package/dist/esm/kol-input-email.entry.js.map +1 -1
  102. package/dist/esm/kol-input-file.entry.js.map +1 -1
  103. package/dist/esm/kol-input-number.entry.js.map +1 -1
  104. package/dist/esm/kol-input-password.entry.js.map +1 -1
  105. package/dist/esm/kol-input-radio-group.entry.js.map +1 -1
  106. package/dist/esm/kol-input-radio.entry.js.map +1 -1
  107. package/dist/esm/kol-input-range.entry.js +1 -1
  108. package/dist/esm/kol-input-range.entry.js.map +1 -1
  109. package/dist/esm/kol-input-text.entry.js.map +1 -1
  110. package/dist/esm/kol-link-button.entry.js.map +1 -1
  111. package/dist/esm/kol-link-group.entry.js.map +1 -1
  112. package/dist/esm/kol-link-wc.entry.js.map +1 -1
  113. package/dist/esm/kol-link.entry.js.map +1 -1
  114. package/dist/esm/kol-modal.entry.js.map +1 -1
  115. package/dist/esm/kol-nav.entry.js.map +1 -1
  116. package/dist/esm/kol-pagination.entry.js +1 -1
  117. package/dist/esm/kol-pagination.entry.js.map +1 -1
  118. package/dist/esm/kol-progress.entry.js.map +1 -1
  119. package/dist/esm/kol-quote.entry.js.map +1 -1
  120. package/dist/esm/kol-select.entry.js.map +1 -1
  121. package/dist/esm/kol-skip-nav.entry.js.map +1 -1
  122. package/dist/esm/kol-span-wc.entry.js.map +1 -1
  123. package/dist/esm/kol-span.entry.js.map +1 -1
  124. package/dist/esm/kol-tabs.entry.js.map +1 -1
  125. package/dist/esm/kol-textarea.entry.js.map +1 -1
  126. package/dist/esm/kol-toast.entry.js.map +1 -1
  127. package/dist/esm/kol-tooltip.entry.js.map +1 -1
  128. package/dist/kolibri/kol-accordion.entry.js.map +1 -1
  129. package/dist/kolibri/kol-alert.entry.js.map +1 -1
  130. package/dist/kolibri/kol-badge.entry.js.map +1 -1
  131. package/dist/kolibri/kol-breadcrumb.entry.js.map +1 -1
  132. package/dist/kolibri/kol-button-link.entry.js.map +1 -1
  133. package/dist/kolibri/kol-button-wc_3.entry.js.map +1 -1
  134. package/dist/kolibri/kol-button.entry.js.map +1 -1
  135. package/dist/kolibri/kol-card.entry.js.map +1 -1
  136. package/dist/kolibri/kol-form.entry.js.map +1 -1
  137. package/dist/kolibri/kol-icon.entry.js.map +1 -1
  138. package/dist/kolibri/kol-image.entry.js.map +1 -1
  139. package/dist/kolibri/kol-input-checkbox.entry.js.map +1 -1
  140. package/dist/kolibri/kol-input-color.entry.js.map +1 -1
  141. package/dist/kolibri/kol-input-date.entry.js.map +1 -1
  142. package/dist/kolibri/kol-input-email.entry.js.map +1 -1
  143. package/dist/kolibri/kol-input-file.entry.js.map +1 -1
  144. package/dist/kolibri/kol-input-number.entry.js.map +1 -1
  145. package/dist/kolibri/kol-input-password.entry.js.map +1 -1
  146. package/dist/kolibri/kol-input-radio-group.entry.js.map +1 -1
  147. package/dist/kolibri/kol-input-radio.entry.js.map +1 -1
  148. package/dist/kolibri/kol-input-range.entry.js +1 -1
  149. package/dist/kolibri/kol-input-range.entry.js.map +1 -1
  150. package/dist/kolibri/kol-input-text.entry.js.map +1 -1
  151. package/dist/kolibri/kol-link-button.entry.js.map +1 -1
  152. package/dist/kolibri/kol-link-group.entry.js.map +1 -1
  153. package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
  154. package/dist/kolibri/kol-link.entry.js.map +1 -1
  155. package/dist/kolibri/kol-modal.entry.js.map +1 -1
  156. package/dist/kolibri/kol-nav.entry.js.map +1 -1
  157. package/dist/kolibri/kol-pagination.entry.js +1 -1
  158. package/dist/kolibri/kol-pagination.entry.js.map +1 -1
  159. package/dist/kolibri/kol-progress.entry.js.map +1 -1
  160. package/dist/kolibri/kol-quote.entry.js.map +1 -1
  161. package/dist/kolibri/kol-select.entry.js.map +1 -1
  162. package/dist/kolibri/kol-skip-nav.entry.js.map +1 -1
  163. package/dist/kolibri/kol-span-wc.entry.js.map +1 -1
  164. package/dist/kolibri/kol-span.entry.js.map +1 -1
  165. package/dist/kolibri/kol-tabs.entry.js.map +1 -1
  166. package/dist/kolibri/kol-textarea.entry.js.map +1 -1
  167. package/dist/kolibri/kol-toast.entry.js.map +1 -1
  168. package/dist/kolibri/kol-tooltip.entry.js.map +1 -1
  169. package/dist/types/components.d.ts +290 -288
  170. package/doc/abbr.md +7 -3
  171. package/doc/accordion.md +50 -24
  172. package/doc/alert.md +7 -5
  173. package/doc/badge.md +16 -24
  174. package/doc/breadcrumb.md +10 -8
  175. package/doc/button-link.md +2 -2
  176. package/doc/button.md +39 -68
  177. package/doc/card.md +17 -61
  178. package/doc/details.md +12 -9
  179. package/doc/form.md +4 -4
  180. package/doc/heading.md +18 -11
  181. package/doc/icon.md +10 -14
  182. package/doc/image.md +27 -20
  183. package/doc/indented-text.md +1 -7
  184. package/doc/input-checkbox.md +14 -10
  185. package/doc/input-color.md +9 -12
  186. package/doc/input-date.md +10 -13
  187. package/doc/input-email.md +11 -10
  188. package/doc/input-file.md +9 -7
  189. package/doc/input-number.md +10 -39
  190. package/doc/input-password.md +8 -8
  191. package/doc/input-radio-group.md +4 -4
  192. package/doc/input-radio.md +26 -8
  193. package/doc/input-range.md +6 -9
  194. package/doc/input-text.md +15 -17
  195. package/doc/kolibri.md +10 -5
  196. package/doc/link-button.md +6 -11
  197. package/doc/link-group.md +20 -18
  198. package/doc/link.md +18 -39
  199. package/doc/logo.md +4 -8
  200. package/doc/modal.md +36 -54
  201. package/doc/nav.md +49 -37
  202. package/doc/pagination.md +17 -22
  203. package/doc/progress.md +7 -7
  204. package/doc/quote.md +11 -8
  205. package/doc/select.md +27 -18
  206. package/doc/skip-nav.md +10 -5
  207. package/doc/span.md +5 -5
  208. package/doc/spin.md +4 -5
  209. package/doc/table.md +7 -59
  210. package/doc/tabs.md +27 -39
  211. package/doc/textarea.md +28 -29
  212. package/doc/toast.md +15 -8
  213. package/doc/tooltip.md +7 -7
  214. package/doc/version.md +5 -8
  215. package/jest-test-results.json +1 -1
  216. package/package.json +1 -1
  217. package/vscode-custom-data.json +143 -143
package/doc/input-color.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # InputColor
2
2
 
3
- Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Angabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
3
+ Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
4
4
 
5
5
  ## Konstruktion
6
6
 
7
7
  ### Code
8
8
 
9
9
  ```html
10
- <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#ff0000"> Hintergrundfarbe </kol-input-color>
10
+ <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4"> Hintergrundfarbe </kol-input-color>
11
11
  ```
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#ff0000">Hintergrundfarbe</kol-input-color>
15
+ <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4">Hintergrundfarbe</kol-input-color>
16
16
 
17
17
  ## Verwendung
18
18
 
@@ -20,7 +20,7 @@ Stellen Sie die Default-Farbe über das Attribut `_value` ein. Verwenden Sie hie
20
20
 
21
21
  ### Best practices
22
22
 
23
- - Achten Sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
23
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
24
24
 
25
25
  ## Barrierefreiheit
26
26
 
@@ -28,22 +28,19 @@ Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei
28
28
 
29
29
  Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
30
30
 
31
- Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
32
-
33
31
  ### Tastatursteuerung
34
32
 
35
33
  | Taste | Funktion |
36
34
  | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
37
35
  | `Tab` | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld kann mit der Tab-Taste zwischen den Steuerfeldern gewechselt werden. |
38
36
  | `Enter` | Öffnet bzw. schließt das Dialogfeld der Komponente. Bei fokussierter Pipette wird mit der Enter-Taste die Funktion **_Pipette_** gestartet. |
39
- | `ESC` | Beendet die Pipetten-Funktion. . |
37
+ | `ESC` | Beendet die Pipettenfunktion. Schließt das Dialogfeld, wenn die Pipettenfunktion nicht aktiv ist. |
40
38
  | `Pfeil-Tasten (rechts / links)` | Verschieben bei fokussiertem Feld **_Farbspektrum_** den Auswahlpunkt. |
41
39
  | `Pfeil-Tasten (oben / unten)` | Ändert bei fokussiertem Feld **_Farbsystem_** die Auswahl. |
42
40
 
43
41
  ## Links und Referenzen
44
42
 
45
43
  - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
46
- - https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
47
44
 
48
45
  <!-- Auto Generated Below -->
49
46
 
@@ -55,16 +52,16 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
55
52
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
56
53
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
57
54
  | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
58
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
55
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
59
56
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
60
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
61
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
57
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
58
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
62
59
  | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
63
60
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
64
61
  | `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
65
62
  | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
66
63
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
67
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
64
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
68
65
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
69
66
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
70
67
  | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
package/doc/input-date.md CHANGED
@@ -7,26 +7,24 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
7
7
  ### Code
8
8
 
9
9
  ```html
10
- <kol-input-date _id="mein_datum" _name="mein_datum" _type="date"> Erstellungsdatum </kol-input-date>
10
+ <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">Erstellungsdatum</kol-input-date>
11
11
  ```
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">
16
- Erstellungsdatum
17
- </kol-input-date>
15
+ <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">Erstellungsdatum</kol-input-date>
18
16
 
19
17
  ## Verwendung
20
18
 
21
19
  Die **InputDate**-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.
22
20
 
23
- <kol-alert _type="info">Beachten Sie, dass im <b>Firefox</b> nicht alle <b>Typen</b> der **InputDate**-Komponente funktional sind. Es werden bei den Typen <b>Month</b>, <b>Week</b> und <b>Datum & Zeit</b> keine Auswahldialoge angezeigt.</kol-alert>
21
+ <kol-alert _type="info">Beachten Sie, dass im **Firefox** nicht alle **`_types`** der **InputDate**-Komponente funktional sind. Es werden bei den Typen `month`, `time` und `week` keine Auswahldialoge angezeigt.</kol-alert>
24
22
 
25
23
  Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.
26
24
 
27
25
  ### Best practices
28
26
 
29
- - Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
27
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
30
28
 
31
29
  ## Barrierefreiheit
32
30
 
@@ -52,7 +50,6 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
52
50
  - https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/
53
51
  - https://a11ysupport.io/tech/html/input(type-date)_element
54
52
  - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
55
- - https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
56
53
 
57
54
  <!-- Auto Generated Below -->
58
55
 
@@ -64,10 +61,10 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
64
61
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
65
62
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
66
63
  | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
67
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
64
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
68
65
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
69
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
70
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
66
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
67
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
71
68
  | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
72
69
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
73
70
  | `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined` | `undefined` |
@@ -75,9 +72,9 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
75
72
  | `_min` | `_min` | Gibt den kleinstmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
76
73
  | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
77
74
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
78
- | `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
79
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
80
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
75
+ | `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
76
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
77
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
81
78
  | `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined` | `undefined` |
82
79
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
83
80
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
package/doc/input-email.md CHANGED
@@ -18,15 +18,16 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
18
18
 
19
19
  Setzen Sie die **InputEmail**-Komponente auf Formularen ein, wenn dort die Eingabe einer oder mehrerer E-Mail-Adressen erforderlich ist.
20
20
 
21
- Standardmäßig ist die Komponente für die Erfassung einer einzelnen E-Mail-Adresse vorgesehen. Setzen Sie das Attribut `_multiple=true`, um mehrere E-Mail-Adressen zu erfassen. Trennen Sie die einzelnen E-Mail-Adressen mit einem Komma (,) voneinander.
21
+ Standardmäßig ist die Komponente für die Erfassung einer einzelnen E-Mail-Adresse vorgesehen. Setzen Sie das Attribut **`_multiple`**, um mehrere E-Mail-Adressen zu erfassen. Trennen Sie die einzelnen E-Mail-Adressen mit einem Komma (,) voneinander.
22
22
 
23
23
  ### Best practices
24
24
 
25
- - Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
25
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
26
26
 
27
27
  ## Barrierefreiheit
28
28
 
29
- Die Validierung der erfassten E-Mail-Adressen erfolgt programmseitig. Bei Eingabe einer nicht validen E-Mail-Adresse wird unterhalb der Komponente eine **Alert**-Komponente angezeigt, die über das Attribut `_error` textseitig angepasst werden kann.
29
+ Eine Validierung der erfassten E-Mail-Adressen innerhalb der Komponente erfolgt nicht.
30
+ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error`** mit der entsprechenden Fehlermeldung, diese wird dann via **kol-alert** unterhalb angezeigt.
30
31
 
31
32
  ### Tastatursteuerung
32
33
 
@@ -49,10 +50,10 @@ Die Validierung der erfassten E-Mail-Adressen erfolgt programmseitig. Bei Eingab
49
50
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
50
51
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
51
52
  | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
52
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
53
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
53
54
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
54
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
55
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
55
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
56
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
56
57
  | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
57
58
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
58
59
  | `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
@@ -62,10 +63,10 @@ Die Validierung der erfassten E-Mail-Adressen erfolgt programmseitig. Bei Eingab
62
63
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
63
64
  | `_pattern` | `_pattern` | Gibt ein Prüfpattern für das Eingabefeld an. | `string \| undefined` | `undefined` |
64
65
  | `_placeholder` | `_placeholder` | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist. | `string \| undefined` | `undefined` |
65
- | `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
66
- | `_required` | `_required` | Gibt an, ob das Radio ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
67
- | `_size` | `_size` | Gibt an, wie viele Zeichen man eingeben kann. | `number \| undefined` | `undefined` |
68
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
66
+ | `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
67
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
68
+ | `_size` | `_size` | Setzt die Breite des Eingabefeldes in Buchstabenbreiten. | `number \| undefined` | `undefined` |
69
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
69
70
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
70
71
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
71
72
  | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
package/doc/input-file.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # InputFile
2
2
 
3
- Der Input-Typ **File** erzeugt ein Eingabefeld für Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.
3
+ Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.
4
4
 
5
5
  ## Konstruktion
6
6
 
@@ -12,14 +12,16 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für Uploads. Es können eine ode
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png">Bild hochladen</kol-input-file>
15
+ <kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png, image/jpeg, application/pdf"> Bild hochladen </kol-input-file>
16
16
 
17
17
  ## Verwendung
18
18
 
19
19
  Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erlaubt sind. Wird das Attribut nicht oder leer übergeben, sind alle Dateitypen erlaubt.
20
+ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" _label="MDN Artikel zum Attribut accept"></kol-link>.
20
21
 
21
22
  ### Best practices
22
23
 
24
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
23
25
  - Lassen Sie nur die Dateitypen zum Upload zu, die für die Programmausführung benötigt werden. Eine fehlende Einschränkung der hochladbaren Dateitypen kann ein erhebliches Sicherheitsrisiko sein.
24
26
  - Begrenzen Sie die Größe der Dateien, die Sie zum Upload zulassen möchten.
25
27
 
@@ -45,17 +47,17 @@ Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erl
45
47
  | `_accept` | `_accept` | Gibt an, welche Dateiformate erlaubt sind. | `string \| undefined` | `undefined` |
46
48
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
47
49
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
48
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
50
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
49
51
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
50
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
51
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
52
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
53
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
52
54
  | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
53
55
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
54
56
  | `_multiple` | `_multiple` | Gibt an, ob mehrere Werte eingegeben werden können. | `boolean \| undefined` | `undefined` |
55
57
  | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
56
58
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
57
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
58
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
59
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
60
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
59
61
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
60
62
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
61
63
  | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
package/doc/input-number.md CHANGED
@@ -1,55 +1,27 @@
1
1
  # InputNumber
2
2
 
3
- Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen, Datumswerte, Datums- und Zeitwerte, Wochen, Monate und Zeiten.
3
+ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
4
4
 
5
5
  ## Konstruktion
6
6
 
7
7
  ### Code
8
8
 
9
9
  ```html
10
- <kol-input-number _type="date" _id="mein_datum" _name="mein_datum"> Erstellungsdatum </kol-input-number>
10
+ <kol-input-number _id="meine_zahl" _name="meine_zahl" _value="74">ZAHL!</kol-input-number>
11
11
  ```
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-number _type="date" _id="mein_datum" _name="mein_datum">
16
- Erstellungsdatum
17
- </kol-input-number>
15
+ <kol-input-number _id="meine_zahl" _name="meine_zahl" _value="74">ZAHL!</kol-input-number>
18
16
 
19
17
  ## Verwendung
20
18
 
21
- Die **InputNumber**-Komponente kann für die Erfassung diverser Werte verwendet werden. Stellen Sie den gewünschten Typ über das Attribut `_type` ein.
22
-
23
- <kol-alert _type="info">Beachten Sie, dass im <b>Firefox</b> nicht alle <b>Typen</b> der **InputNumber**-Komponente funktional sind. Es werden bei den Typen <b>Month</b>, <b>Week</b> und <b>Datum & Zeit</b> keine Auswahldialoge angezeigt.</kol-alert>
24
-
25
- Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.
26
-
27
19
  ### Best practices
28
20
 
29
- - Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
30
-
31
- ## Barrierefreiheit
32
-
33
- Die Icons in der Komponente sind per Tab-Taste nicht erreichbar. Die Auswahlhilfen der Komponente werden über die **Leertaste** geöffnet. So erhalten Sie beispielsweise beim Typ **date** ein Kalendermodul, über das per Maus oder über die Tastatur das gewünschte Datum ausgewählt werden kann. Die manuelle Eingabe der Werte ist alternativ möglich.
21
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
34
22
 
35
23
  ### Tastatursteuerung
36
24
 
37
- Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Datum, Uhrzeit u.a). Mit der `Tab`-Taste wird der Fokus auf das Eingabefeld gesetzt. Anschließend kann mittels der `Leer`-Taste das gerätespezifische Auswahldialog geöffent werden.
38
-
39
- > Hinweis: Wir haben in unseren Tests festgestellt, dass es je nach Browser-Version manchmal möglich ist, das Kalender-Icon anzufokusieren und mal nicht. Ohne das sich die Implementierung der Komponente geändert hat. Warum das so ist ist uns noch nicht bekannt. Nichtsdestotrotz ist das Öffnen des Auswahldialogs immer mittels der `Leer`-Taste möglich.
40
-
41
- #### InputNumber -> Type = **_date_**, **_month_**, **_week_** und **_time_**
42
-
43
- | Taste | Funktion |
44
- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45
- | `Tab` | Fokussiert das Eingabefeld. Nach erhalt des Fokus wechselt die `Tab`-Taste durch die Eingabebereiche. Danach erst wechselt die `Tab`-Taste zum nächsten Eingabefeld. |
46
- | `Leer` | Wenn das Eingabefeld fokussiert ist, kann im Browser mit der `Leer`-Taste ein Auswahldialog aufgerufen bzw. geschlossen werden. Die Navigation und Auswahl erfolgt hier mit Hilfe der `Tab`-Taste, der `Pfeil`-Tasten und der Bestätigung mittes `Enter`-Taste. |
47
- | `Pfeil-Tasten (links / rechts)` | Wenn das Eingabefeld fokussiert ist, kann mit den `Pfeil`-Tasten zwischen den Eingabebereichen gewechselt werden. |
48
- | `Pfeil-Tasten (oben / unten)` | Wenn ein Eingabebereich aktiviert ist, können mit den `Pfeil`-Tasten oben und unten die Werte verändert werden. |
49
- | `Esc` | Ist ein Auswahldialog verfügbar, kann dieser alternativ zur `Leer`-Taste oder auch mit der `Esc`-Taste geschlossen werden. |
50
-
51
- #### InputNumber -> Type = **_number_**
52
-
53
25
  | Taste | Funktion |
54
26
  | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
55
27
  | `Tab` | Fokussiert das Eingabefeld. |
@@ -58,7 +30,6 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
58
30
  ## Links und Referenzen
59
31
 
60
32
  - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
61
- - https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
62
33
 
63
34
  <!-- Auto Generated Below -->
64
35
 
@@ -70,10 +41,10 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
70
41
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
71
42
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
72
43
  | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
73
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
44
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
74
45
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
75
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
76
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
46
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
47
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
77
48
  | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
78
49
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
79
50
  | `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined` | `undefined` |
@@ -82,9 +53,9 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
82
53
  | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
83
54
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
84
55
  | `_placeholder` | `_placeholder` | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist. | `string \| undefined` | `undefined` |
85
- | `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
86
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
87
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
56
+ | `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
57
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
58
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
88
59
  | `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined` | `undefined` |
89
60
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
90
61
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |