valtech-components 2.0.691 → 2.0.692

package/I18N-COMPONENTS-MIGRATION.md

@@ -1,496 +0,0 @@
-# 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

@@ -1,60 +0,0 @@
-{
-  "$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

@@ -1,16 +0,0 @@
-{
-  "$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/scripts/publish.sh

@@ -1,30 +0,0 @@
-#!/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"

package/scripts/update-apps.sh

@@ -1,94 +0,0 @@
-#!/bin/bash
-set -e
-
-# Colores para output
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-RED='\033[0;31m'
-NC='\033[0m' # No Color
-
-# Obtener directorio del script (absoluto)
-SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
-VALTECH_COMPONENTS_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
-FRONTEND_DIR="$(cd "$VALTECH_COMPONENTS_DIR/.." && pwd)"
-
-# Obtener la versión recién publicada
-VERSION=$(node -p "require('$VALTECH_COMPONENTS_DIR/package.json').version")
-echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"
-echo -e "${GREEN}  Actualizando apps frontend a valtech-components@${VERSION}${NC}"
-echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"
-
-# Esperar a que el paquete esté disponible en npm
-echo -e "\n${YELLOW}⏳ Esperando que valtech-components@${VERSION} esté disponible en npm...${NC}"
-MAX_ATTEMPTS=30
-ATTEMPT=1
-SLEEP_TIME=2
-
-while [ $ATTEMPT -le $MAX_ATTEMPTS ]; do
-  # Verificar si la versión está disponible en npm
-  NPM_VERSION=$(npm view valtech-components@${VERSION} version 2>/dev/null || echo "")
-
-  if [ "$NPM_VERSION" = "$VERSION" ]; then
-    echo -e "${GREEN}✓ Paquete disponible en npm${NC}"
-    break
-  fi
-
-  if [ $ATTEMPT -eq $MAX_ATTEMPTS ]; then
-    echo -e "${RED}✗ Timeout: El paquete no está disponible después de $((MAX_ATTEMPTS * SLEEP_TIME)) segundos${NC}"
-    echo -e "${YELLOW}  Puedes ejecutar este script manualmente más tarde.${NC}"
-    exit 1
-  fi
-
-  echo -e "   Intento ${ATTEMPT}/${MAX_ATTEMPTS} - esperando ${SLEEP_TIME}s..."
-  sleep $SLEEP_TIME
-  ATTEMPT=$((ATTEMPT + 1))
-done
-
-# Apps que usan valtech-components
-APPS=(
-  "app-template"
-  "components-showcase"
-  "showcase"
-  "ui-docs"
-)
-
-# Contador de apps actualizadas
-UPDATED=0
-SKIPPED=0
-
-# Actualizar cada app
-for APP in "${APPS[@]}"; do
-  APP_PATH="${FRONTEND_DIR}/${APP}"
-
-  if [ -d "$APP_PATH" ] && [ -f "$APP_PATH/package.json" ]; then
-    # Verificar si la app usa valtech-components
-    if grep -q '"valtech-components"' "$APP_PATH/package.json"; then
-      # Obtener versión actual
-      CURRENT_VERSION=$(node -p "require('$APP_PATH/package.json').dependencies['valtech-components']" 2>/dev/null || echo "unknown")
-
-      echo -e "\n${YELLOW}📦 ${APP}${NC}"
-      echo -e "   Versión actual: ${CURRENT_VERSION}"
-      echo -e "   Nueva versión:  ^${VERSION}"
-
-      # Actualizar versión en package.json
-      echo -e "   Actualizando package.json..."
-      (cd "$APP_PATH" && npm pkg set "dependencies.valtech-components=^${VERSION}")
-
-      # Ejecutar npm install
-      echo -e "   Ejecutando npm install..."
-      (cd "$APP_PATH" && npm install 2>&1 | tail -3)
-
-      echo -e "${GREEN}   ✓ ${APP} actualizado correctamente${NC}"
-      UPDATED=$((UPDATED + 1))
-    else
-      echo -e "\n${YELLOW}⏭ ${APP}${NC} - No usa valtech-components, saltando..."
-      SKIPPED=$((SKIPPED + 1))
-    fi
-  else
-    echo -e "\n${RED}✗ ${APP}${NC} - Directorio no encontrado: $APP_PATH"
-  fi
-done
-
-echo -e "\n${GREEN}══════════════════════════════════════════════════════════════${NC}"
-echo -e "${GREEN}  Resumen: ${UPDATED} apps actualizadas, ${SKIPPED} saltadas${NC}"
-echo -e "${GREEN}══════════════════════════════════════════════════════════════${NC}"