valtech-components 2.0.687 → 2.0.689

package/I18N-COMPONENTS-MIGRATION.md

@@ -0,0 +1,496 @@
+# Migración i18n - valtech-components
+
+**Estado:** Completado (Fases 1-7 completadas)
+**Última actualización:** 2026-01-15
+**Total componentes:** ~25 con texto hardcodeado
+
+---
+
+## Resumen
+
+Este documento lista todos los componentes de `valtech-components` que tienen texto hardcodeado y necesitan migrar a `I18nService` para soportar internacionalización nativa.
+
+### Estadísticas
+
+| Categoría | Componentes | Strings | Prioridad |
+|-----------|-------------|---------|-----------|
+| Molecules | 18 | ~55 | Alta |
+| Organisms | 4 | ~25 | Alta |
+| Atoms | 3 | ~5 | Baja |
+| **Total** | **25** | **~85** | - |
+
+---
+
+## Molecules (Prioridad Alta)
+
+### 1. plain-code-box.component.ts ✅
+**Estado:** Migrado en v2.0.529
+**Key utilizada:** `copiedToClipboard`
+
+---
+
+### 2. command-display.component.ts ✅
+**Estado:** Migrado en v2.0.529
+**Key utilizada:** `copiedToClipboard`
+
+---
+
+### 3. share-buttons.component.ts ✅
+**Estado:** Migrado en v2.0.529
+**Key utilizada:** `linkCopied`
+
+---
+
+### 4. select-search.component.ts ✅
+**Estado:** Migrado en v2.0.535
+**Keys utilizadas:** `select`, `selectOption`, `close`, `noResults`, `itemsSelected`
+
+**Nota:** Ya usaba I18nService para `close` y `noResults`. Agregado getLabel() y getPlaceholder() con fallbacks i18n.
+
+---
+
+### 5. multi-select-search.component.ts ✅
+**Estado:** Migrado en v2.0.535
+**Keys utilizadas:** `selectOptions`, `close`, `noResults`, `selectAll`, `clear`, `apply`, `itemsSelected`
+
+**Nota:** Ya usaba I18nService para varios textos. Agregado getLabel() y getPlaceholder() con fallbacks i18n.
+
+---
+
+### 6. feedback-form.component.ts ✅
+**Estado:** Migrado en v2.0.533
+**Keys utilizadas:** `feedbackType`, `title`, `titlePlaceholder`, `titleValidation`, `description`, `descriptionPlaceholder`, `descriptionValidation`, `feedbackSuccess`, `feedbackError`, `submit`
+
+**Archivo original:**
+**Múltiples líneas:**
+
+| Línea | Texto | Key sugerida |
+|-------|-------|--------------|
+| 104 | `'Tipo de feedback'` | `feedbackTypeLabel` |
+| 121 | `'Título'` | `title` |
+| 123 | `'Describe brevemente...'` | `titlePlaceholder` |
+| 132 | `'El título debe tener entre 5 y 200 caracteres'` | `titleValidation` |
+| 140 | `'Descripción'` | `description` |
+| 142 | `'Proporciona más detalles...'` | `descriptionPlaceholder` |
+| 151 | `'La descripción debe tener entre 10 y 5000 caracteres'` | `descriptionValidation` |
+| 167 | `'Feedback enviado exitosamente'` | `feedbackSuccess` |
+| 191 | `'Enviar'` | `submit` |
+| 343 | `'Error al enviar el feedback'` | `feedbackError` |
+
+---
+
+### 7. comment.component.ts ✅
+**Estado:** Migrado en v2.0.533
+**Keys utilizadas:** `pinned`, `edited`, `showComment`, `hideReplies`, `loadMoreReplies`, `viewReplies`, `justNow`, `minutesAgo`, `hoursAgo`, `daysAgo`
+
+**Archivo original:**
+**Múltiples líneas:**
+
+| Línea | Texto | Key sugerida |
+|-------|-------|--------------|
+| 84 | `'Pinned'` | `pinned` |
+| 114 | `'(edited)'` | `edited` |
+| 207 | `'Show comment'` | `showComment` |
+| 218 | `'Hide replies'` | `hideReplies` |
+| 238 | `'Load {{ getRemainingCount() }} more replies'` | `loadMoreReplies` |
+| 244 | `'View {{ ... }} replies'` | `viewReplies` |
+| 330-333 | Timestamps (`'Just now'`, `'${minutes}m ago'`, etc.) | `justNow`, `minutesAgo`, `hoursAgo`, `daysAgo` |
+
+---
+
+### 8. refresher.component.ts ✅
+**Estado:** Migrado en v2.0.536
+**Keys utilizadas:** `pullToRefresh`, `loading`
+
+**Nota:** Agregado I18nService con getPullingText() y getRefreshingText() como fallbacks.
+
+---
+
+### 9. glow-card.component.ts ✅
+**Estado:** Migrado en v2.0.536
+**Keys utilizadas:** `seeMore`
+
+**Nota:** Agregado I18nService en getCtaText() como fallback.
+
+---
+
+### 10. expandable-text.component.ts ✅
+**Estado:** Migrado en v2.0.536
+**Keys utilizadas:** `seeMore`
+
+**Nota:** Agregado I18nService en getExpandText() como fallback.
+
+---
+
+### 11. number-from-to.component.ts ✅
+**Estado:** Migrado en v2.0.538
+**Keys utilizadas:** `from`, `to`
+
+**Nota:** Agregado I18nService con getFromLabel() y getToLabel() como fallbacks.
+
+---
+
+### 12. hint.component.ts ✅
+**Estado:** Migrado en v2.0.538
+**Keys utilizadas:** `from`, `to`
+
+**Nota:** Agregado I18nService para labels de error en campos from/to.
+
+---
+
+### 13. number-stepper.component.ts ✅
+**Estado:** Migrado en v2.0.538
+**Keys utilizadas:** `decrease`, `increase`
+
+**Nota:** Agregado I18nService con getDecrementLabel() y getIncrementLabel() como fallbacks.
+
+---
+
+### 14. ticket-grid.component.ts 🔴
+**Línea 420:**
+```typescript
+return this.props.randomSelectLabel || 'Aleatorio';
+```
+**Key sugerida:** `random`
+
+---
+
+### 15. date-range-input.component.ts 🟡
+**Líneas 183-196:**
+```typescript
+return this.i18n.t('startDate', '_global') || 'Start date';
+return this.i18n.t('endDate', '_global') || 'End date';
+return this.i18n.t('day', '_global') || 'day';
+return this.i18n.t('days', '_global') || 'days';
+```
+**Nota:** Ya usa I18nService pero tiene fallbacks en inglés hardcodeados. Las keys `startDate`, `endDate`, `day`, `days` deben estar en `default-content.ts`.
+
+---
+
+### 16. participant-card.component.ts ✅
+**Estado:** Migrado en v2.0.539
+**Keys utilizadas:** `paymentPending`, `paymentProcessing`, `paymentPaid`, `paymentRefunded`, `paymentFailed`
+
+**Nota:** Actualizado getPaymentStatusLabel() para usar I18nService en lugar de DEFAULT_PAYMENT_STATUS_LABELS. Las custom labels via props siguen funcionando como override.
+
+---
+
+### 17. code-display.component.ts ✅
+**Línea 94:**
+```typescript
+this.presentToast(this.i18n.t('copiedToClipboard'));
+```
+**Estado:** Ya usa I18nService correctamente.
+
+---
+
+### 18. searchbar.component.ts ✅
+**Estado:** Ya usa I18nService para `search` y `cancel`.
+
+---
+
+## Organisms (Prioridad Alta)
+
+### 19. infinite-list.component.ts ✅
+**Estado:** Migrado en v2.0.530
+**Keys utilizadas:** `error`, `errorOccurred`, `retry`, `loadMore`, `noMoreItems`, `loading`, `loadingItems`, `allItemsLoaded`
+
+---
+
+### 20. comment-section.component.ts ✅
+**Estado:** Migrado en v2.0.530
+**Keys utilizadas:** `sortBy`, `comments`, `loadMoreComments`, `publish`, `noCommentsYet`, `writeComment`, `beFirstToComment`
+
+---
+
+### 21. data-table.component.ts 🟡
+**Estado:** Parcialmente migrado. Revisar mensajes de estado vacío.
+
+---
+
+### 22. menu.component.ts ✅
+**Estado:** Ya usa I18nService para el botón close.
+
+---
+
+## Atoms (Prioridad Baja)
+
+### 23. countdown.component.ts ✅
+**Estado:** Migrado en v2.0.538
+**Keys utilizadas:** `timeExpired`
+
+**Nota:** Agregado I18nService en getExpiredMessage() como fallback.
+
+---
+
+### 24. rights-footer.component.ts ✅
+**Estado:** Ya usa I18nService para `allRightsReserved`.
+
+---
+
+### 25. qr-code.component.ts 🟡
+**Línea 50:**
+```typescript
+[alt]="props.alt || 'QR Code'"
+```
+**Key sugerida:** `qrCode` (baja prioridad, es alt text)
+
+---
+
+## Keys a Agregar en default-content.ts
+
+Agregar estas keys al archivo `services/i18n/default-content.ts`:
+
+```typescript
+es: {
+  // Clipboard
+  copiedToClipboard: '¡Copiado al portapapeles!',
+  linkCopied: '¡Enlace copiado!',
+
+  // Selection
+  select: 'Seleccionar',
+  selectOption: 'Seleccione una opción',
+  selectOptions: 'Seleccionar opciones',
+
+  // Feedback form
+  feedbackTypeLabel: 'Tipo de feedback',
+  titlePlaceholder: 'Describe brevemente...',
+  titleValidation: 'El título debe tener entre 5 y 200 caracteres',
+  descriptionPlaceholder: 'Proporciona más detalles...',
+  descriptionValidation: 'La descripción debe tener entre 10 y 5000 caracteres',
+  feedbackSuccess: 'Feedback enviado exitosamente',
+  feedbackError: 'Error al enviar el feedback',
+
+  // Comments
+  pinned: 'Fijado',
+  edited: '(editado)',
+  showComment: 'Mostrar comentario',
+  hideReplies: 'Ocultar respuestas',
+  loadMoreReplies: 'Cargar más respuestas',
+  viewReplies: 'Ver respuestas',
+  comments: 'Comentarios',
+  noCommentsYet: 'Sin comentarios aún',
+  publish: 'Publicar',
+
+  // Timestamps
+  justNow: 'Ahora mismo',
+  minutesAgo: 'hace {minutes}m',
+  hoursAgo: 'hace {hours}h',
+  daysAgo: 'hace {days}d',
+
+  // Lists
+  loadMore: 'Cargar más',
+  loadMoreComments: 'Cargar más comentarios',
+  noMoreItems: 'No hay más items',
+  loadingItems: 'Cargando items...',
+  allItemsLoaded: 'Todos los items han sido cargados',
+  errorOccurred: 'Ocurrió un error',
+  retry: 'Reintentar',
+
+  // Navigation
+  seeMore: 'Ver más',
+
+  // Forms
+  from: 'Inicial',
+  to: 'Final',
+  startDate: 'Fecha inicio',
+  endDate: 'Fecha fin',
+  day: 'día',
+  days: 'días',
+
+  // Stepper
+  decrease: 'Disminuir',
+  increase: 'Aumentar',
+
+  // Misc
+  random: 'Aleatorio',
+  pullToRefresh: 'Arrastra para actualizar',
+  timeExpired: 'Tiempo agotado',
+  sortBy: 'Ordenar por',
+  qrCode: 'Código QR',
+
+  // Payment status
+  paymentPending: 'Pendiente',
+  paymentProcessing: 'Procesando',
+  paymentPaid: 'Pagado',
+  paymentRefunded: 'Reembolsado',
+  paymentFailed: 'Fallido',
+},
+en: {
+  // Clipboard
+  copiedToClipboard: 'Copied to clipboard!',
+  linkCopied: 'Link copied!',
+
+  // Selection
+  select: 'Select',
+  selectOption: 'Select an option',
+  selectOptions: 'Select options',
+
+  // Feedback form
+  feedbackTypeLabel: 'Feedback type',
+  titlePlaceholder: 'Describe briefly...',
+  titleValidation: 'Title must be between 5 and 200 characters',
+  descriptionPlaceholder: 'Provide more details...',
+  descriptionValidation: 'Description must be between 10 and 5000 characters',
+  feedbackSuccess: 'Feedback sent successfully',
+  feedbackError: 'Error sending feedback',
+
+  // Comments
+  pinned: 'Pinned',
+  edited: '(edited)',
+  showComment: 'Show comment',
+  hideReplies: 'Hide replies',
+  loadMoreReplies: 'Load more replies',
+  viewReplies: 'View replies',
+  comments: 'Comments',
+  noCommentsYet: 'No comments yet',
+  publish: 'Publish',
+
+  // Timestamps
+  justNow: 'Just now',
+  minutesAgo: '{minutes}m ago',
+  hoursAgo: '{hours}h ago',
+  daysAgo: '{days}d ago',
+
+  // Lists
+  loadMore: 'Load more',
+  loadMoreComments: 'Load more comments',
+  noMoreItems: 'No more items',
+  loadingItems: 'Loading items...',
+  allItemsLoaded: 'All items loaded',
+  errorOccurred: 'An error occurred',
+  retry: 'Retry',
+
+  // Navigation
+  seeMore: 'See more',
+
+  // Forms
+  from: 'From',
+  to: 'To',
+  startDate: 'Start date',
+  endDate: 'End date',
+  day: 'day',
+  days: 'days',
+
+  // Stepper
+  decrease: 'Decrease',
+  increase: 'Increase',
+
+  // Misc
+  random: 'Random',
+  pullToRefresh: 'Pull to refresh',
+  timeExpired: 'Time expired',
+  sortBy: 'Sort by',
+  qrCode: 'QR Code',
+
+  // Payment status
+  paymentPending: 'Pending',
+  paymentProcessing: 'Processing',
+  paymentPaid: 'Paid',
+  paymentRefunded: 'Refunded',
+  paymentFailed: 'Failed',
+},
+```
+
+---
+
+## Patrón de Migración
+
+Para cada componente:
+
+### 1. Inyectar I18nService
+
+```typescript
+import { inject } from '@angular/core';
+import { I18nService } from '../../../services/i18n';
+
+export class MyComponent {
+  private i18n = inject(I18nService);
+}
+```
+
+### 2. Crear método/computed para texto
+
+```typescript
+// Opción A: Método simple (para componentes sin OnPush)
+getCopyMessage(): string {
+  return this.i18n.t('copiedToClipboard');
+}
+
+// Opción B: Computed (para componentes con OnPush y reactividad)
+copyMessage = computed(() => this.i18n.t('copiedToClipboard'));
+```
+
+### 3. Usar en template/código
+
+```typescript
+// En código
+this.presentToast(this.i18n.t('copiedToClipboard'));
+
+// En template con método
+{{ getCopyMessage() }}
+
+// En template con computed
+{{ copyMessage() }}
+```
+
+### 4. Mantener fallback via props (opcional)
+
+```typescript
+// Permite override por el consumidor
+const message = this.props.copyMessage || this.i18n.t('copiedToClipboard');
+```
+
+---
+
+## Orden de Migración Sugerido
+
+| Fase | Componentes | Impacto | Estado |
+|------|-------------|---------|--------|
+| 1 | `plain-code-box`, `command-display`, `share-buttons` | Alto (clipboard) | ✅ v2.0.529 |
+| 2 | `infinite-list`, `comment-section` | Alto (listas) | ✅ v2.0.530 |
+| 3 | `feedback-form`, `comment` | Alto (forms) | ✅ v2.0.533 |
+| 4 | `select-search`, `multi-select-search` | Medio | ✅ v2.0.535 |
+| 5 | `refresher`, `glow-card`, `expandable-text` | Medio | ✅ v2.0.536 |
+| 6 | `number-*`, `hint`, `countdown` | Bajo | ✅ v2.0.538 |
+| 7 | `participant-card` | Bajo | ✅ v2.0.539 |
+
+---
+
+## Componentes Ya Migrados ✅
+
+Estos componentes ya usan I18nService correctamente:
+
+- `code-display.component.ts`
+- `searchbar.component.ts`
+- `select-input.component.ts`
+- `popover-selector.component.ts`
+- `date-input.component.ts`
+- `date-range-input.component.ts`
+- `file-input.component.ts`
+- `language-selector.component.ts`
+- `qr-code.component.ts`
+- `rights-footer.component.ts`
+- `menu.component.ts`
+- `page-template.component.ts`
+- `data-table.component.ts`
+- `participant-card.component.ts`
+
+---
+
+## Verificación
+
+Después de migrar cada componente:
+
+1. Build: `npm run build`
+2. Verificar en Storybook: `npm run storybook`
+3. Cambiar idioma y verificar que textos cambian
+4. Publicar: `npm run publish:patch`
+
+---
+
+## Referencias
+
+- [docs/frontend/i18n.md](../../docs/frontend/i18n.md) - Guía completa
+- [services/i18n/default-content.ts](src/lib/services/i18n/default-content.ts) - Defaults
+- [ADR 007](../../docs/adr/007-frontend-i18n-presets.md) - Decisiones

