valtech-components 2.0.794 → 2.0.795

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm whoami:*)"
+    ]
+  }
+}

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.prettierignore

@@ -0,0 +1,6 @@
+dist
+node_modules
+.angular
+coverage
+*.min.js
+*.min.css

package/.prettierrc

@@ -0,0 +1,30 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "bracketSameLine": false,
+  "singleAttributePerLine": false,
+  "overrides": [
+    {
+      "files": "*.component.ts",
+      "options": {
+        "parser": "typescript",
+        "printWidth": 120
+      }
+    },
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html",
+        "printWidth": 120
+      }
+    }
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@chromatic-com/storybook',
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  staticDirs: ['../src/lib/assets'],
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

package/.storybook/preview-body.html

@@ -0,0 +1,60 @@
+<style>
+  /* Fix scroll issues in Storybook docs */
+  .docs-story {
+    overflow: auto !important;
+  }
+
+  .sbdocs-wrapper {
+    overflow: auto !important;
+    height: 100% !important;
+  }
+
+  .sbdocs-content {
+    max-width: 1000px;
+    overflow: visible !important;
+    padding: 0 2rem !important;
+    margin: 0 auto !important;
+  }
+
+  /* Fix content padding on large screens */
+  .sbdocs-wrapper .sbdocs-content {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+  }
+
+  @media (min-width: 1200px) {
+    .sbdocs-content {
+      padding: 0 3rem !important;
+    }
+  }
+
+  /* Ensure MDX content scrolls properly */
+  .sb-show-main {
+    overflow: auto !important;
+  }
+
+  #storybook-docs {
+    overflow: auto !important;
+    height: 100% !important;
+  }
+
+  /* Fix table rendering in MDX */
+  .sbdocs table {
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+  }
+
+  .sbdocs th,
+  .sbdocs td {
+    border: 1px solid #e0e0e0;
+    padding: 8px 12px;
+    text-align: left;
+  }
+
+  .sbdocs th {
+    background: #f5f5f5;
+    font-weight: 600;
+  }
+</style>

package/.storybook/preview-head.html

