valtech-components 2.0.654 → 2.0.656

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 (7) hide show
  1. package/README.md +182 -184
  2. package/lib/components/atoms/rights-footer/rights-footer.component.d.ts +1 -1
  3. package/lib/components/atoms/text/text.component.d.ts +1 -1
  4. package/lib/components/molecules/features-list/features-list.component.d.ts +2 -2
  5. package/lib/components/organisms/article/article.component.d.ts +4 -4
  6. package/lib/components/organisms/toolbar/toolbar.component.d.ts +1 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,257 +1,255 @@
1
1
  <img style="margin-bottom: 20px;" src="https://myvaltech.s3.us-east-2.amazonaws.com/logo-terminal-rounded.png" width="60px" />
2
2
 
3
- # [Valtech Components](https://ui.myvaltech.com/)
3
+ # Valtech Components
4
4
 
5
- [Valtech Components](https://ui.myvaltech.com/) is a reusable component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. It provides a set of UI components, utilities, and styles to accelerate and standardize the development of scalable applications.
5
+ [![npm version](https://img.shields.io/npm/v/valtech-components.svg)](https://www.npmjs.com/package/valtech-components)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ **[Documentation](https://ui.myvaltech.com)** | **[npm](https://www.npmjs.com/package/valtech-components)**
9
+
10
+ A comprehensive component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. Includes **134 UI components** and **23+ specialized services** for authentication, Firebase integration, internationalization, and more.
6
11
 
7
12
  ## Features
8
13
 
9
- - **Reusable UI Components:** Atoms, molecules, organisms, and templates ready to use and customize.
10
- - **Ionic & Angular Integration:** Built on top of Angular and Ionic for seamless hybrid and web experiences.
11
- - **Capacitor Support:** Utilities and helpers for native functionality in hybrid apps.
12
- - **Consistent Design:** Shared styles, themes, and assets for a unified look and feel.
13
- - **Extensible Architecture:** Easily extend or customize components to fit your needs.
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
14
22
 
15
23
  ## Technologies
16
24
 
17
25
  - Angular 18+
18
26
  - Ionic 8+
19
27
  - Capacitor 6+
20
- - RxJS
28
+ - Firebase 10+
29
+ - RxJS 7.8+
21
30
 
22
31
  ## Installation
23
32
 
24
- Add the library to your Angular/Ionic project:
25
-
26
- ```sh
33
+ ```bash
27
34
  npm install valtech-components
28
35
  ```
29
36
 
30
- > Make sure you have the required peer dependencies installed: `@angular/core`, `@ionic/angular`, `ionicons`, `rxjs`.
31
-
32
- ## Development
33
-
34
- ### Prerequisites
35
-
36
- - Node.js 18+
37
- - npm 9+
38
-
39
- ### Setup
37
+ ### Peer Dependencies
40
38
 
41
39
  ```bash
42
- # Install dependencies
43
- npm install
40
+ npm install @angular/core @angular/common @ionic/angular ionicons rxjs
44
41
  ```
45
42
 
46
- ### Available Scripts
47
-
48
- | Command | Description |
49
- |---------|-------------|
50
- | `npm run build` | Build the library (production) |
51
- | `npm run build:prod` | Build with production config |
52
- | `npm run storybook` | Start Storybook dev server (port 6006) |
53
- | `npm run build-storybook` | Build static Storybook |
54
- | `npm run test` | Run unit tests |
55
- | `npm run prettier` | Format source files |
56
-
57
- ### Storybook
58
-
59
- Storybook is included for component development and documentation:
43
+ Optional peer dependencies for additional features:
60
44
 
61
45
  ```bash
62
- # Start Storybook development server
63
- npm run storybook
46
+ # Firebase services
47
+ npm install @angular/fire firebase
64
48
 
65
- # Open http://localhost:6006
66
- ```
49
+ # QR code generation
50
+ npm install qr-code-styling
67
51
 
68
- ### Project Structure
52
+ # Code highlighting
53
+ npm install prismjs
69
54
 
70
- ```
71
- valtech-components/
72
- ├── .storybook/ # Storybook configuration
73
- ├── src/
74
- │ ├── lib/
75
- │ │ ├── components/ # UI components (atoms, molecules, organisms, templates)
76
- │ │ ├── services/ # Angular services
77
- │ │ ├── shared/ # Utilities, pipes, constants
78
- │ │ └── assets/ # Fonts and static resources
79
- │ ├── stories/ # Storybook documentation
80
- │ └── public-api.ts # Library exports
81
- ├── styles/ # Global SCSS styles
82
- ├── angular.json # Angular CLI config
83
- ├── ng-package.json # ng-packagr config
84
- └── package.json # Dependencies and scripts
55
+ # Carousel support
56
+ npm install swiper
85
57
  ```
86
58
 
87
- ### Building the Library
88
-
89
- ```bash
90
- # Development build
91
- npm run build
59
+ ## Components
92
60
 
93
- # Production build (optimized)
94
- npm run build:prod
61
+ | Category | Count | Description |
62
+ |----------|-------|-------------|
63
+ | **Atoms** | 19 | Basic UI elements: avatar, button, icon, text, image, skeleton, progress-bar, qr-code, etc. |
64
+ | **Molecules** | 81 | Compound components: inputs (text, email, phone, pin, date), cards, searchbar, tabs, accordion, pagination, etc. |
65
+ | **Organisms** | 24 | Complex components: forms, data-table, menu, toolbar, login, comment-section, infinite-list, etc. |
66
+ | **Templates** | 10 | Page layouts: page-wrapper, page-content, docs-shell, auth-background, maintenance-page, etc. |
95
67
 
96
- # Output: ./dist/valtech-components/
97
- ```
68
+ > **[View full component catalog](https://ui.myvaltech.com)**
98
69
 
99
- ### Publishing
70
+ ## Services
100
71
 
101
- The built library can be published to npm or used locally via `npm link`.
72
+ ### Basic Services
73
+ | Service | Description |
74
+ |---------|-------------|
75
+ | `ThemeService` | Theme management (light/dark mode) |
76
+ | `ToastService` | Toast notifications |
77
+ | `NavigationService` | Routing utilities |
78
+ | `DownloadService` | File download helpers |
79
+ | `IconsService` | Ionicons management |
80
+ | `LocaleService` | Simple locale management with localStorage |
81
+ | `LocalStorageService` | localStorage abstraction |
82
+ | `LinkProcessorService` | Automatic URL and markdown link processing |
83
+ | `InAppBrowserService` | Capacitor in-app browser |
84
+
85
+ ### Authentication Services
86
+ | Service | Description |
87
+ |---------|-------------|
88
+ | `AuthService` | Main authentication service |
89
+ | `OAuthService` | OAuth providers (Google, Apple) |
90
+ | `SessionService` | Session management |
91
+ | `TokenService` | JWT token handling |
92
+ | `AuthStateService` | Authentication state management |
93
+ | `DeviceService` | Device information |
94
+
95
+ ### Firebase Services
96
+ | Service | Description |
97
+ |---------|-------------|
98
+ | `FirebaseService` | Firebase initialization |
99
+ | `AnalyticsService` | Firebase Analytics with custom events |
100
+ | `FirestoreService` | Firestore database operations |
101
+ | `MessagingService` | Cloud Messaging (push notifications) |
102
+ | `NotificationsService` | Notification management |
103
+ | `FirebaseStorageService` | Firebase Storage operations |
104
+
105
+ ### Other Services
106
+ | Service | Description |
107
+ |---------|-------------|
108
+ | `I18nService` | Internationalization with Angular Signals |
109
+ | `AppConfigService` | Remote configuration and feature flags |
110
+ | `FeedbackService` | User feedback collection |
111
+ | `ModalService` | Modal dialog management |
112
+ | `ConfirmationDialogService` | Confirmation dialogs |
113
+ | `QrGeneratorService` | QR code generation |
114
+ | `PresetService` | Reusable configuration presets |
115
+ | `PaginationService` | Pagination state management |
116
+ | `SkeletonService` | Skeleton loading states |
102
117
 
103
- ## Usage
118
+ ## Quick Start
104
119
 
105
- Import the desired standalone components in your Angular modules or components:
120
+ ### Basic Component Usage
106
121
 
107
122
  ```typescript
108
- import { inject } from '@angular/core';
109
- import { TextComponent, ButtonComponent } from 'valtech-components';
123
+ import { Component } from '@angular/core';
124
+ import { TextComponent, ButtonComponent, CardComponent } from 'valtech-components';
110
125
 
111
126
  @Component({
112
- selector: 'your-component',
127
+ selector: 'app-example',
113
128
  standalone: true,
114
- imports: [
115
- TextComponent,
116
- ButtonComponent
117
- ],
129
+ imports: [TextComponent, ButtonComponent, CardComponent],
118
130
  template: `
119
- <!-- Static text -->
120
- <val-text
121
- [props]="{
122
- content: 'This is a body text.',
123
- color: 'primary',
124
- bold: false,
125
- size: 'small'
126
- }"
127
- />
128
-
129
- <!-- Button -->
130
- <val-button
131
- [props]="{
132
- text: 'Cancel',
133
- color: 'secondary',
134
- type: 'button'
135
- }"
136
- (onClick)="handleCancel()"
137
- />
131
+ <val-card [props]="{ title: 'Welcome' }">
132
+ <val-text [props]="{ content: 'Hello, World!', size: 'medium' }" />
133
+ <val-button
134
+ [props]="{ text: 'Get Started', color: 'primary' }"
135
+ (onClick)="handleClick()"
136
+ />
137
+ </val-card>
138
138
  `
139
139
  })
140
- export class YourComponent {
141
- handleCancel() {
142
- console.log('Cancel clicked');
140
+ export class ExampleComponent {
141
+ handleClick() {
142
+ console.log('Button clicked');
143
143
  }
144
144
  }
145
145
  ```
146
146
 
147
- ## 🌍 Locale Management
148
-
149
- The library includes a simple locale management service using localStorage:
147
+ ### i18n with Signals
150
148
 
151
149
  ```typescript
152
- import { inject } from '@angular/core';
153
- import { LocaleService, LanguageSelectorComponent } from 'valtech-components';
150
+ import { Component, inject, computed } from '@angular/core';
151
+ import { I18nService, TextComponent } from 'valtech-components';
154
152
 
155
153
  @Component({
154
+ selector: 'app-i18n-example',
155
+ standalone: true,
156
+ imports: [TextComponent],
156
157
  template: `
157
- <val-language-selector
158
- [props]="{ showFlags: true, showLabel: true }"
159
- (languageChange)="onLanguageChange($event)"
160
- ></val-language-selector>
158
+ <val-text [props]="{ content: welcomeText() }" />
161
159
  `
162
160
  })
163
- export class MyComponent {
164
- localeService = inject(LocaleService);
165
-
166
- // Get current locale
167
- currentLocale = this.localeService.getLocale(); // 'es', 'en', etc.
161
+ export class I18nExampleComponent {
162
+ private i18n = inject(I18nService);
168
163
 
169
- onLanguageChange(locale: string) {
170
- // Changes locale and reloads the page
171
- this.localeService.setLocale(locale);
172
- }
164
+ // Use computed() for reactive translations
165
+ welcomeText = computed(() => this.i18n.t('home.welcome'));
173
166
  }
174
167
  ```
175
168
 
176
- ## 🔗 Automatic Link Processing
177
-
178
- The library now includes automatic link detection and processing capabilities. Convert URLs and internal routes in text content into clickable links automatically:
169
+ ### Authentication
179
170
 
180
171
  ```typescript
181
- // Basic usage with direct URLs
182
- <val-text [props]="{
183
- content: 'Visit https://angular.io or go to /dashboard',
184
- processLinks: true,
185
- linkConfig: {
186
- openExternalInNewTab: true,
187
- openInternalInNewTab: false
172
+ import { Component, inject } from '@angular/core';
173
+ import { AuthService } from 'valtech-components';
174
+
175
+ @Component({
176
+ selector: 'app-auth-example',
177
+ template: `...`
178
+ })
179
+ export class AuthExampleComponent {
180
+ private auth = inject(AuthService);
181
+
182
+ async loginWithGoogle() {
183
+ await this.auth.loginWithGoogle();
188
184
  }
189
- }"></val-text>
190
-
191
- // Markdown-style links [text](url)
192
- <val-text [props]="{
193
- content: 'Check [the documentation](https://angular.io/docs) for details',
194
- processLinks: true,
195
- linkConfig: {
196
- processMarkdownLinks: true,
197
- openExternalInNewTab: true
185
+
186
+ async logout() {
187
+ await this.auth.logout();
198
188
  }
199
- }"></val-text>
200
189
 
201
- // Mixed formats in the same text
202
- <val-text [props]="{
203
- content: 'Read [the guide](https://angular.io/guide), check https://github.com/angular, or go to /examples',
204
- processLinks: true
205
- }"></val-text>
190
+ get isAuthenticated() {
191
+ return this.auth.isAuthenticated();
192
+ }
193
+ }
206
194
  ```
207
195
 
208
- ### Features
209
-
210
- - **Automatic Detection**: Identifies external URLs (http/https), internal routes (starting with /), and Markdown-style links `[text](url)`
211
- - **Improved Regex**: Excludes punctuation marks (`,`, `;`, `.`, `!`, `?`, `()`) from URLs to prevent broken links
212
- - **Configurable Behavior**: Control whether links open in new tabs
213
- - **Custom Styling**: Apply custom CSS classes to links
214
- - **Secure Processing**: Uses Angular's DomSanitizer for safe HTML generation
215
- - **Standalone Pipe**: Use `ProcessLinksPipe` independently in any template
216
-
217
- ### Using the Service Directly
196
+ ### Firebase Analytics
218
197
 
219
198
  ```typescript
220
- import { LinkProcessorService } from 'valtech-components';
221
-
222
- constructor(private linkProcessor: LinkProcessorService) {}
223
-
224
- processText(text: string) {
225
- // Convert links automatically
226
- const processed = this.linkProcessor.processLinks(text);
227
-
228
- // Check if text contains links
229
- const hasLinks = this.linkProcessor.hasLinks(text);
230
-
231
- // Extract all links with their types and text
232
- const links = this.linkProcessor.extractLinks(text);
233
- // Returns: [{ url: '...', type: 'external|internal', text: '...' }]
199
+ import { Component, inject } from '@angular/core';
200
+ import { AnalyticsService } from 'valtech-components';
201
+
202
+ @Component({
203
+ selector: 'app-analytics-example',
204
+ template: `...`
205
+ })
206
+ export class AnalyticsExampleComponent {
207
+ private analytics = inject(AnalyticsService);
208
+
209
+ trackEvent() {
210
+ this.analytics.logEvent('button_click', {
211
+ button_name: 'signup',
212
+ page: 'home'
213
+ });
214
+ }
234
215
  }
235
216
  ```
236
217
 
237
- ## Project Structure
238
-
239
- - `src/lib/components/atoms/` – Basic UI elements (e.g., button, icon, text)
240
- - `src/lib/components/molecules/` – Compound components (e.g., input groups, cards)
241
- - `src/lib/components/organisms/` – Complex components (e.g., forms, toolbars)
242
- - `src/lib/components/templates/` – Page templates and layouts
243
- - `src/lib/components/styles/` – Shared SCSS variables, mixins, and utilities
244
- - `src/lib/services/` – Core services:
245
- - `locale.service.ts` – Simple locale management with localStorage
246
- - `theme.service.ts` – Theme management
247
- - `navigation.service.ts` – Routing utilities
248
- - `download.service.ts` – File download helpers
249
- - `icons.service.ts` – Icon management
250
- - `toast.service.ts` – Toast notifications
251
- - `src/lib/shared/` – Shared utilities:
252
- - `pipes/process-links.pipe.ts` – Automatic link processing
253
- - `constants/` – Shared constants
218
+ ## Development
219
+
220
+ ### Prerequisites
221
+
222
+ - Node.js 18+
223
+ - npm 9+
224
+
225
+ ### Setup
226
+
227
+ ```bash
228
+ # Install dependencies
229
+ npm install
230
+
231
+ # Start Storybook
232
+ npm run storybook
233
+ # Open http://localhost:6006
234
+ ```
235
+
236
+ ### Available Scripts
237
+
238
+ | Command | Description |
239
+ |---------|-------------|
240
+ | `npm run build` | Build the library |
241
+ | `npm run build:prod` | Production build (optimized) |
242
+ | `npm run storybook` | Start Storybook dev server (port 6006) |
243
+ | `npm run build-storybook` | Build static Storybook |
244
+ | `npm run test` | Run unit tests |
245
+ | `npm run prettier` | Format source files |
246
+
247
+ ## Documentation
248
+
249
+ For complete documentation, examples, and API reference, visit:
250
+
251
+ **[https://ui.myvaltech.com](https://ui.myvaltech.com)**
254
252
 
255
253
  ## License
256
254
 
257
- [MIT](https://opensource.org/license/mit)
255
+ [MIT](https://opensource.org/licenses/MIT)
package/lib/components/atoms/rights-footer/rights-footer.component.d.ts CHANGED
@@ -43,7 +43,7 @@ export declare class RightsFooterComponent {
43
43
  /**
44
44
  * Computed helper for color prop in template.
45
45
  */
46
- propsColor: import("@angular/core").Signal<"primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
46
+ propsColor: import("@angular/core").Signal<"medium" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "dark">;
47
47
  /**
48
48
  * Computed helper for withMargin prop in template.
49
49
  */
package/lib/components/atoms/text/text.component.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare class TextComponent {
11
11
  */
12
12
  displayContent: import("@angular/core").Signal<string>;
13
13
  propsColor: import("@angular/core").Signal<import("@ionic/core").Color>;
14
- propsSize: import("@angular/core").Signal<"medium" | "small" | "large" | "xlarge">;
14
+ propsSize: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge">;
15
15
  propsBold: import("@angular/core").Signal<boolean>;
16
16
  propsProcessLinks: import("@angular/core").Signal<boolean>;
17
17
  propsAllowPartialBold: import("@angular/core").Signal<boolean>;
package/lib/components/molecules/features-list/features-list.component.d.ts CHANGED
@@ -48,8 +48,8 @@ export declare class FeaturesListComponent {
48
48
  iconColor: string;
49
49
  iconSize: number;
50
50
  mode: "horizontal" | "vertical";
51
- gap: "medium" | "small" | "large";
52
- alignment: "start" | "center";
51
+ gap: "small" | "medium" | "large";
52
+ alignment: "center" | "start";
53
53
  }>;
54
54
  /** Resolved icon color (handles Ionic colors and CSS colors) */
55
55
  iconColorStyle: import("@angular/core").Signal<string>;
package/lib/components/organisms/article/article.component.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare class ArticleComponent implements OnInit {
45
45
  getVideoElement(element: ArticleElement): ArticleVideoElement;
46
46
  getCustomElement(element: ArticleElement): ArticleCustomElement;
47
47
  getQuoteTextProps(element: ArticleElement): {
48
- size: "medium" | "small" | "large" | "xlarge";
48
+ size: "small" | "medium" | "large" | "xlarge";
49
49
  color: import("@ionic/core").Color;
50
50
  content?: string;
51
51
  bold: boolean;
@@ -61,7 +61,7 @@ export declare class ArticleComponent implements OnInit {
61
61
  showQuoteMark?: boolean;
62
62
  };
63
63
  getHighlightTextProps(element: ArticleElement): {
64
- size: "medium" | "small" | "large" | "xlarge";
64
+ size: "small" | "medium" | "large" | "xlarge";
65
65
  color: import("@ionic/core").Color;
66
66
  content?: string;
67
67
  bold: boolean;
@@ -91,8 +91,8 @@ export declare class ArticleComponent implements OnInit {
91
91
  icon?: import("valtech-components").IconMetada;
92
92
  shape?: "round";
93
93
  size?: "small" | "large" | "default";
94
- fill?: "outline" | "solid" | "default" | "clear";
95
- type: "submit" | "button" | "reset";
94
+ fill?: "default" | "clear" | "outline" | "solid";
95
+ type: "button" | "submit" | "reset";
96
96
  token?: string;
97
97
  ref?: any;
98
98
  handler?: (value: any) => any;
package/lib/components/organisms/toolbar/toolbar.component.d.ts CHANGED
@@ -73,7 +73,7 @@ export declare class ToolbarComponent implements OnInit {
73
73
  showFlags?: boolean;
74
74
  color: import("@ionic/core").Color;
75
75
  size?: "small" | "large" | "default";
76
- fill?: "outline" | "solid" | "default" | "clear";
76
+ fill?: "default" | "clear" | "outline" | "solid";
77
77
  shape?: "round";
78
78
  expand?: "full" | "block";
79
79
  disabled?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "valtech-components",
3
- "version": "2.0.654",
3
+ "version": "2.0.656",
4
4
  "private": false,
5
5
  "bin": {
6
6
  "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"