package/angular.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": ".",
+  "projects": {
+    "valtech-components": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "prefix": "val",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": ["zone.js", "zone.js/testing"]
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "valtech-components:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "valtech-components:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "outputDir": "storybook-static"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/ng-package.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/valtech-components",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib/assets/fonts"]
+  },
+  "assets": [
+    "src/lib/components/styles",
+    "src/lib/assets/fonts",
+    "./styles",
+    "src/lib/services/firebase/scripts",
+    "src/lib/services/firebase/firebase-messaging-sw.js"
+  ],
+  "allowedNonPeerDependencies": ["ng-otp-input", "@capacitor/browser", "ngx-image-cropper"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.687",
+  "version": "2.0.689",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -10,6 +10,18 @@
     "url": "git+https://github.com/solucionesvaltech/myvaltech.git",
     "directory": "frontend/valtech-components"
   },
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "build:prod": "ng build --configuration production",
+    "test": "ng test",
+    "storybook": "ng run valtech-components:storybook",
+    "build-storybook": "ng run valtech-components:build-storybook",
+    "prettier": "prettier --write \"src/**/*\"",
+    "publish:patch": "./scripts/publish.sh",
+    "update-apps": "./scripts/update-apps.sh",
+    "publish:all": "./scripts/publish.sh && ./scripts/update-apps.sh"
+  },
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -35,18 +47,54 @@
     "ngx-image-cropper": "^9.0.0",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/valtech-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/valtech-components.mjs",
