valtech-components 2.0.795 → 2.0.797

package/src/lib/components/atoms/image/types.ts

@@ -1,37 +0,0 @@
-/**
- * Props for val-image component.
- *
- * @property src - The image source URL.
- * @property alt - The alt text for the image.
- * @property mode - The display mode ('rounded' | 'circular' | 'box').
- * @property shaded - Whether the image has a shaded effect.
- * @property bordered - Whether the image has a border.
- * @property limited - Whether the image is limited in size (optional).
- * @property dark - Whether the image uses a dark style (optional).
- * @property size - The image size ('small' | 'medium' | 'large' | 'xlarge').
- * @property width - The image width in px (optional).
- * @property height - The image height in px (optional).
- * @property alignment - The alignment of the image container ('left' | 'center' | 'right').
- * @property caption - Optional caption text below the image.
- * @property captionSize - Size of the caption text ('small' | 'medium' | 'large').
- * @property containerClass - Additional CSS classes for the container.
- * @property previewMode - Enable full-screen preview with zoom capabilities (optional).
- */
-export type ImageMetadata = {
-  src: string;
-  alt: string;
-  mode: 'rounded' | 'circular' | 'box';
-  shaded: boolean;
-  bordered: boolean;
-  limited?: boolean;
-  dark?: boolean;
-  size: 'small' | 'medium' | 'large' | 'xlarge';
-  width?: number;
-  height?: number;
-  alignment?: 'left' | 'center' | 'right';
-  caption?: string;
-  captionSize?: 'small' | 'medium' | 'large';
-  containerClass?: string;
-  flex?: boolean; // Optional property to control flex display
-  previewMode?: boolean; // Enable full-screen image preview with zoom
-};

package/src/lib/components/atoms/pattern/motifs.ts

