valtech-components 2.0.795 → 2.0.796

package/.storybook/preview.ts

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

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

package/CLAUDE.md

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

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

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}"

package/src/lib/components/atoms/avatar/avatar.component.scss

@@ -1,31 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.box {
-  --border-radius: pxToRem(4);
-}
-
-.small {
-  width: pxToRem(28);
-  height: pxToRem(28);
-}
-
-.medium {
-  width: pxToRem(38);
-  height: pxToRem(38);
-}
-
-.large {
-  width: pxToRem(48);
-  height: pxToRem(48);
-}
-
-// Estilo Grayscale
-.grayscale {
-  img {
-    filter: grayscale(100%); // Aplica el filtro de blanco y negro a la imagen
-  }
-
-  &:hover img {
-    filter: grayscale(0%); // Al hacer hover, elimina el filtro volviendo al color original
-  }
-}

package/src/lib/components/atoms/avatar/avatar.component.ts

@@ -1,95 +0,0 @@
-import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { IonAvatar } from '@ionic/angular/standalone';
-import { PresetService } from '../../../services/presets';
-import { AvatarMetadata } from './types';
-
-@Component({
-  selector: 'val-avatar',
-  standalone: true,
-  imports: [IonAvatar],
-  template: `
-    <ion-avatar
-      aria-hidden="true"
-      [class]="resolvedProps.size"
-      [class.box]="resolvedProps.box"
-      [class.grayscale]="resolvedProps.grayscale"
-      (click)="onClickHandler()"
-    >
-      <img alt="profile image" [src]="resolvedProps.image || resolvedProps.default" />
-    </ion-avatar>
-  `,
-  styleUrls: ['./avatar.component.scss'],
-})
-/**
- * val-avatar
- *
- * Displays a user or profile image, optionally with a box style and different sizes.
- * Supports presets for reusable configurations.
- *
- * @example With preset (recommended):
- * <val-avatar preset="profile" [props]="{ image: 'url' }" (onClick)="handler()"></val-avatar>
- *
- * @example Static (backwards compatible):
- * <val-avatar [props]="{ image: 'url', size: 'medium', box: true }" (onClick)="handler()"></val-avatar>
- *
- * @input preset: string - Name of preset to apply
- * @input props: AvatarMetadata - Configuration for the avatar (image, size, box, default image)
- * @output onClick - Emits when the avatar is clicked
- */
-export class AvatarComponent implements OnInit, OnChanges {
-  private presets = inject(PresetService);
-
-  /**
-   * Preset name to apply. Presets define reusable avatar configurations
-   * that can be registered at app level via provideValtechPresets().
-   *
-   * @example
-   * <val-avatar preset="profile" [props]="{ image: 'url' }"></val-avatar>
-   */
-  @Input() preset?: string;
-
-  /**
-   * Avatar configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<AvatarMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: AvatarMetadata = {} as AvatarMetadata;
-
-  /**
-   * Event emitted when the avatar is clicked.
-   */
-  @Output()
-  onClick = new EventEmitter();
-
-  ngOnInit() {
-    this.resolveProps();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['preset'] || changes['props']) {
-      this.resolveProps();
-    }
-  }
-
-  /**
-   * Merge preset configuration with explicit props.
-   * Explicit props take precedence over preset values.
-   */
-  private resolveProps(): void {
-    const presetProps = this.preset
-      ? (this.presets.get('avatar', this.preset) as Partial<AvatarMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as AvatarMetadata;
-  }
-
-  onClickHandler() {
-    this.onClick.emit();
-  }
-}