-      "esm": "./esm2022/valtech-components.mjs",
-      "default": "./fesm2022/valtech-components.mjs"
-    }
-  }
-}
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/fire": "^18.0.1",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@babel/runtime": "^7.28.4",
+    "@capacitor/app": "^6.0.3",
+    "@capacitor/clipboard": "^6.0.1",
+    "@capacitor/core": "^6.0.0",
+    "@chromatic-com/storybook": "^3.2.7",
+    "@compodoc/compodoc": "^1.1.32",
+    "@ionic/angular": "^8.0.0",
+    "@ionic/core": "^8.0.0",
+    "@storybook/addon-a11y": "8.6.15",
+    "@storybook/addon-docs": "8.6.15",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-interactions": "8.6.15",
+    "@storybook/angular": "8.6.15",
+    "@storybook/blocks": "8.6.15",
+    "@storybook/test": "8.6.15",
+    "@types/jasmine": "~5.1.0",
+    "@types/prismjs": "^1.26.5",
+    "firebase": "^10.14.1",
+    "ionicons": "^7.2.1",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^18.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prismjs": "^1.30.0",
+    "qr-code-styling": "^1.9.0",
+    "rxjs": "~7.8.0",
+    "storybook": "8.6.15",
+    "swiper": "^11.2.8",
+    "typescript": "~5.4.2",
+    "zone.js": "~0.14.3"
+  },
+  "sideEffects": false
+}

package/scripts/publish.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+
+# Incrementar versión patch
+npm version patch --no-git-tag-version
+
+# Obtener la nueva versión del package.json
+NEW_VERSION=$(node -p "require('./package.json').version")
+
+# Actualizar version.ts con la nueva versión
+cat > src/lib/version.ts << EOF
+/**
+ * Current version of valtech-components.
+ * This is automatically updated during the publish process.
+ */
+export const VERSION = '$NEW_VERSION';
+EOF
+
+# Build de producción
+npm run build:prod
+
+# Publicar desde dist
+cd dist/valtech-components
+npm publish
+
+# Volver y limpiar
+cd ../..
+rm -rf dist
+
+echo "Publicación completada exitosamente"