@@ -1,205 +0,0 @@
-/**
- * Valtech Pattern System — motifs + palettes.
- *
- * Pure data + helpers, sin dependencias Angular. Reusable desde Node/scripts
- * (e.g., generate static thumbnails) o desde el componente `val-pattern`.
- *
- * Original spec: `assets/Valtech Pattern System.html` (single-page demo).
- * Cada motif es función `(fill: string) => string` que devuelve SVG inner
- * markup. Tile es 100×100 unidades; el motif se renderiza dentro de un `<g
- * transform="translate(col*100 row*100)">` con un `<rect width=100 height=100
- * fill=bg/>` de fondo.
- */
-
-export type PatternMotifKey =
-  | 'chev-r'
-  | 'chev-l'
-  | 'chev-d'
-  | 'chev-u'
-  | 'tri-tl'
-  | 'tri-tr'
-  | 'tri-bl'
-  | 'tri-br'
-  | 'solid'
-  | 'diamond'
-  | 'small-r'
-  | 'small-l'
-  | 'arrow-r'
-  | 'arrow-l'
-  | 'house-d'
-  | 'half-l'
-  | 'half-t';
-
-/**
- * Chevrons stroke-based con linecap/linejoin redondos — visualmente coherente
- * con el símbolo de marca Valtech (`>_`). Stroke-width 18 (default), 12 para
- * variants `small-*`.
- */
-const CHEV_STROKE = 18;
-const CHEV_SMALL_STROKE = 12;
-const chevStyle = (f: string, w: number = CHEV_STROKE) =>
-  `stroke="${f}" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round" fill="none"`;
-
-export const PATTERN_MOTIFS: Record<PatternMotifKey, (fg: string) => string> = {
-  'chev-r': f => `<path d="M22 18 L72 50 L22 82" ${chevStyle(f)}/>`,
-  'chev-l': f => `<path d="M78 18 L28 50 L78 82" ${chevStyle(f)}/>`,
-  'chev-d': f => `<path d="M18 22 L50 72 L82 22" ${chevStyle(f)}/>`,
-  'chev-u': f => `<path d="M18 78 L50 28 L82 78" ${chevStyle(f)}/>`,
-  'tri-tl': f => `<polygon points="0,0 100,0 0,100" fill="${f}"/>`,
-  'tri-tr': f => `<polygon points="0,0 100,0 100,100" fill="${f}"/>`,
-  'tri-bl': f => `<polygon points="0,0 100,100 0,100" fill="${f}"/>`,
-  'tri-br': f => `<polygon points="100,0 100,100 0,100" fill="${f}"/>`,
-  solid: () => ``,
-  diamond: f => `<polygon points="50,12 88,50 50,88 12,50" fill="${f}"/>`,
-  'small-r': f => `<path d="M38 32 L62 50 L38 68" ${chevStyle(f, CHEV_SMALL_STROKE)}/>`,
-  'small-l': f => `<path d="M62 32 L38 50 L62 68" ${chevStyle(f, CHEV_SMALL_STROKE)}/>`,
-  'arrow-r': f => `<path d="M10 42 L60 42 L60 28 L92 50 L60 72 L60 58 L10 58 Z" fill="${f}"/>`,
-  'arrow-l': f => `<path d="M90 42 L40 42 L40 28 L8 50 L40 72 L40 58 L90 58 Z" fill="${f}"/>`,
-  'house-d': f =>
-    `<polygon points="50,20 88,50 12,50" fill="${f}"/><rect x="28" y="50" width="44" height="32" fill="${f}"/>`,
-  'half-l': f => `<rect x="0" y="0" width="50" height="100" fill="${f}"/>`,
-  'half-t': f => `<rect x="0" y="0" width="100" height="50" fill="${f}"/>`,
-};
-
-export const MOTIF_KEYS: PatternMotifKey[] = Object.keys(PATTERN_MOTIFS) as PatternMotifKey[];
-
-/** Chevron family — orientations + size variants + arrows. */
-export const CHEV_KEYS: PatternMotifKey[] = [
-  'chev-r',
-  'chev-l',
-  'chev-d',
-  'chev-u',
-  'small-r',
-  'small-l',
-  'arrow-r',
-  'arrow-l',
-];
-
-/** Triangle / half-fill family. */
-export const TRI_KEYS: PatternMotifKey[] = [
-  'tri-tl',
-  'tri-tr',
-  'tri-bl',
-  'tri-br',
-  'half-l',
-  'half-t',
-  'house-d',
-];
-
-/** Center shape family (currently solo diamond). */
-export const SHAPE_KEYS: PatternMotifKey[] = ['diamond'];
-
-/** No-foreground tiles — solo el rect de fondo. */
-export const SOLID_KEYS: PatternMotifKey[] = ['solid'];
-
-/** Built-in palettes — dark → light (8 colors). */
-export type PatternPaletteKey = 'purple' | 'ink' | 'lavender';
-
-export const PATTERN_PALETTES: Record<PatternPaletteKey, string[]> = {
-  purple: ['#0e0420', '#2a1158', '#4a1d96', '#7026df', '#9156e8', '#b48eea', '#d9c3f5', '#ebdcfd'],
-  ink: ['#000000', '#0a0f1c', '#1a2235', '#2d3a55', '#4a5878', '#7d8aa5', '#b8c1d4', '#e4e8f0'],
-  lavender: [
-    '#1a0e3a',
-    '#2e1755',
-    '#5a3aa0',
-    '#7e5dc6',
-    '#a18bd9',
-    '#c4a8f0',
-    '#dccef5',
-    '#f0e6fc',
-  ],
-};
-
-/**
- * Mulberry32 seeded RNG — devuelve función `()=>[0,1)`.
- * Deterministic: mismo seed → misma secuencia. Útil para patrones reproducibles.
- */
-export function mulberry32(seed: number): () => number {
-  return function () {
-    seed = (seed + 0x6d2b79f5) >>> 0;
-    let t = seed;
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-/**
- * Densidad de chevrons (0..1). El resto se reparte entre solid (20%), shape
- * (15%) y tri (resto), proporcional al gap left después del threshold.
- */
-export interface PatternGenConfig {
-  cols: number;
-  rows: number;
-  seed: number;
-  palette: string[];
-  chevronDensity?: number;
-}
-
-export interface PatternTile {
-  motif: PatternMotifKey;
-  bg: string;
-  fg: string;
-}
-
-/**
- * Genera UN tile con motif/bg/fg respetando densidades + contraste.
- * Caller pasa rng (Math.random o seeded) — útil para reshuffle individual de
- * tiles en `val-pattern` sin regenerar la grid completa.
- */
-export function generateRandomTile(
-  palette: string[],
-  chevronDensity = 0.55,
-  rng: () => number = Math.random
-): PatternTile {
-  const roll = rng();
-  let key: PatternMotifKey;
-  if (roll < chevronDensity) key = CHEV_KEYS[Math.floor(rng() * CHEV_KEYS.length)]!;
-  else if (roll < chevronDensity + 0.2) key = SOLID_KEYS[Math.floor(rng() * SOLID_KEYS.length)]!;
-  else if (roll < chevronDensity + 0.35) key = SHAPE_KEYS[Math.floor(rng() * SHAPE_KEYS.length)]!;
-  else key = TRI_KEYS[Math.floor(rng() * TRI_KEYS.length)]!;
-
-  const bgIdx = Math.floor(rng() * palette.length);
-  let fgIdx = Math.floor(rng() * palette.length);
-  let tries = 0;
-  while (Math.abs(fgIdx - bgIdx) < 3 && tries < 6) {
-    fgIdx = Math.floor(rng() * palette.length);
-    tries++;
-  }
-  return { motif: key, bg: palette[bgIdx]!, fg: palette[fgIdx]! };
-}
-
-/** Genera matriz de tiles aplicando densidades + reglas de contraste. */
-export function generatePatternTiles(cfg: PatternGenConfig): PatternTile[] {
-  const { cols, rows, seed, palette } = cfg;
-  const chevronDensity = cfg.chevronDensity ?? 0.55;
-  const r = mulberry32(seed);
-  const tiles: PatternTile[] = [];
-  for (let i = 0; i < cols * rows; i++) {
-    tiles.push(generateRandomTile(palette, chevronDensity, r));
-  }
-  return tiles;
-}
-
-/**
- * Renderiza el inner SVG (sin el `<svg>` root) para una matriz de tiles.
- * Caller wraps en `<svg viewBox="0 0 {cols*100} {rows*100}" preserveAspectRatio="xMidYMid slice">`.
- */
-export function renderPatternSvgInner(
-  tiles: PatternTile[],
-  cols: number,
-  baseColor: string
-): string {
-  const W = cols * 100;
-  const rows = Math.ceil(tiles.length / cols);
-  const H = rows * 100;
-  let inner = `<rect width="${W}" height="${H}" fill="${baseColor}"/>`;
-  for (let i = 0; i < tiles.length; i++) {
-    const c = i % cols;
-    const r = Math.floor(i / cols);
-    const t = tiles[i]!;
-    const shape = PATTERN_MOTIFS[t.motif](t.fg);
-    inner += `<g transform="translate(${c * 100} ${r * 100})"><rect width="100" height="100" fill="${t.bg}"/>${shape}</g>`;
-  }
-  return inner;
-}

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

@@ -1,216 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, computed, effect, Input, OnDestroy, signal } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { inject } from '@angular/core';
-import {
-  generatePatternTiles,
-  generateRandomTile,
-  PATTERN_PALETTES,
-  PatternPaletteKey,
-  PatternTile,
-  renderPatternSvgInner,
-} from './motifs';
-import { PatternMetadata } from './types';
-
-/**
- * `val-pattern`
- *
- * Componente de fondo geométrico inspirado en el sistema Valtech. Renderiza un
- * grid de tiles 100×100 con motifs (chevrons, triangles, diamonds, arrows) en
- * un SVG inline. Determinista vía `seed` o animado vía `reshuffle`.
- *
- * Cero dependencias externas — todo SVG.
- *
- * @example Como fondo de card (CSS absolute):
- * ```scss
- * .card { position: relative; overflow: hidden; }
- * .card val-pattern { position: absolute; inset: 0; z-index: 0; opacity: 0.4; }
- * .card .content { position: relative; z-index: 1; }
- * ```
- *
- * ```html
- * <div class="card">
- *   <val-pattern [props]="{ palette: 'purple', cols: 6, rows: 3, seed: 42 }" />
- *   <div class="content">Tu contenido aquí</div>
- * </div>
- * ```
- *
- * @example Como background animado (hero/login):
- * ```html
- * <val-pattern [props]="{ palette: 'lavender', cols: 16, rows: 8, animated: true }" />
- * ```
- */
-@Component({
-  selector: 'val-pattern',
-  standalone: true,
-  imports: [CommonModule],
-  template: ` <div class="val-pattern" [innerHTML]="svgHtml()"></div> `,
-  styles: [
-    `
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        line-height: 0;
-        position: relative;
-      }
-
-      .val-pattern {
-        position: absolute;
-        inset: 0;
-        display: block;
-        transition: opacity 0.6s ease-in-out;
-      }
-
-      /* Specificity 0,2,0 — beats UA defaults para SVG. Width/height fuerzan
-       * fill del container. preserveAspectRatio="slice" en el viewBox hace el
-       * crop/cover. Sin esto, el SVG cae a su intrinsic aspect ratio del
-       * viewBox y deja franjas cuando el container no matchea (ej. mobile
-       * con cols/rows wide-aspect). */
-      .val-pattern svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    `,
-  ],
-})
-export class PatternComponent implements OnDestroy {
-  private sanitizer = inject(DomSanitizer);
-
-  private readonly cols = signal(12);
-  private readonly rows = signal(4);
-  private readonly seed = signal(this.randomSeed());
-  private readonly paletteRef = signal<string[]>(PATTERN_PALETTES.purple);
-  private readonly chevronDensity = signal(0.55);
-  private readonly preserveAspect = signal<'slice' | 'meet'>('slice');
-  private readonly animated = signal(false);
-  /** ms entre reshuffles (modo animated). Default 8000ms — "de vez en cuando". */
-  private readonly reshuffleInterval = signal(8000);
-  /** Tiles a cambiar por tick. 0 → reseed grid completo (default). >0 → staggered. */
-  private readonly tilesPerTick = signal(0);
-
-  private timer?: ReturnType<typeof setInterval>;
-
-  /** Object-first input. Cambios disparan re-render por signals. */
-  @Input() set props(value: PatternMetadata | undefined) {
-    if (!value) return;
-    if (value.cols !== undefined) this.cols.set(Math.max(1, value.cols));
-    if (value.rows !== undefined) this.rows.set(Math.max(1, value.rows));
-    if (value.seed !== undefined) this.seed.set(value.seed);
-    if (value.chevronDensity !== undefined) {
-      this.chevronDensity.set(Math.min(1, Math.max(0, value.chevronDensity)));
-    }
-    if (value.preserveAspect !== undefined) this.preserveAspect.set(value.preserveAspect);
-    if (value.palette !== undefined) {
-      this.paletteRef.set(this.resolvePalette(value.palette));
-    }
-    if (value.reshuffleInterval !== undefined && value.reshuffleInterval > 0) {
-      this.reshuffleInterval.set(value.reshuffleInterval);
-    }
-    if (value.tilesPerTick !== undefined && value.tilesPerTick >= 0) {
-      this.tilesPerTick.set(Math.floor(value.tilesPerTick));
-    }
-    if (value.animated !== undefined) this.animated.set(!!value.animated);
-  }
-
-  /**
-   * Tiles signal — mutable. Se regenera completa cuando cambia seed/cols/rows/
-   * palette/density. En modo animated, tiles individuales se sobrescriben sin
-   * tocar el resto (efecto staggered).
-   */
-  private readonly tiles = signal<PatternTile[]>([]);
-
-  /** SVG completo como string sanitized para `[innerHTML]`. */
-  readonly svgHtml = computed<SafeHtml>(() => {
-    const cols = this.cols();
-    const rows = this.rows();
-    const palette = this.paletteRef();
-    const inner = renderPatternSvgInner(this.tiles(), cols, palette[0]!);
-    const aspect = this.preserveAspect() === 'meet' ? 'xMidYMid meet' : 'xMidYMid slice';
-    // width/height="100%" como ATRIBUTOS (no solo CSS) — algunos browsers
-    // (Safari/iOS) ignoran CSS height en SVG sin atributos y caen al intrinsic
-    // aspect del viewBox, dejando franjas vacías cuando el container no
-    // matchea el ratio.
-    const svg = `<svg width="100%" height="100%" viewBox="0 0 ${cols * 100} ${rows * 100}" preserveAspectRatio="${aspect}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="display:block;">${inner}</svg>`;
-    return this.sanitizer.bypassSecurityTrustHtml(svg);
-  });
-
-  constructor() {
-    // Regenera grid completa cuando cambian props estructurales (cols/rows/
-    // palette/density/seed). El seed solo cambia explícitamente via props o
-    // mount inicial — NO se muta en modo animated.
-    // `allowSignalWrites: true` requerido en Angular 18: escribimos a `tiles`
-    // signal dentro del effect (consumido por svgHtml computed).
-    effect(
-      () => {
-        const cols = this.cols();
-        const rows = this.rows();
-        const seed = this.seed();
-        const palette = this.paletteRef();
-        const density = this.chevronDensity();
-        this.tiles.set(generatePatternTiles({ cols, rows, seed, palette, chevronDensity: density }));
-      },
-      { allowSignalWrites: true }
-    );
-
-    // Modo animated: cada `reshuffleInterval` ms regenera el grid completo
-    // con un seed nuevo. Visualmente: el patrón cambia de vez en cuando.
-    // Si `tilesPerTick > 0` y < total tiles, hace staggered (reemplaza solo
-    // N tiles en vez de toda la grid). Default tilesPerTick=0 → reseed total.
-    effect(onCleanup => {
-      const isAnimated = this.animated();
-      const interval = this.reshuffleInterval();
-      const perTick = this.tilesPerTick();
-      if (this.timer) clearInterval(this.timer);
-      this.timer = undefined;
-      if (!isAnimated) return;
-      this.timer = setInterval(() => {
-        if (perTick > 0) {
-          this.mutateRandomTiles(perTick);
-        } else {
-          this.seed.set(this.randomSeed());
-        }
-      }, interval);
-      onCleanup(() => {
-        if (this.timer) {
-          clearInterval(this.timer);
-          this.timer = undefined;
-        }
-      });
-    });
-  }
-
-  /**
-   * Reemplaza `count` tiles random del grid actual con tiles nuevos generados.
-   * Usado para staggered reshuffle (opt-in via `tilesPerTick > 0`).
-   */
-  private mutateRandomTiles(count: number): void {
-    const current = this.tiles();
-    if (current.length === 0) return;
-    const next = [...current];
-    const palette = this.paletteRef();
-    const density = this.chevronDensity();
-    for (let n = 0; n < count; n++) {
-      const idx = Math.floor(Math.random() * next.length);
-      next[idx] = generateRandomTile(palette, density);
-    }
-    this.tiles.set(next);
-  }
-
-  ngOnDestroy(): void {
-    if (this.timer) clearInterval(this.timer);
-  }
-
-  private resolvePalette(p: PatternPaletteKey | string[]): string[] {
-    if (Array.isArray(p)) {
-      // Acepta arrays de cualquier longitud ≥2; tile contrast logic usa índices.
-      return p.length >= 2 ? p : PATTERN_PALETTES.purple;
-    }
-    return PATTERN_PALETTES[p] ?? PATTERN_PALETTES.purple;
-  }
-
-  private randomSeed(): number {
-    return Math.floor(Math.random() * 1_000_000);
-  }
-}

package/src/lib/components/atoms/pattern/types.ts

@@ -1,70 +0,0 @@
-import { PatternPaletteKey } from './motifs';
-
-/**
- * Configuración del componente `val-pattern`.
- *
- * @example Static (seed fijo, reproducible):
- * ```html
- * <val-pattern [props]="{ palette: 'purple', cols: 12, rows: 4, seed: 42 }" />
- * ```
- *
- * @example Animated whole-grid reshuffle (cada 8s — default):
- * ```html
- * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
- * ```
- *
- * @example Animated staggered (2 tiles cada 800ms — sutil):
- * ```html
- * <val-pattern [props]="{ animated: true, reshuffleInterval: 800, tilesPerTick: 2 }" />
- * ```
- */
-export interface PatternMetadata {
-  /**
-   * Palette built-in (`'purple' | 'ink' | 'lavender'`) o array custom de 8
-   * colores dark → light. Default: `'purple'`.
-   */
-  palette?: PatternPaletteKey | string[];
-
-  /** Columnas del grid. Default: 12. */
-  cols?: number;
-
-  /** Filas del grid. Default: 4. */
-  rows?: number;
-
-  /**
-   * Seed para Mulberry32 — determina el patrón. Si no se pasa, genera uno random
-   * al mount y queda fijo (a menos que `animated: true`).
-   */
-  seed?: number;
-
-  /**
-   * Densidad de chevrons (0..1). El resto se reparte entre solid/shape/tri.
-   * Default: `0.55`.
-   */
-  chevronDensity?: number;
-
-  /**
-   * Si `true`, el patrón hace **staggered reshuffle**: cada `reshuffleInterval`
-   * ms se reemplazan `tilesPerTick` tiles random — NO la grid entera.
-   * Default: `false`.
-   */
-  animated?: boolean;
-
-  /**
-   * ms entre updates individuales de tiles (modo animated).
-   * Default: `1200` (~1 tile cada 1.2s con `tilesPerTick: 1`).
-   */
-  reshuffleInterval?: number;
-
-  /**
-   * Cuántos tiles cambiar por tick (modo animated). Default: `1` (cambio sutil).
-   * Subir a 2-4 para efecto más vivo.
-   */
-  tilesPerTick?: number;
-
-  /**
-   * `slice` (default) — el patrón cubre todo el contenedor manteniendo aspect,
-   * cropeando si necesario. `meet` — fit completo sin crop, deja espacio.
-   */
-  preserveAspect?: 'slice' | 'meet';
-}