@vsn-ux/ngx-gaia 0.12.3 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/input.md +60 -5
- package/fesm2022/vsn-ux-ngx-gaia.mjs +165 -33
- package/fesm2022/vsn-ux-ngx-gaia.mjs.map +1 -1
- package/package.json +2 -2
- package/styles/global.scss +3 -0
- package/types/vsn-ux-ngx-gaia.d.ts +44 -4
package/docs/input.md
CHANGED
|
@@ -22,7 +22,40 @@ Export: `gaInput`
|
|
|
22
22
|
|
|
23
23
|
## `<ga-input>`
|
|
24
24
|
|
|
25
|
-
Wrapper component for inputs with prefix/suffix elements.
|
|
25
|
+
Wrapper component for inputs with prefix/suffix elements. Automatically sets `aria-busy="true"` when `ga-input-loading` is present inside. Built-in suffix components include `<ga-input-clear-button>` and `<ga-input-loading>`, but any custom content can also be placed after the input as a suffix.
|
|
26
|
+
|
|
27
|
+
## `<ga-input-loading>`
|
|
28
|
+
|
|
29
|
+
Loading spinner for use inside `<ga-input>`.
|
|
30
|
+
|
|
31
|
+
### Inputs
|
|
32
|
+
|
|
33
|
+
- `announcement: string` - Screen reader announcement via `aria-label` (default: `''`)
|
|
34
|
+
- `ariaLive: 'polite' | 'assertive'` - `aria-live` region behavior (default: `'polite'`)
|
|
35
|
+
|
|
36
|
+
## `<ga-input-clear-button>`
|
|
37
|
+
|
|
38
|
+
Clear button for use inside `<ga-input>`. Displays a CircleX icon.
|
|
39
|
+
|
|
40
|
+
### Inputs
|
|
41
|
+
|
|
42
|
+
- `ariaLabel: string` - Button aria-label override (default: `GaInputI18n.clearLabel`)
|
|
43
|
+
|
|
44
|
+
### Outputs
|
|
45
|
+
|
|
46
|
+
- `cleared: void` - Emitted when the clear button is clicked
|
|
47
|
+
|
|
48
|
+
## GaInputI18n
|
|
49
|
+
|
|
50
|
+
Abstract class for input internationalization.
|
|
51
|
+
|
|
52
|
+
### Properties
|
|
53
|
+
|
|
54
|
+
- `clearLabel: string` - Default label for the clear button (default: `'Clear'`)
|
|
55
|
+
|
|
56
|
+
## Providers
|
|
57
|
+
|
|
58
|
+
- `provideGaInputI18n(value: GaInputI18n | (() => GaInputI18n))` - Configure input i18n labels
|
|
26
59
|
|
|
27
60
|
## Examples
|
|
28
61
|
|
|
@@ -41,17 +74,39 @@ Input with prefix icon
|
|
|
41
74
|
</ga-input>
|
|
42
75
|
```
|
|
43
76
|
|
|
44
|
-
Input with
|
|
77
|
+
Input with clear button
|
|
45
78
|
|
|
46
79
|
```html
|
|
47
80
|
<ga-input>
|
|
48
81
|
<input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
|
|
49
|
-
<
|
|
50
|
-
<ga-icon [icon]="CircleXIcon" size="16" />
|
|
51
|
-
</button>
|
|
82
|
+
<ga-input-clear-button (cleared)="search = ''" />
|
|
52
83
|
</ga-input>
|
|
53
84
|
```
|
|
54
85
|
|
|
86
|
+
Input with loading spinner
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<ga-input>
|
|
90
|
+
<input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
|
|
91
|
+
<ga-input-loading announcement="Searching..." />
|
|
92
|
+
</ga-input>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Input with custom suffix
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<ga-input>
|
|
99
|
+
<input gaInput type="text" placeholder="0.00" />
|
|
100
|
+
<span>EUR</span>
|
|
101
|
+
</ga-input>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Custom i18n labels
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
provideGaInputI18n({ clearLabel: 'Tøm' });
|
|
108
|
+
```
|
|
109
|
+
|
|
55
110
|
Programmatic focus
|
|
56
111
|
|
|
57
112
|
```typescript
|