tia-gpc-widget 1.0.6 → 1.0.7

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 (2) hide show
  1. package/README.md +332 -311
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,127 +1,143 @@
1
1
  # TIA GPC Widget
2
2
 
3
- Widget de chat inteligente para integración con TIA GPC. Compatible con **React, HTML puro, Angular, ASP.NET, Vue, y cualquier otro framework**.
3
+ Intelligent chat widget for TIA GPC integration. Compatible with **React, HTML, Angular, ASP.NET, Vue, and any other framework**.
4
4
 
5
- [![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://www.npmjs.com/package/tia-gpc-widget)
5
+ [![npm version](https://img.shields.io/npm/v/tia-gpc-widget.svg)](https://www.npmjs.com/package/tia-gpc-widget)
6
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tia-gpc-widget/badge)](https://www.jsdelivr.com/package/npm/tia-gpc-widget)
6
7
  [![License](https://img.shields.io/badge/license-UNLICENSED-red.svg)](LICENSE)
7
8
 
8
9
  ---
9
10
 
10
- ## 📋 Tabla de Contenidos
11
+ ## 📋 Table of Contents
11
12
 
12
- - [Características](#-características)
13
- - [Instalación](#-instalación)
14
- - [Opción 1: NPM (Para proyectos React/Node)](#opción-1-npm-para-proyectos-reactnode)
15
- - [Opción 2: CDN / Script directo (Para HTML, Angular, ASP.NET, etc.)](#opción-2-cdn--script-directo-para-html-angular-aspnet-etc)
16
- - [Uso Rápido](#-uso-rápido)
17
- - [Ejemplos por Framework](#-ejemplos-por-framework)
13
+ - [Features](#-features)
14
+ - [Installation](#-installation)
15
+ - [Option 1: NPM (For React/Node Projects)](#option-1-npm-for-reactnode-projects)
16
+ - [Option 2: CDN (For HTML, Angular, ASP.NET, etc.)](#option-2-cdn-for-html-angular-aspnet-etc)
17
+ - [Quick Start](#-quick-start)
18
+ - [Framework Examples](#-framework-examples)
18
19
  - [React](#1-react)
19
- - [HTML Puro / Vanilla JavaScript](#2-html-puro--vanilla-javascript)
20
+ - [HTML / Vanilla JavaScript](#2-html--vanilla-javascript)
20
21
  - [Angular](#3-angular)
21
22
  - [ASP.NET / ASPX](#4-aspnet--aspx)
22
23
  - [Vue.js](#5-vuejs)
23
24
  - [Next.js](#6-nextjs)
24
25
  - [PHP](#7-php)
25
- - [API y Configuración](#-api-y-configuración)
26
- - [Props/Atributos](#propsatributos)
27
- - [Eventos](#eventos)
28
- - [API Programática (JavaScript)](#api-programática-javascript)
29
- - [Personalización](#-personalización)
30
- - [Temas](#temas)
31
- - [Posiciones](#posiciones)
32
- - [Idiomas](#idiomas)
33
- - [Colores](#colores)
34
- - [Build y Desarrollo](#-build-y-desarrollo)
35
- - [Publicación](#-publicación)
36
- - [Soporte](#-soporte)
26
+ - [API & Configuration](#-api--configuration)
27
+ - [Props/Attributes](#propsattributes)
28
+ - [Events](#events)
29
+ - [Programmatic API (JavaScript)](#programmatic-api-javascript)
30
+ - [Customization](#-customization)
31
+ - [Themes](#themes)
32
+ - [Positions](#positions)
33
+ - [Languages](#languages)
34
+ - [Colors](#colors)
35
+ - [Build & Development](#-build--development)
36
+ - [Publishing](#-publishing)
37
+ - [Support](#-support)
37
38
 
38
39
  ---
39
40
 
40
- ## 🚀 Características
41
+ ## 🚀 Features
41
42
 
42
- - ✅ **Framework Agnostic**: Funciona en React, Angular, Vue, ASP.NET, HTML puro, etc.
43
- - ✅ **Web Component**: Basado en estándares web nativos
44
- - ✅ **Temas**: Modo claro, oscuro o automático
45
- - ✅ **Internacionalización**: Español, Inglés, Francés
46
- - ✅ **Responsive**: Diseño adaptable para móviles y escritorio
47
- - ✅ **Personalizable**: Colores, posiciones, dimensiones
48
- - ✅ **TypeScript Ready**: Tipos incluidos
49
- - ✅ **Zero Dependencies**: El bundle standalone incluye todo lo necesario
43
+ - ✅ **Framework Agnostic**: Works in React, Angular, Vue, ASP.NET, plain HTML, etc.
44
+ - ✅ **Web Component**: Based on native web standards
45
+ - ✅ **Themes**: Light, dark, or automatic mode
46
+ - ✅ **Internationalization**: Spanish, English, French
47
+ - ✅ **Responsive**: Adaptive design for mobile and desktop
48
+ - ✅ **Customizable**: Colors, positions, dimensions
49
+ - ✅ **TypeScript Ready**: Types included
50
+ - ✅ **Zero Dependencies**: Standalone bundle includes everything needed
50
51
 
51
52
  ---
52
53
 
53
- ## 📦 Instalación
54
+ ## 📦 Installation
54
55
 
55
- ### Opción 1: NPM (Para proyectos React/Node)
56
+ ### Option 1: NPM (For React/Node Projects)
56
57
 
57
58
  ```bash
58
59
  npm install tia-gpc-widget
59
60
  ```
60
61
 
61
- o con yarn:
62
+ or with yarn:
62
63
 
63
64
  ```bash
64
65
  yarn add tia-gpc-widget
65
66
  ```
66
67
 
67
- o con pnpm:
68
+ or with pnpm:
68
69
 
69
70
  ```bash
70
71
  pnpm add tia-gpc-widget
71
72
  ```
72
73
 
73
- ### Opción 2: CDN / Script directo (Para HTML, Angular, ASP.NET, etc.)
74
+ ### Option 2: CDN (For HTML, Angular, ASP.NET, etc.)
74
75
 
75
- Puedes incluir el widget directamente desde un CDN o desde tu servidor:
76
+ You can include the widget directly from a CDN:
77
+
78
+ #### jsDelivr (Recommended)
79
+
80
+ ```html
81
+ <!-- JavaScript -->
82
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
83
+
84
+ <!-- CSS -->
85
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
86
+ ```
87
+
88
+ #### unpkg
76
89
 
77
90
  ```html
78
- <!-- Incluir JavaScript -->
79
- <script src="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js"></script>
91
+ <!-- JavaScript -->
92
+ <script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
80
93
 
81
- <!-- Incluir CSS -->
82
- <link rel="stylesheet" href="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css">
94
+ <!-- CSS -->
95
+ <link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
83
96
  ```
84
97
 
85
- O si instalaste vía NPM, copia los archivos desde `node_modules/tia-gpc-widget/dist/`:
98
+ #### Latest Version (Development Only)
86
99
 
87
- - `tia-gpc-widget.standalone.js`
88
- - `tia-gpc-widget.standalone.css`
100
+ ```html
101
+ <!-- Always use specific versions in production! -->
102
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"></script>
103
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.css">
104
+ ```
89
105
 
90
106
  ---
91
107
 
92
- ## ⚡ Uso Rápido
108
+ ## ⚡ Quick Start
93
109
 
94
- ### En HTML Puro
110
+ ### In Plain HTML
95
111
 
96
112
  ```html
97
113
  <!DOCTYPE html>
98
- <html lang="es">
114
+ <html lang="en">
99
115
  <head>
100
116
  <meta charset="UTF-8">
101
117
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
102
- <title>Mi Aplicación con TIA GPC</title>
118
+ <title>My App with TIA GPC</title>
103
119
 
104
- <!-- CSS del widget -->
105
- <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
120
+ <!-- Widget CSS -->
121
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
106
122
  </head>
107
123
  <body>
108
- <h1>Mi Aplicación</h1>
124
+ <h1>My Application</h1>
109
125
 
110
- <!-- Widget TIA GPC -->
126
+ <!-- TIA GPC Widget -->
111
127
  <tia-gpc-widget
112
- token="tu-license-token-aqui"
128
+ token="your-license-token-here"
113
129
  theme="auto"
114
130
  position="bottom-right"
115
- language="es"
131
+ language="en"
116
132
  ></tia-gpc-widget>
117
133
 
118
- <!-- JavaScript del widget -->
119
- <script src="./tia-gpc-widget.standalone.js"></script>
134
+ <!-- Widget JavaScript -->
135
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
120
136
  </body>
121
137
  </html>
122
138
  ```
123
139
 
124
- ### En React
140
+ ### In React
125
141
 
126
142
  ```jsx
127
143
  import { TiaGPCWidget } from 'tia-gpc-widget';
@@ -130,12 +146,12 @@ import 'tia-gpc-widget/styles';
130
146
  function App() {
131
147
  return (
132
148
  <div>
133
- <h1>Mi Aplicación</h1>
149
+ <h1>My Application</h1>
134
150
  <TiaGPCWidget
135
- token="tu-license-token-aqui"
151
+ token="your-license-token-here"
136
152
  theme="auto"
137
153
  position="bottom-right"
138
- language="es"
154
+ language="en"
139
155
  />
140
156
  </div>
141
157
  );
@@ -146,17 +162,17 @@ export default App;
146
162
 
147
163
  ---
148
164
 
149
- ## 📚 Ejemplos por Framework
165
+ ## 📚 Framework Examples
150
166
 
151
167
  ### 1. React
152
168
 
153
- #### Instalación
169
+ #### Installation
154
170
 
155
171
  ```bash
156
172
  npm install tia-gpc-widget
157
173
  ```
158
174
 
159
- #### Uso Básico
175
+ #### Basic Usage
160
176
 
161
177
  ```jsx
162
178
  import { TiaGPCWidget } from 'tia-gpc-widget';
@@ -165,19 +181,19 @@ import 'tia-gpc-widget/styles';
165
181
  function App() {
166
182
  return (
167
183
  <TiaGPCWidget
168
- token="tu-license-token"
184
+ token="your-license-token"
169
185
  theme="auto"
170
186
  position="bottom-right"
171
- language="es"
187
+ language="en"
172
188
  primaryColor="#2563eb"
173
- onReady={() => console.log('Widget listo')}
189
+ onReady={() => console.log('Widget ready')}
174
190
  onError={(error) => console.error('Error:', error)}
175
191
  />
176
192
  );
177
193
  }
178
194
  ```
179
195
 
180
- #### Con Configuración Avanzada
196
+ #### Advanced Configuration
181
197
 
182
198
  ```jsx
183
199
  import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
@@ -185,19 +201,19 @@ import 'tia-gpc-widget/styles';
185
201
 
186
202
  function App() {
187
203
  const handleReady = () => {
188
- console.log('✅ Widget inicializado correctamente');
204
+ console.log('✅ Widget initialized successfully');
189
205
  };
190
206
 
191
207
  const handleError = (error) => {
192
- console.error('❌ Error en el widget:', error);
208
+ console.error('❌ Widget error:', error);
193
209
  };
194
210
 
195
211
  return (
196
212
  <TiaGPCWidget
197
- token="tu-license-token"
213
+ token="your-license-token"
198
214
  theme={THEMES.AUTO}
199
215
  position={WIDGET_POSITIONS.BOTTOM_RIGHT}
200
- language={LANGUAGES.ES}
216
+ language={LANGUAGES.EN}
201
217
  primaryColor="#10b981"
202
218
  width="450px"
203
219
  height="650px"
@@ -206,7 +222,7 @@ function App() {
206
222
  mobileFullscreen={true}
207
223
  onReady={handleReady}
208
224
  onError={handleError}
209
- onClose={() => console.log('Widget cerrado')}
225
+ onClose={() => console.log('Widget closed')}
210
226
  />
211
227
  );
212
228
  }
@@ -214,27 +230,27 @@ function App() {
214
230
 
215
231
  ---
216
232
 
217
- ### 2. HTML Puro / Vanilla JavaScript
233
+ ### 2. HTML / Vanilla JavaScript
218
234
 
219
- #### Método 1: Usando el elemento HTML directamente
235
+ #### Method 1: Using HTML element directly
220
236
 
221
237
  ```html
222
238
  <!DOCTYPE html>
223
- <html lang="es">
239
+ <html lang="en">
224
240
  <head>
225
241
  <meta charset="UTF-8">
226
- <title>TIA GPC Widget - HTML Puro</title>
227
- <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
242
+ <title>TIA GPC Widget - Plain HTML</title>
243
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
228
244
  </head>
229
245
  <body>
230
- <h1>Mi Sitio Web</h1>
246
+ <h1>My Website</h1>
231
247
 
232
- <!-- Widget como elemento HTML -->
248
+ <!-- Widget as HTML element -->
233
249
  <tia-gpc-widget
234
- token="tu-license-token"
250
+ token="your-license-token"
235
251
  theme="light"
236
252
  position="bottom-right"
237
- language="es"
253
+ language="en"
238
254
  primary-color="#3b82f6"
239
255
  width="400px"
240
256
  height="600px"
@@ -242,14 +258,14 @@ function App() {
242
258
  show-branding="true"
243
259
  ></tia-gpc-widget>
244
260
 
245
- <script src="./tia-gpc-widget.standalone.js"></script>
261
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
246
262
 
247
- <!-- Eventos opcionales -->
263
+ <!-- Optional events -->
248
264
  <script>
249
265
  const widget = document.querySelector('tia-gpc-widget');
250
266
 
251
267
  widget.addEventListener('ready', () => {
252
- console.log('Widget listo');
268
+ console.log('Widget ready');
253
269
  });
254
270
 
255
271
  widget.addEventListener('error', (e) => {
@@ -257,47 +273,47 @@ function App() {
257
273
  });
258
274
 
259
275
  widget.addEventListener('close', () => {
260
- console.log('Widget cerrado');
276
+ console.log('Widget closed');
261
277
  });
262
278
  </script>
263
279
  </body>
264
280
  </html>
265
281
  ```
266
282
 
267
- #### Método 2: Creación programática con JavaScript
283
+ #### Method 2: Programmatic creation with JavaScript
268
284
 
269
285
  ```html
270
286
  <!DOCTYPE html>
271
- <html lang="es">
287
+ <html lang="en">
272
288
  <head>
273
289
  <meta charset="UTF-8">
274
- <title>TIA GPC Widget - Programático</title>
275
- <link rel="stylesheet" href="./tia-gpc-widget.standalone.css">
290
+ <title>TIA GPC Widget - Programmatic</title>
291
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
276
292
  </head>
277
293
  <body>
278
- <h1>Mi Sitio Web</h1>
279
- <button id="crear-widget">Crear Widget</button>
294
+ <h1>My Website</h1>
295
+ <button id="create-widget">Create Widget</button>
280
296
 
281
- <script src="./tia-gpc-widget.standalone.js"></script>
297
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
282
298
  <script>
283
- document.getElementById('crear-widget').addEventListener('click', () => {
284
- // Usar la API global TiaGPC
299
+ document.getElementById('create-widget').addEventListener('click', () => {
300
+ // Use the global TiaGPC API
285
301
  const widget = TiaGPC.create({
286
- token: 'tu-license-token',
302
+ token: 'your-license-token',
287
303
  theme: 'auto',
288
304
  position: TiaGPC.POSITIONS.BOTTOM_RIGHT,
289
- language: TiaGPC.LANGUAGES.ES,
305
+ language: TiaGPC.LANGUAGES.EN,
290
306
  primaryColor: '#3b82f6',
291
307
  autoOpen: false,
292
- onReady: () => console.log('✅ Widget listo'),
308
+ onReady: () => console.log('✅ Widget ready'),
293
309
  onError: (error) => console.error('❌ Error:', error),
294
- onClose: () => console.log('Widget cerrado')
310
+ onClose: () => console.log('Widget closed')
295
311
  });
296
312
 
297
- console.log('Widget creado:', widget);
313
+ console.log('Widget created:', widget);
298
314
  });
299
315
 
300
- // Ver información del widget
316
+ // View widget information
301
317
  TiaGPC.info();
302
318
  </script>
303
319
  </body>
@@ -308,22 +324,22 @@ function App() {
308
324
 
309
325
  ### 3. Angular
310
326
 
311
- #### Paso 1: Instalar el widget
327
+ #### Step 1: Install the widget
312
328
 
313
329
  ```bash
314
330
  npm install tia-gpc-widget
315
331
  ```
316
332
 
317
- #### Paso 2: Configurar Angular para Web Components
333
+ #### Step 2: Configure Angular for Web Components
318
334
 
319
- En `src/main.ts` o `src/polyfills.ts`, agrega:
335
+ In `src/main.ts` or `src/polyfills.ts`, add:
320
336
 
321
337
  ```typescript
322
- // Habilitar Custom Elements (Web Components)
338
+ // Enable Custom Elements (Web Components)
323
339
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
324
340
  ```
325
341
 
326
- En tu módulo principal (`app.module.ts`):
342
+ In your main module (`app.module.ts`):
327
343
 
328
344
  ```typescript
329
345
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -333,20 +349,20 @@ import { AppComponent } from './app.component';
333
349
  @NgModule({
334
350
  declarations: [AppComponent],
335
351
  imports: [BrowserModule],
336
- schemas: [CUSTOM_ELEMENTS_SCHEMA], // ← Importante
352
+ schemas: [CUSTOM_ELEMENTS_SCHEMA], // ← Important
337
353
  bootstrap: [AppComponent]
338
354
  })
339
355
  export class AppModule { }
340
356
  ```
341
357
 
342
- #### Paso 3: Importar los archivos del widget
358
+ #### Step 3: Import widget files
343
359
 
344
- En `angular.json`, agrega los archivos CSS y JS:
360
+ In `angular.json`, add the CSS and JS files:
345
361
 
346
362
  ```json
347
363
  {
348
364
  "projects": {
349
- "tu-proyecto": {
365
+ "your-project": {
350
366
  "architect": {
351
367
  "build": {
352
368
  "options": {
@@ -365,7 +381,7 @@ En `angular.json`, agrega los archivos CSS y JS:
365
381
  }
366
382
  ```
367
383
 
368
- #### Paso 4: Usar el widget en tu componente
384
+ #### Step 4: Use the widget in your component
369
385
 
370
386
  ```typescript
371
387
  // app.component.ts
@@ -380,9 +396,9 @@ declare global {
380
396
  @Component({
381
397
  selector: 'app-root',
382
398
  template: `
383
- <h1>Mi Aplicación Angular</h1>
399
+ <h1>My Angular Application</h1>
384
400
 
385
- <!-- Opción 1: Elemento HTML directo -->
401
+ <!-- Option 1: Direct HTML element -->
386
402
  <tia-gpc-widget
387
403
  [attr.token]="widgetToken"
388
404
  [attr.theme]="theme"
@@ -394,26 +410,26 @@ declare global {
394
410
  `
395
411
  })
396
412
  export class AppComponent implements OnInit {
397
- widgetToken = 'tu-license-token';
413
+ widgetToken = 'your-license-token';
398
414
  theme = 'auto';
399
415
  position = 'bottom-right';
400
- language = 'es';
416
+ language = 'en';
401
417
 
402
418
  ngOnInit() {
403
- console.log('TiaGPC disponible:', window.TiaGPC);
419
+ console.log('TiaGPC available:', window.TiaGPC);
404
420
  }
405
421
 
406
422
  onWidgetReady() {
407
- console.log('✅ Widget de TIA GPC listo');
423
+ console.log('✅ TIA GPC widget ready');
408
424
  }
409
425
 
410
426
  onWidgetError(event: any) {
411
- console.error('❌ Error en widget:', event.detail);
427
+ console.error('❌ Widget error:', event.detail);
412
428
  }
413
429
  }
414
430
  ```
415
431
 
416
- #### Opción alternativa: Creación programática
432
+ #### Alternative option: Programmatic creation
417
433
 
418
434
  ```typescript
419
435
  // app.component.ts
@@ -422,8 +438,8 @@ import { Component, OnInit } from '@angular/core';
422
438
  @Component({
423
439
  selector: 'app-root',
424
440
  template: `
425
- <h1>Mi Aplicación Angular</h1>
426
- <button (click)="createWidget()">Crear Widget</button>
441
+ <h1>My Angular Application</h1>
442
+ <button (click)="createWidget()">Create Widget</button>
427
443
  <div #widgetContainer></div>
428
444
  `
429
445
  })
@@ -435,10 +451,10 @@ export class AppComponent implements OnInit {
435
451
  createWidget() {
436
452
  if (window.TiaGPC) {
437
453
  window.TiaGPC.create({
438
- token: 'tu-license-token',
454
+ token: 'your-license-token',
439
455
  theme: 'auto',
440
- language: 'es',
441
- onReady: () => console.log('Widget listo'),
456
+ language: 'en',
457
+ onReady: () => console.log('Widget ready'),
442
458
  onError: (err: any) => console.error(err)
443
459
  });
444
460
  }
@@ -450,7 +466,7 @@ export class AppComponent implements OnInit {
450
466
 
451
467
  ### 4. ASP.NET / ASPX
452
468
 
453
- #### Opción 1: En una página ASPX
469
+ #### Option 1: In an ASPX page
454
470
 
455
471
  ```aspx
456
472
  <%@ Page Language="C#" AutoEventWireup="true" %>
@@ -459,57 +475,57 @@ export class AppComponent implements OnInit {
459
475
  <html>
460
476
  <head>
461
477
  <title>TIA GPC Widget - ASP.NET</title>
462
- <link rel="stylesheet" href="/assets/tia-gpc-widget.standalone.css" />
478
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
463
479
  </head>
464
480
  <body>
465
481
  <form id="form1" runat="server">
466
- <h1>Mi Aplicación ASP.NET</h1>
482
+ <h1>My ASP.NET Application</h1>
467
483
 
468
- <!-- Widget TIA GPC -->
484
+ <!-- TIA GPC Widget -->
469
485
  <tia-gpc-widget
470
486
  token="<%= ConfigurationManager.AppSettings["TiaGpcToken"] %>"
471
487
  theme="auto"
472
488
  position="bottom-right"
473
- language="es"
489
+ language="en"
474
490
  primary-color="#2563eb"
475
491
  ></tia-gpc-widget>
476
492
  </form>
477
493
 
478
- <script src="/assets/tia-gpc-widget.standalone.js"></script>
494
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
479
495
  <script>
480
- // Eventos opcionales
496
+ // Optional events
481
497
  document.querySelector('tia-gpc-widget').addEventListener('ready', function() {
482
- console.log('Widget TIA GPC inicializado');
498
+ console.log('TIA GPC Widget initialized');
483
499
  });
484
500
  </script>
485
501
  </body>
486
502
  </html>
487
503
  ```
488
504
 
489
- #### Opción 2: Con Master Page
505
+ #### Option 2: With Master Page
490
506
 
491
- En tu `Site.Master`:
507
+ In your `Site.Master`:
492
508
 
493
509
  ```aspx
494
510
  <head runat="server">
495
- <link rel="stylesheet" href="/Scripts/tia-gpc-widget.standalone.css" />
511
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
496
512
  </head>
497
513
  <body>
498
514
  <asp:ContentPlaceHolder ID="MainContent" runat="server">
499
515
  </asp:ContentPlaceHolder>
500
516
 
501
- <!-- Widget global -->
517
+ <!-- Global widget -->
502
518
  <tia-gpc-widget
503
519
  token="<%= GetTiaGpcToken() %>"
504
520
  theme="auto"
505
- language="es"
521
+ language="en"
506
522
  ></tia-gpc-widget>
507
523
 
508
- <script src="/Scripts/tia-gpc-widget.standalone.js"></script>
524
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
509
525
  </body>
510
526
  ```
511
527
 
512
- En tu `Site.Master.cs`:
528
+ In your `Site.Master.cs`:
513
529
 
514
530
  ```csharp
515
531
  public partial class SiteMaster : MasterPage
@@ -521,32 +537,32 @@ public partial class SiteMaster : MasterPage
521
537
  }
522
538
  ```
523
539
 
524
- #### Opción 3: MVC / Razor
540
+ #### Option 3: MVC / Razor
525
541
 
526
- En tu layout `_Layout.cshtml`:
542
+ In your layout `_Layout.cshtml`:
527
543
 
528
544
  ```html
529
545
  <!DOCTYPE html>
530
546
  <html>
531
547
  <head>
532
- <link rel="stylesheet" href="~/Content/tia-gpc-widget.standalone.css" />
548
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
533
549
  </head>
534
550
  <body>
535
551
  @RenderBody()
536
552
 
537
- <!-- Widget TIA GPC -->
553
+ <!-- TIA GPC Widget -->
538
554
  <tia-gpc-widget
539
555
  token="@ViewBag.TiaGpcToken"
540
556
  theme="auto"
541
- language="es"
557
+ language="en"
542
558
  ></tia-gpc-widget>
543
559
 
544
- <script src="~/Scripts/tia-gpc-widget.standalone.js"></script>
560
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
545
561
  </body>
546
562
  </html>
547
563
  ```
548
564
 
549
- En tu `Controller`:
565
+ In your `Controller`:
550
566
 
551
567
  ```csharp
552
568
  public class HomeController : Controller
@@ -563,40 +579,40 @@ public class HomeController : Controller
563
579
 
564
580
  ### 5. Vue.js
565
581
 
566
- #### Instalación
582
+ #### Installation
567
583
 
568
584
  ```bash
569
585
  npm install tia-gpc-widget
570
586
  ```
571
587
 
572
- #### Configuración
588
+ #### Configuration
573
589
 
574
- En `main.js` o `main.ts`:
590
+ In `main.js` or `main.ts`:
575
591
 
576
592
  ```javascript
577
593
  import { createApp } from 'vue';
578
594
  import App from './App.vue';
579
595
 
580
- // Importar el widget standalone
596
+ // Import the standalone widget
581
597
  import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.js';
582
598
  import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.css';
583
599
 
584
600
  const app = createApp(App);
585
601
 
586
- // Configurar Vue para ignorar custom elements
602
+ // Configure Vue to ignore custom elements
587
603
  app.config.compilerOptions.isCustomElement = (tag) => tag === 'tia-gpc-widget';
588
604
 
589
605
  app.mount('#app');
590
606
  ```
591
607
 
592
- #### Uso en componentes
608
+ #### Usage in components
593
609
 
594
610
  ```vue
595
611
  <template>
596
612
  <div>
597
- <h1>Mi Aplicación Vue</h1>
613
+ <h1>My Vue Application</h1>
598
614
 
599
- <!-- Widget TIA GPC -->
615
+ <!-- TIA GPC Widget -->
600
616
  <tia-gpc-widget
601
617
  :token="widgetToken"
602
618
  :theme="theme"
@@ -611,12 +627,12 @@ app.mount('#app');
611
627
  <script setup>
612
628
  import { ref, onMounted } from 'vue';
613
629
 
614
- const widgetToken = ref('tu-license-token');
630
+ const widgetToken = ref('your-license-token');
615
631
  const theme = ref('auto');
616
- const language = ref('es');
632
+ const language = ref('en');
617
633
 
618
634
  const onReady = () => {
619
- console.log('✅ Widget TIA GPC listo');
635
+ console.log('✅ TIA GPC Widget ready');
620
636
  };
621
637
 
622
638
  const onError = (event) => {
@@ -624,7 +640,7 @@ const onError = (event) => {
624
640
  };
625
641
 
626
642
  onMounted(() => {
627
- console.log('TiaGPC disponible:', window.TiaGPC);
643
+ console.log('TiaGPC available:', window.TiaGPC);
628
644
  });
629
645
  </script>
630
646
  ```
@@ -633,43 +649,43 @@ onMounted(() => {
633
649
 
634
650
  ### 6. Next.js
635
651
 
636
- #### Instalación
652
+ #### Installation
637
653
 
638
654
  ```bash
639
655
  npm install tia-gpc-widget
640
656
  ```
641
657
 
642
- #### Uso (con Client Component)
658
+ #### Usage (with Client Component)
643
659
 
644
660
  ```jsx
645
661
  // components/TiaWidget.jsx
646
- 'use client'; // ← Importante: Client Component
662
+ 'use client'; // ← Important: Client Component
647
663
 
648
664
  import { useEffect } from 'react';
649
665
 
650
666
  export default function TiaWidget() {
651
667
  useEffect(() => {
652
- // Importar el widget solo en el cliente
668
+ // Import widget only on client side
653
669
  import('tia-gpc-widget/dist/tia-gpc-widget.standalone.js');
654
670
  }, []);
655
671
 
656
672
  return (
657
673
  <>
658
674
  {/* CSS */}
659
- <link rel="stylesheet" href="/tia-gpc-widget.standalone.css" />
675
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
660
676
 
661
677
  {/* Widget */}
662
678
  <tia-gpc-widget
663
679
  token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN}
664
680
  theme="auto"
665
- language="es"
681
+ language="en"
666
682
  ></tia-gpc-widget>
667
683
  </>
668
684
  );
669
685
  }
670
686
  ```
671
687
 
672
- En tu página:
688
+ In your page:
673
689
 
674
690
  ```jsx
675
691
  // app/page.jsx
@@ -678,7 +694,7 @@ import TiaWidget from '@/components/TiaWidget';
678
694
  export default function Home() {
679
695
  return (
680
696
  <main>
681
- <h1>Mi App Next.js</h1>
697
+ <h1>My Next.js App</h1>
682
698
  <TiaWidget />
683
699
  </main>
684
700
  );
@@ -691,22 +707,22 @@ export default function Home() {
691
707
 
692
708
  ```php
693
709
  <!DOCTYPE html>
694
- <html lang="es">
710
+ <html lang="en">
695
711
  <head>
696
712
  <meta charset="UTF-8">
697
713
  <title>TIA GPC Widget - PHP</title>
698
- <link rel="stylesheet" href="/assets/tia-gpc-widget.standalone.css">
714
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
699
715
  </head>
700
716
  <body>
701
- <h1>Mi Aplicación PHP</h1>
717
+ <h1>My PHP Application</h1>
702
718
 
703
719
  <?php
704
- // Obtener token desde variables de entorno o config
705
- $tiaGpcToken = getenv('TIA_GPC_TOKEN') ?: 'tu-license-token';
706
- $userLanguage = $_SESSION['user_language'] ?? 'es';
720
+ // Get token from environment variables or config
721
+ $tiaGpcToken = getenv('TIA_GPC_TOKEN') ?: 'your-license-token';
722
+ $userLanguage = $_SESSION['user_language'] ?? 'en';
707
723
  ?>
708
724
 
709
- <!-- Widget TIA GPC -->
725
+ <!-- TIA GPC Widget -->
710
726
  <tia-gpc-widget
711
727
  token="<?php echo htmlspecialchars($tiaGpcToken); ?>"
712
728
  theme="auto"
@@ -714,89 +730,89 @@ export default function Home() {
714
730
  language="<?php echo htmlspecialchars($userLanguage); ?>"
715
731
  ></tia-gpc-widget>
716
732
 
717
- <script src="/assets/tia-gpc-widget.standalone.js"></script>
733
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
718
734
  </body>
719
735
  </html>
720
736
  ```
721
737
 
722
738
  ---
723
739
 
724
- ## 🎛️ API y Configuración
740
+ ## 🎛️ API & Configuration
725
741
 
726
- ### Props/Atributos
742
+ ### Props/Attributes
727
743
 
728
- Todos los frameworks soportan los mismos atributos:
744
+ All frameworks support the same attributes:
729
745
 
730
- | Atributo | Tipo | Por Defecto | Descripción |
746
+ | Attribute | Type | Default | Description |
731
747
  |----------|------|-------------|-------------|
732
- | `token` | `string` | **Requerido** | Token de licencia de TIA GPC |
733
- | `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Tema del widget |
734
- | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Posición en la pantalla |
735
- | `language` | `'es' \| 'en' \| 'fr'` | `'es'` | Idioma del widget |
736
- | `primary-color` | `string` | `'#2563eb'` | Color primario (hexadecimal) |
737
- | `width` | `string` | `'400px'` | Ancho del widget |
738
- | `height` | `string` | `'600px'` | Alto del widget |
739
- | `api-url` | `string` | API por defecto | URL de la API personalizada |
740
- | `turnstile-site-key` | `string` | - | Clave del sitio Cloudflare Turnstile |
741
- | `auto-open` | `boolean` | `false` | Abrir automáticamente al cargar |
742
- | `show-branding` | `boolean` | `true` | Mostrar marca de TIA GPC |
743
- | `mobile-fullscreen` | `boolean` | `true` | Pantalla completa en móviles |
744
-
745
- ### Eventos
746
-
747
- | Evento | Descripción | Payload |
748
+ | `token` | `string` | **Required** | TIA GPC license token |
749
+ | `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Widget theme |
750
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
751
+ | `language` | `'es' \| 'en' \| 'fr'` | `'es'` | Widget language |
752
+ | `primary-color` | `string` | `'#2563eb'` | Primary color (hexadecimal) |
753
+ | `width` | `string` | `'400px'` | Widget width |
754
+ | `height` | `string` | `'600px'` | Widget height |
755
+ | `api-url` | `string` | Default API | Custom API URL |
756
+ | `turnstile-site-key` | `string` | - | Cloudflare Turnstile site key |
757
+ | `auto-open` | `boolean` | `false` | Auto-open on load |
758
+ | `show-branding` | `boolean` | `true` | Show TIA GPC branding |
759
+ | `mobile-fullscreen` | `boolean` | `true` | Fullscreen on mobile |
760
+
761
+ ### Events
762
+
763
+ | Event | Description | Payload |
748
764
  |--------|-------------|---------|
749
- | `ready` | Se dispara cuando el widget está listo | - |
750
- | `error` | Se dispara cuando ocurre un error | `{ detail: ErrorObject }` |
751
- | `close` | Se dispara cuando el widget se cierra | - |
765
+ | `ready` | Fired when widget is ready | - |
766
+ | `error` | Fired when an error occurs | `{ detail: ErrorObject }` |
767
+ | `close` | Fired when widget closes | - |
752
768
 
753
- #### Ejemplo de uso de eventos
769
+ #### Event usage example
754
770
 
755
771
  ```html
756
772
  <script>
757
773
  const widget = document.querySelector('tia-gpc-widget');
758
774
 
759
775
  widget.addEventListener('ready', () => {
760
- console.log('Widget listo');
776
+ console.log('Widget ready');
761
777
  });
762
778
 
763
779
  widget.addEventListener('error', (e) => {
764
780
  console.error('Error:', e.detail);
765
- // Enviar a sistema de logging
781
+ // Send to logging system
766
782
  });
767
783
 
768
784
  widget.addEventListener('close', () => {
769
- console.log('Usuario cerró el widget');
770
- // Analytics o tracking
785
+ console.log('User closed the widget');
786
+ // Analytics or tracking
771
787
  });
772
788
  </script>
773
789
  ```
774
790
 
775
- ### API Programática (JavaScript)
791
+ ### Programmatic API (JavaScript)
776
792
 
777
- El widget expone una API global `TiaGPC` para control programático:
793
+ The widget exposes a global `TiaGPC` API for programmatic control:
778
794
 
779
795
  ```javascript
780
- // Crear widget programáticamente
796
+ // Create widget programmatically
781
797
  const widget = TiaGPC.create({
782
- token: 'tu-token',
798
+ token: 'your-token',
783
799
  theme: 'dark',
784
800
  language: 'en',
785
801
  position: TiaGPC.POSITIONS.BOTTOM_LEFT,
786
- onReady: () => console.log('Listo'),
802
+ onReady: () => console.log('Ready'),
787
803
  onError: (err) => console.error(err)
788
804
  });
789
805
 
790
- // Abrir el widget
806
+ // Open widget
791
807
  widget.open();
792
808
 
793
- // Cerrar el widget
809
+ // Close widget
794
810
  widget.close();
795
811
 
796
- // Ver información
812
+ // View information
797
813
  TiaGPC.info();
798
814
 
799
- // Constantes disponibles
815
+ // Available constants
800
816
  console.log(TiaGPC.POSITIONS); // { BOTTOM_RIGHT, BOTTOM_LEFT, ... }
801
817
  console.log(TiaGPC.THEMES); // { AUTO, LIGHT, DARK }
802
818
  console.log(TiaGPC.LANGUAGES); // { ES, EN, FR }
@@ -804,85 +820,85 @@ console.log(TiaGPC.LANGUAGES); // { ES, EN, FR }
804
820
 
805
821
  ---
806
822
 
807
- ## 🎨 Personalización
823
+ ## 🎨 Customization
808
824
 
809
- ### Temas
825
+ ### Themes
810
826
 
811
827
  ```html
812
- <!-- Automático (sigue preferencias del sistema) -->
828
+ <!-- Automatic (follows system preferences) -->
813
829
  <tia-gpc-widget theme="auto"></tia-gpc-widget>
814
830
 
815
- <!-- Claro -->
831
+ <!-- Light -->
816
832
  <tia-gpc-widget theme="light"></tia-gpc-widget>
817
833
 
818
- <!-- Oscuro -->
834
+ <!-- Dark -->
819
835
  <tia-gpc-widget theme="dark"></tia-gpc-widget>
820
836
  ```
821
837
 
822
- ### Posiciones
838
+ ### Positions
823
839
 
824
840
  ```html
825
- <!-- Esquina inferior derecha (por defecto) -->
841
+ <!-- Bottom right corner (default) -->
826
842
  <tia-gpc-widget position="bottom-right"></tia-gpc-widget>
827
843
 
828
- <!-- Esquina inferior izquierda -->
844
+ <!-- Bottom left corner -->
829
845
  <tia-gpc-widget position="bottom-left"></tia-gpc-widget>
830
846
 
831
- <!-- Esquina superior derecha -->
847
+ <!-- Top right corner -->
832
848
  <tia-gpc-widget position="top-right"></tia-gpc-widget>
833
849
 
834
- <!-- Esquina superior izquierda -->
850
+ <!-- Top left corner -->
835
851
  <tia-gpc-widget position="top-left"></tia-gpc-widget>
836
852
  ```
837
853
 
838
- ### Idiomas
854
+ ### Languages
839
855
 
840
856
  ```html
841
- <!-- Español -->
857
+ <!-- Spanish -->
842
858
  <tia-gpc-widget language="es"></tia-gpc-widget>
843
859
 
844
- <!-- Inglés -->
860
+ <!-- English -->
845
861
  <tia-gpc-widget language="en"></tia-gpc-widget>
846
862
 
847
- <!-- Francés -->
863
+ <!-- French -->
848
864
  <tia-gpc-widget language="fr"></tia-gpc-widget>
849
865
  ```
850
866
 
851
- ### Colores
867
+ ### Colors
852
868
 
853
869
  ```html
854
- <!-- Color personalizado -->
870
+ <!-- Custom color -->
855
871
  <tia-gpc-widget
856
872
  primary-color="#10b981"
857
873
  ></tia-gpc-widget>
858
874
 
859
- <!-- Azul (por defecto) -->
875
+ <!-- Blue (default) -->
860
876
  <tia-gpc-widget primary-color="#2563eb"></tia-gpc-widget>
861
877
 
862
- <!-- Verde -->
878
+ <!-- Green -->
863
879
  <tia-gpc-widget primary-color="#16a34a"></tia-gpc-widget>
864
880
 
865
- <!-- Morado -->
881
+ <!-- Purple -->
866
882
  <tia-gpc-widget primary-color="#9333ea"></tia-gpc-widget>
867
883
  ```
868
884
 
869
885
  ---
870
886
 
871
- ## 🛠️ Build y Desarrollo
887
+ ## 🛠️ Build & Development
872
888
 
873
- ### Scripts disponibles
889
+ ### Available scripts
874
890
 
875
891
  ```bash
876
- # Desarrollo (modo dev con hot reload)
892
+ # Development (dev mode with hot reload)
877
893
  npm run dev
878
894
 
879
- # Build completo (NPM + Standalone)
895
+ # Complete build (NPM + Standalone)
880
896
  npm run build
881
897
 
882
- # Build solo para NPM (sin React incluido)
898
+ # Build only for NPM (without bundled React)
883
899
  npm run build:npm
884
900
 
885
- # Build Standalone (con React incluido)
901
+ # Standalone build (with bundled React)
886
902
  npm run build:standalone
887
903
 
888
904
  # Lint
@@ -892,180 +908,185 @@ npm run lint
892
908
  npm run preview
893
909
  ```
894
910
 
895
- ### Estructura de archivos generados
911
+ ### Generated file structure
896
912
 
897
913
  ```
898
914
  dist/
899
- ├── tia-gpc.es.js # Build ESM para NPM
900
- ├── tia-gpc.cjs.js # Build CommonJS para NPM
901
- ├── tia-gpc.css # CSS para build NPM
902
- ├── tia-gpc-widget.standalone.js # Build standalone (IIFE con React)
903
- └── tia-gpc-widget.standalone.css # CSS para standalone
915
+ ├── tia-gpc.es.js # ESM build for NPM
916
+ ├── tia-gpc.cjs.js # CommonJS build for NPM
917
+ ├── tia-gpc.css # CSS for NPM build
918
+ ├── tia-gpc-widget.standalone.js # Standalone build (IIFE with React)
919
+ └── tia-gpc-widget.standalone.css # CSS for standalone
904
920
  ```
905
921
 
906
- ### ¿Cuál archivo usar?
922
+ ### Which file to use?
907
923
 
908
- | Entorno | Archivo a usar |
924
+ | Environment | File to use |
909
925
  |---------|----------------|
910
- | React, Vue (con build system) | `tia-gpc.es.js` + `tia-gpc.css` |
926
+ | React, Vue (with build system) | `tia-gpc.es.js` + `tia-gpc.css` |
911
927
  | Node.js CommonJS | `tia-gpc.cjs.js` + `tia-gpc.css` |
912
- | HTML puro, Angular, ASP.NET, PHP | `tia-gpc-widget.standalone.js` + `tia-gpc-widget.standalone.css` |
928
+ | Plain HTML, Angular, ASP.NET, PHP | `tia-gpc-widget.standalone.js` + `tia-gpc-widget.standalone.css` |
913
929
 
914
930
  ---
915
931
 
916
- ## 📤 Publicación
932
+ ## 📤 Publishing
917
933
 
918
- ### Publicar en NPM (Público)
934
+ ### Publish to NPM (Public)
919
935
 
920
936
  ```bash
921
- # 1. Login en NPM
937
+ # 1. Login to NPM
922
938
  npm login
923
939
 
924
- # 2. Construir el proyecto
940
+ # 2. Build the project
925
941
  npm run build
926
942
 
927
- # 3. Publicar
943
+ # 3. Publish
928
944
  npm publish
929
945
  ```
930
946
 
931
- ### Publicar en NPM Privado / GitLab Package Registry
947
+ ### Publish to Private NPM / GitLab Package Registry
932
948
 
933
- #### Configurar `.npmrc`
949
+ #### Configure `.npmrc`
934
950
 
935
- Crea un archivo `.npmrc` en la raíz del proyecto:
951
+ Create an `.npmrc` file in the project root:
936
952
 
937
953
  ```ini
938
- # Para GitLab Package Registry
939
- @tu-scope:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
954
+ # For GitLab Package Registry
955
+ @your-scope:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
940
956
  //gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/:_authToken=${CI_JOB_TOKEN}
941
957
  ```
942
958
 
943
- #### Actualizar `package.json`
959
+ #### Update `package.json`
944
960
 
945
961
  ```json
946
962
  {
947
- "name": "@tu-scope/tia-gpc-widget",
963
+ "name": "@your-scope/tia-gpc-widget",
948
964
  "publishConfig": {
949
- "@tu-scope:registry": "https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/"
965
+ "@your-scope:registry": "https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/"
950
966
  }
951
967
  }
952
968
  ```
953
969
 
954
- #### Publicar
970
+ #### Publish
955
971
 
956
972
  ```bash
957
973
  npm run build
958
974
  npm publish
959
975
  ```
960
976
 
961
- ### Publicar en CDN
977
+ ### CDN Distribution
962
978
 
963
- 1. Hacer build del proyecto:
964
- ```bash
965
- npm run build
966
- ```
979
+ After publishing to npm, your package is automatically available on these CDNs:
967
980
 
968
- 2. Subir archivos al CDN:
969
- ```
970
- dist/tia-gpc-widget.standalone.js → https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js
971
- dist/tia-gpc-widget.standalone.css → https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css
972
- ```
981
+ #### jsDelivr
982
+ ```html
983
+ <script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
984
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
985
+ ```
973
986
 
974
- 3. Usuarios pueden incluir directamente:
975
- ```html
976
- <script src="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.js"></script>
977
- <link rel="stylesheet" href="https://cdn.tu-dominio.com/tia-gpc-widget.standalone.css">
978
- ```
987
+ #### unpkg
988
+ ```html
989
+ <script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
990
+ <link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
991
+ ```
979
992
 
980
- ### Distribución Manual
993
+ **Note:** CDNs may take 5-10 minutes to sync after publishing to npm.
981
994
 
982
- Copia los archivos del `dist/` a tu servidor web:
995
+ ### Manual Distribution
996
+
997
+ Copy files from `dist/` to your web server:
983
998
 
984
999
  ```bash
985
- # Copiar archivos standalone al servidor
1000
+ # Copy standalone files to server
986
1001
  cp dist/tia-gpc-widget.standalone.* /var/www/html/assets/
987
1002
  ```
988
1003
 
989
1004
  ---
990
1005
 
991
- ## 🔐 Obtener Token de Licencia
1006
+ ## 🔐 Getting a License Token
992
1007
 
993
- Para usar este widget necesitas un token de licencia de TIA GPC. Contacta con el equipo de TIA para obtener tu token:
1008
+ To use this widget you need a TIA GPC license token. Contact the TIA team to get your token:
994
1009
 
995
- - **Email**: soporte@tia.com
1010
+ - **Email**: support@tia.com
996
1011
  - **Web**: https://tia.com/gpc
997
1012
 
998
1013
  ---
999
1014
 
1000
- ## 📊 Tamaño de los Bundles
1015
+ ## 📊 Bundle Sizes
1001
1016
 
1002
- | Archivo | Tamaño (gzip) | Descripción |
1017
+ | File | Size (gzip) | Description |
1003
1018
  |---------|---------------|-------------|
1004
- | `tia-gpc.es.js` | ~45 KB | Build NPM (sin React) |
1005
- | `tia-gpc-widget.standalone.js` | ~180 KB | Build standalone (con React) |
1006
- | `*.css` | ~15 KB | Estilos |
1019
+ | `tia-gpc.es.js` | ~45 KB | NPM build (without React) |
1020
+ | `tia-gpc-widget.standalone.js` | ~180 KB | Standalone build (with React) |
1021
+ | `*.css` | ~15 KB | Styles |
1007
1022
 
1008
- El bundle standalone es más grande porque incluye React y todas las dependencias.
1023
+ The standalone bundle is larger because it includes React and all dependencies.
1009
1024
 
1010
1025
  ---
1011
1026
 
1012
1027
  ## 🐛 Troubleshooting
1013
1028
 
1014
- ### El widget no aparece
1029
+ ### Widget doesn't appear
1015
1030
 
1016
- 1. Verifica que incluiste ambos archivos (JS y CSS)
1017
- 2. Revisa la consola del navegador para errores
1018
- 3. Asegúrate de que el token es válido
1031
+ 1. Verify you included both files (JS and CSS)
1032
+ 2. Check browser console for errors
1033
+ 3. Make sure the token is valid
1019
1034
 
1020
1035
  ### Error: "customElements.define() called with incorrect arguments"
1021
1036
 
1022
- - En Angular: Agrega `CUSTOM_ELEMENTS_SCHEMA` a tu módulo
1023
- - En Vue: Configura `isCustomElement` en el compiler options
1037
+ - In Angular: Add `CUSTOM_ELEMENTS_SCHEMA` to your module
1038
+ - In Vue: Configure `isCustomElement` in compiler options
1024
1039
 
1025
- ### Conflictos de CSS
1040
+ ### CSS Conflicts
1026
1041
 
1027
- El widget usa prefijos `gpc-` en todas las clases para evitar conflictos. Si aún hay problemas, puedes aumentar la especificidad:
1042
+ The widget uses `gpc-` prefixes on all classes to avoid conflicts. If there are still issues, you can increase specificity:
1028
1043
 
1029
1044
  ```css
1030
- .tu-contenedor tia-gpc-widget {
1031
- /* tus estilos personalizados */
1045
+ .your-container tia-gpc-widget {
1046
+ /* your custom styles */
1032
1047
  }
1033
1048
  ```
1034
1049
 
1035
- ### React no está definido (en build standalone)
1050
+ ### React is not defined (in standalone build)
1036
1051
 
1037
- Si ves este error, asegúrate de estar usando el archivo `standalone.js` y no el build NPM regular.
1052
+ If you see this error, make sure you're using the `standalone.js` file and not the regular NPM build.
1038
1053
 
1039
1054
  ---
1040
1055
 
1041
- ## 📝 Licencia
1056
+ ## 📝 License
1042
1057
 
1043
- UNLICENSED - Uso interno de TIA
1058
+ UNLICENSED - Internal use by TIA
1044
1059
 
1045
1060
  ---
1046
1061
 
1047
- ## 👥 Soporte
1062
+ ## 👥 Support
1048
1063
 
1049
- Para soporte técnico:
1064
+ For technical support:
1050
1065
 
1051
- - **Email**: soporte@tia.com
1066
+ - **Email**: support@tia.com
1052
1067
  - **GitLab Issues**: https://gitlab.com/softia/tiagpc-frontend/issues
1053
- - **Documentación**: Este README
1068
+ - **Documentation**: This README
1054
1069
 
1055
1070
  ---
1056
1071
 
1057
1072
  ## 🚀 Changelog
1058
1073
 
1074
+ ### v1.0.6 (2025-01-11)
1075
+
1076
+ - ✨ Added CDN support via jsDelivr and unpkg
1077
+ - 📝 Updated documentation to English
1078
+ - 🔧 Added `unpkg` and `jsdelivr` fields to package.json
1079
+
1059
1080
  ### v1.0.0 (2025-01-10)
1060
1081
 
1061
- - ✨ Versión inicial
1062
- - ✅ Soporte para React
1063
- - ✅ Build standalone para HTML/Angular/ASP.NET
1082
+ - ✨ Initial release
1083
+ - ✅ React support
1084
+ - ✅ Standalone build for HTML/Angular/ASP.NET
1064
1085
  - ✅ Web Component API
1065
- - ✅ Temas claro/oscuro
1066
- - ✅ Internacionalización (ES/EN/FR)
1067
- - ✅ Personalización completa
1086
+ - ✅ Light/dark themes
1087
+ - ✅ Internationalization (ES/EN/FR)
1088
+ - ✅ Full customization
1068
1089
 
1069
1090
  ---
1070
1091
 
1071
- **Desarrollado con ❤️ por el equipo de TIA**
1092
+ **Built with ❤️ by the TIA team**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tia-gpc-widget",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Widget TIA GPC - Compatible con React, HTML puro, Angular, ASP.NET y cualquier framework",
5
5
  "type": "module",
6
6
  "main": "./dist/tia-gpc.cjs.js",