valtech-components 2.0.841 → 2.0.843
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/README.md +44 -244
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +1 -1
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,28 +5,11 @@
|
|
|
5
5
|
[](https://www.npmjs.com/package/valtech-components)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
|
-
**
|
|
8
|
+
Component library for Angular + Ionic + Capacitor apps. **145 components** and **23+ services** for auth, Firebase, i18n, and more.
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
**[Full documentation → ui.myvaltech.com](https://ui.myvaltech.com)**
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
- **134 UI Components** — Atoms, molecules, organisms, and templates ready to use
|
|
15
|
-
- **Authentication System** — Complete auth with OAuth (Google, Apple), session management, and token handling
|
|
16
|
-
- **Firebase Integration** — Analytics, Firestore, Cloud Messaging, and Storage services
|
|
17
|
-
- **i18n with Signals** — Modern internationalization using Angular Signals for reactive translations
|
|
18
|
-
- **Remote App Configuration** — Feature flags and remote config management
|
|
19
|
-
- **Google Ad Manager** — Built-in ad slot integration
|
|
20
|
-
- **User Feedback System** — Collect and manage user feedback
|
|
21
|
-
- **Storybook Documentation** — Interactive component documentation
|
|
22
|
-
|
|
23
|
-
## Technologies
|
|
24
|
-
|
|
25
|
-
- Angular 18+
|
|
26
|
-
- Ionic 8+
|
|
27
|
-
- Capacitor 6+
|
|
28
|
-
- Firebase 10+
|
|
29
|
-
- RxJS 7.8+
|
|
12
|
+
---
|
|
30
13
|
|
|
31
14
|
## Installation
|
|
32
15
|
|
|
@@ -34,35 +17,29 @@ A comprehensive component library for building modern web and hybrid application
|
|
|
34
17
|
npm install valtech-components
|
|
35
18
|
```
|
|
36
19
|
|
|
37
|
-
|
|
20
|
+
**Peer dependencies (required):**
|
|
38
21
|
|
|
39
22
|
```bash
|
|
40
|
-
npm install @angular/
|
|
23
|
+
npm install @angular/common @angular/core @ionic/angular ionicons rxjs
|
|
41
24
|
```
|
|
42
25
|
|
|
43
|
-
Optional
|
|
26
|
+
**Optional — only if you use these features:**
|
|
44
27
|
|
|
45
28
|
```bash
|
|
46
|
-
# Firebase services
|
|
47
|
-
npm install @
|
|
48
|
-
|
|
49
|
-
#
|
|
50
|
-
npm install
|
|
51
|
-
|
|
52
|
-
# Code highlighting
|
|
53
|
-
npm install prismjs
|
|
54
|
-
|
|
55
|
-
# Carousel support
|
|
56
|
-
npm install swiper
|
|
29
|
+
npm install @angular/fire firebase # Firebase services
|
|
30
|
+
npm install @capacitor/app @capacitor/clipboard # Native features
|
|
31
|
+
npm install qr-code-styling # QR code component
|
|
32
|
+
npm install prismjs # Code highlighting
|
|
33
|
+
npm install swiper # Carousel component
|
|
57
34
|
```
|
|
58
35
|
|
|
59
|
-
|
|
36
|
+
---
|
|
60
37
|
|
|
61
|
-
|
|
38
|
+
## Usage
|
|
62
39
|
|
|
63
|
-
### UI
|
|
40
|
+
### UI only (no backend needed)
|
|
64
41
|
|
|
65
|
-
|
|
42
|
+
144 of 145 components work standalone — no Firebase, no backend:
|
|
66
43
|
|
|
67
44
|
```typescript
|
|
68
45
|
import { ButtonComponent, CardComponent, TextComponent } from 'valtech-components';
|
|
@@ -80,11 +57,9 @@ import { ButtonComponent, CardComponent, TextComponent } from 'valtech-component
|
|
|
80
57
|
export class MyComponent {}
|
|
81
58
|
```
|
|
82
59
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
### Full Integration
|
|
60
|
+
### Full integration (auth + Firebase + i18n)
|
|
86
61
|
|
|
87
|
-
|
|
62
|
+
Add providers in `main.ts`:
|
|
88
63
|
|
|
89
64
|
```typescript
|
|
90
65
|
import {
|
|
@@ -99,234 +74,59 @@ bootstrapApplication(AppComponent, {
|
|
|
99
74
|
providers: [
|
|
100
75
|
provideValtechFirebase(createFirebaseConfig(firebaseConfig)),
|
|
101
76
|
provideValtechAuth({ apiUrl: 'https://api.yourapp.com' }),
|
|
102
|
-
provideValtechI18n({ defaultLang: 'en', supportedLangs: ['en', 'es'] }),
|
|
77
|
+
provideValtechI18n({ defaultLang: 'en', supportedLangs: ['en', 'es', 'pt'] }),
|
|
103
78
|
],
|
|
104
79
|
});
|
|
105
80
|
```
|
|
106
81
|
|
|
107
|
-
**[Full Integration Guide](https://ui.myvaltech.com/docs/guides/firebase-setup)** — Firebase setup, Auth configuration, i18n, and more.
|
|
108
|
-
|
|
109
|
-
### Components Requiring Backend
|
|
110
|
-
|
|
111
|
-
| Component | Requirement |
|
|
112
|
-
|-----------|-------------|
|
|
113
|
-
| `LoginComponent` | `AuthService` configured with API endpoint |
|
|
114
|
-
| `ContentReactionComponent` | `FeedbackService` configured with API endpoint |
|
|
115
|
-
|
|
116
|
-
All other 132 components are fully standalone.
|
|
117
|
-
|
|
118
82
|
---
|
|
119
83
|
|
|
120
84
|
## Components
|
|
121
85
|
|
|
122
|
-
| Category | Count |
|
|
123
|
-
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
129
|
-
> **[View full component catalog](https://ui.myvaltech.com)**
|
|
130
|
-
|
|
131
|
-
## Services
|
|
132
|
-
|
|
133
|
-
### Basic Services (No Configuration Required)
|
|
134
|
-
|
|
135
|
-
These services work out of the box:
|
|
136
|
-
|
|
137
|
-
| Service | Description |
|
|
138
|
-
|---------|-------------|
|
|
139
|
-
| `ThemeService` | Theme management (light/dark mode) |
|
|
140
|
-
| `ToastService` | Toast notifications |
|
|
141
|
-
| `NavigationService` | Routing utilities |
|
|
142
|
-
| `DownloadService` | File download helpers |
|
|
143
|
-
| `IconsService` | Ionicons management |
|
|
144
|
-
| `LocaleService` | Simple locale management with localStorage |
|
|
145
|
-
| `LocalStorageService` | localStorage abstraction |
|
|
146
|
-
| `LinkProcessorService` | Automatic URL and markdown link processing |
|
|
147
|
-
| `InAppBrowserService` | Capacitor in-app browser |
|
|
148
|
-
| `ModalService` | Modal dialog management |
|
|
149
|
-
| `ConfirmationDialogService` | Confirmation dialogs |
|
|
150
|
-
| `QrGeneratorService` | QR code generation |
|
|
151
|
-
| `PresetService` | Reusable configuration presets |
|
|
152
|
-
| `PaginationService` | Pagination state management |
|
|
153
|
-
| `SkeletonService` | Skeleton loading states |
|
|
154
|
-
|
|
155
|
-
### Authentication Services (Requires `provideValtechAuth`)
|
|
156
|
-
|
|
157
|
-
Requires backend API. See [Auth Setup Guide](https://ui.myvaltech.com/docs/guides/auth-setup).
|
|
158
|
-
|
|
159
|
-
| Service | Description |
|
|
160
|
-
|---------|-------------|
|
|
161
|
-
| `AuthService` | Main authentication service |
|
|
162
|
-
| `OAuthService` | OAuth providers (Google, Apple) |
|
|
163
|
-
| `SessionService` | Session management |
|
|
164
|
-
| `TokenService` | JWT token handling |
|
|
165
|
-
| `AuthStateService` | Authentication state management |
|
|
166
|
-
| `DeviceService` | Device information |
|
|
167
|
-
|
|
168
|
-
### Firebase Services (Requires `provideValtechFirebase`)
|
|
169
|
-
|
|
170
|
-
Requires Firebase project. See [Firebase Setup Guide](https://ui.myvaltech.com/docs/guides/firebase-setup).
|
|
171
|
-
|
|
172
|
-
| Service | Description |
|
|
173
|
-
|---------|-------------|
|
|
174
|
-
| `FirebaseService` | Firebase initialization |
|
|
175
|
-
| `AnalyticsService` | Firebase Analytics with custom events |
|
|
176
|
-
| `FirestoreService` | Firestore database operations |
|
|
177
|
-
| `MessagingService` | Cloud Messaging (push notifications) |
|
|
178
|
-
| `NotificationsService` | Notification management |
|
|
179
|
-
| `FirebaseStorageService` | Firebase Storage operations |
|
|
180
|
-
|
|
181
|
-
### i18n Service (Requires `provideValtechI18n`)
|
|
182
|
-
|
|
183
|
-
| Service | Description |
|
|
184
|
-
|---------|-------------|
|
|
185
|
-
| `I18nService` | Internationalization with Angular Signals |
|
|
186
|
-
|
|
187
|
-
### Backend-Dependent Services
|
|
188
|
-
|
|
189
|
-
These services require a configured backend API:
|
|
190
|
-
|
|
191
|
-
| Service | Description |
|
|
192
|
-
|---------|-------------|
|
|
193
|
-
| `AppConfigService` | Remote configuration and feature flags |
|
|
194
|
-
| `FeedbackService` | User feedback collection |
|
|
195
|
-
|
|
196
|
-
## Quick Start
|
|
197
|
-
|
|
198
|
-
### Basic Component Usage
|
|
199
|
-
|
|
200
|
-
```typescript
|
|
201
|
-
import { Component } from '@angular/core';
|
|
202
|
-
import { TextComponent, ButtonComponent, CardComponent } from 'valtech-components';
|
|
203
|
-
|
|
204
|
-
@Component({
|
|
205
|
-
selector: 'app-example',
|
|
206
|
-
standalone: true,
|
|
207
|
-
imports: [TextComponent, ButtonComponent, CardComponent],
|
|
208
|
-
template: `
|
|
209
|
-
<val-card [props]="{ title: 'Welcome' }">
|
|
210
|
-
<val-text [props]="{ content: 'Hello, World!', size: 'medium' }" />
|
|
211
|
-
<val-button
|
|
212
|
-
[props]="{ text: 'Get Started', color: 'primary' }"
|
|
213
|
-
(onClick)="handleClick()"
|
|
214
|
-
/>
|
|
215
|
-
</val-card>
|
|
216
|
-
`
|
|
217
|
-
})
|
|
218
|
-
export class ExampleComponent {
|
|
219
|
-
handleClick() {
|
|
220
|
-
console.log('Button clicked');
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### i18n with Signals
|
|
86
|
+
| Category | Count | Includes |
|
|
87
|
+
|----------|------:|---------|
|
|
88
|
+
| Atoms | 24 | avatar, button, icon, text, image, skeleton, progress-bar, qr-code… |
|
|
89
|
+
| Molecules | 81 | inputs (text, email, phone, pin, date), cards, tabs, accordion, pagination… |
|
|
90
|
+
| Organisms | 31 | forms, data-table, menu, toolbar, login, comment-section, infinite-list… |
|
|
91
|
+
| Templates | 9 | page-wrapper, page-content, docs-shell, auth-background, maintenance-page… |
|
|
92
|
+
| **Total** | **145** | |
|
|
226
93
|
|
|
227
|
-
|
|
228
|
-
import { Component, inject, computed } from '@angular/core';
|
|
229
|
-
import { I18nService, TextComponent } from 'valtech-components';
|
|
94
|
+
Components requiring a backend API: `LoginComponent`, `ContentReactionComponent`.
|
|
230
95
|
|
|
231
|
-
|
|
232
|
-
selector: 'app-i18n-example',
|
|
233
|
-
standalone: true,
|
|
234
|
-
imports: [TextComponent],
|
|
235
|
-
template: `
|
|
236
|
-
<val-text [props]="{ content: welcomeText() }" />
|
|
237
|
-
`
|
|
238
|
-
})
|
|
239
|
-
export class I18nExampleComponent {
|
|
240
|
-
private i18n = inject(I18nService);
|
|
96
|
+
---
|
|
241
97
|
|
|
242
|
-
|
|
243
|
-
welcomeText = computed(() => this.i18n.t('home.welcome'));
|
|
244
|
-
}
|
|
245
|
-
```
|
|
98
|
+
## Services
|
|
246
99
|
|
|
247
|
-
|
|
100
|
+
**No setup required:**
|
|
101
|
+
`ThemeService` · `ToastService` · `NavigationService` · `DownloadService` · `IconsService` · `LocaleService` · `LocalStorageService` · `ModalService` · `ConfirmationDialogService` · `QrGeneratorService` · `PaginationService` · `SkeletonService`
|
|
248
102
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
import { AuthService } from 'valtech-components';
|
|
103
|
+
**Requires `provideValtechAuth`:**
|
|
104
|
+
`AuthService` · `OAuthService` · `SessionService` · `TokenService` · `AuthStateService` · `DeviceService`
|
|
252
105
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
template: `...`
|
|
256
|
-
})
|
|
257
|
-
export class AuthExampleComponent {
|
|
258
|
-
private auth = inject(AuthService);
|
|
106
|
+
**Requires `provideValtechFirebase`:**
|
|
107
|
+
`FirebaseService` · `AnalyticsService` · `FirestoreService` · `MessagingService` · `NotificationsService` · `FirebaseStorageService`
|
|
259
108
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
}
|
|
109
|
+
**Requires `provideValtechI18n`:**
|
|
110
|
+
`I18nService`
|
|
263
111
|
|
|
264
|
-
|
|
265
|
-
await this.auth.logout();
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
get isAuthenticated() {
|
|
269
|
-
return this.auth.isAuthenticated();
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
```
|
|
112
|
+
---
|
|
273
113
|
|
|
274
|
-
|
|
114
|
+
## Technologies
|
|
275
115
|
|
|
276
|
-
|
|
277
|
-
import { Component, inject } from '@angular/core';
|
|
278
|
-
import { AnalyticsService } from 'valtech-components';
|
|
116
|
+
Angular 18+ · Ionic 8+ · Capacitor 6+ · Firebase 10+ · RxJS 7.8+
|
|
279
117
|
|
|
280
|
-
|
|
281
|
-
selector: 'app-analytics-example',
|
|
282
|
-
template: `...`
|
|
283
|
-
})
|
|
284
|
-
export class AnalyticsExampleComponent {
|
|
285
|
-
private analytics = inject(AnalyticsService);
|
|
286
|
-
|
|
287
|
-
trackEvent() {
|
|
288
|
-
this.analytics.logEvent('button_click', {
|
|
289
|
-
button_name: 'signup',
|
|
290
|
-
page: 'home'
|
|
291
|
-
});
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
```
|
|
118
|
+
---
|
|
295
119
|
|
|
296
120
|
## Development
|
|
297
121
|
|
|
298
|
-
### Prerequisites
|
|
299
|
-
|
|
300
|
-
- Node.js 18+
|
|
301
|
-
- npm 9+
|
|
302
|
-
|
|
303
|
-
### Setup
|
|
304
|
-
|
|
305
122
|
```bash
|
|
306
|
-
# Install dependencies
|
|
307
123
|
npm install
|
|
308
|
-
|
|
309
|
-
#
|
|
310
|
-
npm run
|
|
311
|
-
# Open http://localhost:6006
|
|
124
|
+
npm run storybook # http://localhost:6006
|
|
125
|
+
npm run build # build library
|
|
126
|
+
npm run test # unit tests
|
|
312
127
|
```
|
|
313
128
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
| Command | Description |
|
|
317
|
-
|---------|-------------|
|
|
318
|
-
| `npm run build` | Build the library |
|
|
319
|
-
| `npm run build:prod` | Production build (optimized) |
|
|
320
|
-
| `npm run storybook` | Start Storybook dev server (port 6006) |
|
|
321
|
-
| `npm run build-storybook` | Build static Storybook |
|
|
322
|
-
| `npm run test` | Run unit tests |
|
|
323
|
-
| `npm run prettier` | Format source files |
|
|
324
|
-
|
|
325
|
-
## Documentation
|
|
326
|
-
|
|
327
|
-
For complete documentation, examples, and API reference, visit:
|
|
328
|
-
|
|
329
|
-
**[https://ui.myvaltech.com](https://ui.myvaltech.com)**
|
|
129
|
+
---
|
|
330
130
|
|
|
331
131
|
## License
|
|
332
132
|
|
package/esm2022/lib/version.mjs
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Current version of valtech-components.
|
|
3
3
|
* This is automatically updated during the publish process.
|
|
4
4
|
*/
|
|
5
|
-
export const VERSION = '2.0.
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
5
|
+
export const VERSION = '2.0.843';
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzIuMC44NDMnO1xuIl19
|
|
@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
|
|
|
53
53
|
* Current version of valtech-components.
|
|
54
54
|
* This is automatically updated during the publish process.
|
|
55
55
|
*/
|
|
56
|
-
const VERSION = '2.0.
|
|
56
|
+
const VERSION = '2.0.843';
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
59
|
* Servicio para gestionar presets de componentes.
|