@@ -0,0 +1,48 @@
+<!-- Ionicons -->
+<script type="module" src="https://unpkg.com/ionicons@7.2.1/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.2.1/dist/ionicons/ionicons.js"></script>
+
+<!-- Ionic CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8.4.5/css/ionic.bundle.css" />
+
+<style>
+  /* Base styles for Storybook canvas */
+  body {
+    font-family: var(--ion-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Storybook container padding */
+  .sb-show-main.sb-main-padded {
+    padding: 1rem;
+  }
+
+  /* Ensure Ionic components render correctly */
+  .docs-story {
+    min-height: 100px;
+  }
+
+  /* Fix for ion-button in Storybook */
+  ion-button {
+    --padding-start: 1em;
+    --padding-end: 1em;
+  }
+
+  /* Valtech primary colors */
+  :root {
+    --ion-color-primary: #7026df;
+    --ion-color-primary-rgb: 112, 38, 223;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #6321c4;
+    --ion-color-primary-tint: #7e3ce2;
+
+    --ion-color-secondary: #e2ccff;
+    --ion-color-secondary-rgb: 226, 204, 255;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #c7b4e0;
+    --ion-color-secondary-tint: #e5d1ff;
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,52 @@
+import type { Preview } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+
+const preview: Preview = {
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideHttpClient(),
+        provideAnimations(),
+        provideIonicAngular({ mode: 'ios' }),
+      ],
+    }),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+    options: {
+      storySort: {
+        order: [
+          'Introduction',
+          'Getting Started',
+          'Design Tokens',
+          'Atoms',
+          'Molecules',
+          'Organisms',
+          'Templates',
+          '*',
+        ],
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#1a1a2e' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

package/.storybook/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.lib.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "../src/**/*.spec.ts",
+    "../src/lib/services/firebase/**/*"
+  ],
+  "include": ["../src/**/*", "./**/*"]
+}

package/CLAUDE.md

@@ -0,0 +1,121 @@
+# valtech-components — Contexto
+
+Component library publicada a npm. Atomic design + Ionic 8 + Signals.
+
+## Atomic design
+
+```
+src/lib/components/
+├── atoms/        # Button, Text, Icon, Badge, Spinner (~17)
+├── molecules/    # Card, Input, Select, Toast, Searchbar (~65)
+├── organisms/    # Form, BottomNav, Header, DataTable (~11)
+└── templates/    # Layout, Simple
+```
+
+## Convenciones
+
+- **Selector prefix**: `val-*` (ej: `val-button`, `val-card`).
+- **Standalone components** mandatorio. No NgModules.
+- **Object-first props**: un solo `@Input() props: ComponentMetadata`.
+- **Signal inputs** (`input()`) para componentes nuevos.
+- **i18n obligatorio** para texto visible — `I18nService.t()` + `computed()`.
+- **Tipos**: `*Metadata` (props), `*Event` (emits), `*Config` (content).
+- **Estilos**: SCSS con CSS variables (`--val-*`). Nunca hardcodear colores/spacing.
+
+## Estructura por componente
+
+```
+component-name/
+├── component-name.component.ts        # standalone: true
+├── component-name.component.scss
+├── component-name.stories.ts          # Storybook
+├── types.ts                           # Metadata + Event interfaces
+└── factory.ts                         # createXProps() (opcional)
+```
+
+## Publish workflow
+
+Push a `main` con cambios en `valtech-components/src/**` → workflow `publish-valtech-components.yml`:
+1. Bump version patch
+2. Build prod
+3. Publish a npm
+4. Commit + tag
+
+Manual:
+```bash
+cd frontend/valtech-components
+npm run publish:patch
+```
+
+## Build & verify
+
+```bash
+npm run build:prod
+npm run storybook              # localhost:6006
+```
+
+## Servicios cross-app clave
+
+`src/lib/services/auth/`:
+
+| Servicio | Propósito | Notas |
+|---|---|---|
+| `AuthService` | Sesión, login, refresh, switch-org base | `setExternalAuth()` instala sesión desde tokens externos |
+| `HandoffService` | Cross-app session transfer | `createHandoff()` + `detectAndExchangeHandoff()` en bootstrap |
+| `OrgSwitchService` | Switch de org con teardown opt-in | `switchTo(orgId, { reload })`. `orgChanged$` + `switching` signal |
+| `NotificationActionService` | Click en notif: markRead + switch-org + navigate/handoff | Requiere `ValtechAuthConfig.appId` + `appUrls` |
+| `AuthSyncService` | Multi-tab sync via BroadcastChannel | Auto-wired si `enableTabSync: true` |
+
+`src/lib/services/firebase/`:
+
+| Opción | Propósito |
+|---|---|
+| `CollectionOptions.skipAppPrefix: true` | Bypass `apps/{appId}/` prefix → path global tipo `users/{uid}/notifications` |
+| `ABS_PATH_SENTINEL` | Sentinel interno `__abs__:` para colecciones absolutas |
+
+`src/lib/services/markdown-article/`:
+
+| Símbolo | Propósito |
+|---|---|
+| `parseMarkdownArticle()` | Pure fn — string MD → `ArticleMetadata`. Sin Angular deps, usable desde Node/scripts |
+| `MarkdownArticleParserService` | Wrapper Angular del pure parser |
+| `LegalContentService.load(slug, { locale })` | Carga doc legal. Build-time (factory) si disponible, sino HTTP fallback |
+| `provideLegalContent({ factories })` | Provider — registra factories lazy por locale para modo build-time (solo main site) |
+| `LegalLinkService.resolve(path)` | Cross-app resolver — satellite apps redirigen `/legal/*` al main site. Sin baseUrl → relativo |
+| `provideValtechLegal({ baseUrl?, openInNewTab? })` | Provider — wire LegalLinkService en satellite apps |
+
+**Soporte del parser:** headings (`#`–`######`), párrafos (con `**bold**` y `[links](url)` inline), listas (`-`/`1.`/`- [ ]`), blockquotes + callouts GH (`> [!NOTE|TIP|INFO|IMPORTANT|WARNING|CAUTION]`), code fences (` ``` `), ASCII art (`┌─│` auto-wrap), tablas (flattened a párrafos), separators (`---`). No soporta: imágenes md, HTML crudo, footnotes, nested lists.
+
+**Build-time mode (recomendado)** — `scripts/build-legal.ts` (raíz repo) lee `legal/{locale}/*.md` → emite `legal-content.{locale}.ts` en `src/app/generated/` del consumer. `main.ts`:
+
+```ts
+provideLegalContent({
+  factories: {
+    es: () => import('./app/generated/legal-content.es').then(m => m.LEGAL_CONTENT_ES),
+    en: () => import('./app/generated/legal-content.en').then(m => m.LEGAL_CONTENT_EN),
+    pt: () => import('./app/generated/legal-content.pt').then(m => m.LEGAL_CONTENT_PT),
+  },
+}),
+```
+
+Cada locale code-split → solo bundle del idioma activo se carga.
+
+**Runtime mode (fallback)** — sin provider: `LegalContentService.load` cae a HTTP fetch de `/assets/legal/{locale}/{slug}.md` + parse en cliente.
+
+Consumo en page (idéntico en ambos modos):
+```ts
+const legal = inject(LegalContentService);
+const locale = inject(LocaleService);
+
+legal.load('terms', { locale: locale.lang })
+  .subscribe(article => this.article.set(article));
+// template: @if (article(); as a) { <val-article [props]="a" /> }
+```
+
+Para contribuir docs legales: ver `legal/CLAUDE.md` (raíz repo).
+
+**Patrón handoff bootstrap** y **patrón org-switch reload-vs-opt-in** documentados en `frontend/CLAUDE.md`.
+
+## Skill
+
+`angular-conventions` — convenciones detalladas + checklist nuevo componente.

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", "prismjs", "qr-code-styling", "swiper"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.794",
+  "version": "2.0.795",
   "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,52 @@
     "swiper": "^11.2.8",
     "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/architect": "^0.1802.21",
+    "@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",
+    "rxjs": "~7.8.0",
+    "storybook": "8.6.15",
+    "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"

package/scripts/update-apps.sh

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