UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

145 lines (83 loc) • 36 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
# kol-input-text <!-- Auto Generated Below --> ## Properties | Property | Attribute | Description | Type | Default | | --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \| undefined` | `undefined` | | `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \| undefined` | `'off'` | | `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | | `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \| undefined` | `false` | | `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | | `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \| undefined` | `false` | | `_hint` | `_hint` | Defines the hint text. | `string \| undefined` | `''` | | `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` | | `_id` | `_id` | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | | `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` | | `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \| undefined` | `undefined` | | `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `"hard" \| "soft" \| undefined` | `'hard'` | | `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, "_on" \| "_hasCloser" \| "_label" \| "_level" \| "_variant"> & { _description: string; } \| string \| undefined` | `undefined` | | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined` | `undefined` | | `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \| undefined` | `undefined` | | `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` | | `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \| undefined` | `false` | | `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` | | `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \| undefined` | `undefined` | | `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \| undefined \| { _label: string; } & { _ariaExpanded?: boolean \| undefined; _tabIndex?: number \| undefined; _value?: StencilUnknown; _accessKey?: string \| undefined; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _inline?: boolean \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` | | `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \| undefined` | `undefined` | | `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \| string \| undefined` | `undefined` | | `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | | `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` | | `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `"search" \| "tel" \| "text" \| "url" \| undefined` | `'text'` | | `_value` | `_value` | Defines the value of the element. | `string \| undefined` | `undefined` | ## Methods ### `focus() => Promise<void | undefined>` Sets focus on the internal element. #### Returns Type: `Promise<void | undefined>` ### `getValue() => Promise<string | undefined>` Returns the current value. #### Returns Type: `Promise<string | undefined>` ### `selectioconEnd() => Promise<number | null | undefined>` Get selection end of internal element. #### Returns Type: `Promise<number | null | undefined>` ### `selectionStart() => Promise<number | null | undefined>` Get selection start of internal element. #### Returns Type: `Promise<number | null | undefined>` ### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise<void>` Add string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText #### Parameters | Name | Type | Description | | ---------------- | --------------------------------------------------------- | ----------- | | `replacement` | `string` | | | `selectionStart` | `number \| undefined` | | | `selectionEnd` | `number \| undefined` | | | `selectMode` | `"select" \| "start" \| "end" \| "preserve" \| undefined` | | #### Returns Type: `Promise<void>` ### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => Promise<void>` Set selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange #### Parameters | Name | Type | Description | | -------------------- | ------------------------------------------------ | ----------- | | `selectionStart` | `number` | | | `selectionEnd` | `number` | | | `selectionDirection` | `"none" \| "forward" \| "backward" \| undefined` | | #### Returns Type: `Promise<void>` ### `setSelectionStart(selectionStart: number) => Promise<void>` Set selection start (and end = start) of internal element. #### Parameters | Name | Type | Description | | ---------------- | -------- | ----------- | | `selectionStart` | `number` | | #### Returns Type: `Promise<void>` ## Slots | Slot | Description | | ---- | ----------------------------------- | | | Die Beschriftung des Eingabefeldes. | ----------------------------------------------