valtech-components 2.0.772 → 2.0.773

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

@@ -0,0 +1,54 @@
+/**
+ * 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';
+export declare const PATTERN_MOTIFS: Record<PatternMotifKey, (fg: string) => string>;
+export declare const MOTIF_KEYS: PatternMotifKey[];
+/** Chevron family — orientations + size variants + arrows. */
+export declare const CHEV_KEYS: PatternMotifKey[];
+/** Triangle / half-fill family. */
+export declare const TRI_KEYS: PatternMotifKey[];
+/** Center shape family (currently solo diamond). */
+export declare const SHAPE_KEYS: PatternMotifKey[];
+/** No-foreground tiles — solo el rect de fondo. */
+export declare const SOLID_KEYS: PatternMotifKey[];
+/** Built-in palettes — dark → light (8 colors). */
+export type PatternPaletteKey = 'purple' | 'ink' | 'lavender';
+export declare const PATTERN_PALETTES: Record<PatternPaletteKey, string[]>;
+/**
+ * Mulberry32 seeded RNG — devuelve función `()=>[0,1)`.
+ * Deterministic: mismo seed → misma secuencia. Útil para patrones reproducibles.
+ */
+export declare function mulberry32(seed: number): () => number;
+/**
+ * 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 matriz de tiles aplicando densidades + reglas de contraste. */
+export declare function generatePatternTiles(cfg: PatternGenConfig): PatternTile[];
+/**
+ * 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 declare function renderPatternSvgInner(tiles: PatternTile[], cols: number, baseColor: string): string;

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

@@ -0,0 +1,56 @@
+import { OnDestroy } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { PatternMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `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 }" />
+ * ```
+ */
+export declare class PatternComponent implements OnDestroy {
+    private sanitizer;
+    private readonly cols;
+    private readonly rows;
+    private readonly seed;
+    private readonly paletteRef;
+    private readonly chevronDensity;
+    private readonly preserveAspect;
+    private readonly animated;
+    private readonly reshuffleInterval;
+    private timer?;
+    /** Object-first input. Cambios disparan re-render por signals. */
+    set props(value: PatternMetadata | undefined);
+    /** Tiles computed — se regenera cuando cambia seed/cols/rows/palette/density. */
+    private readonly tiles;
+    /** SVG completo como string sanitized para `[innerHTML]`. */
+    readonly svgHtml: import("@angular/core").Signal<SafeHtml>;
+    constructor();
+    ngOnDestroy(): void;
+    private resolvePalette;
+    private randomSeed;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PatternComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PatternComponent, "val-pattern", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,47 @@
+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 (reshuffle cada 8s):
+ * ```html
+ * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
+ * ```
+ */
+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 se reshuffles automáticamente con fade entre seeds.
+     * Default: `false`.
+     */
+    animated?: boolean;
+    /** Intervalo en ms entre reshuffles (solo si `animated: true`). Default: `8000`. */
+    reshuffleInterval?: 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';
+}

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.772";
+export declare const VERSION = "2.0.773";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.772",
+  "version": "2.0.773",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -41,6 +41,9 @@ export * from './lib/components/atoms/horizontal-scroll/horizontal-scroll.compon
 export * from './lib/components/atoms/horizontal-scroll/types';
 export * from './lib/components/atoms/rights-footer/rights-footer.component';
 export * from './lib/components/atoms/rights-footer/types';
+export * from './lib/components/atoms/pattern/pattern.component';
+export * from './lib/components/atoms/pattern/types';
+export * from './lib/components/atoms/pattern/motifs';
 export * from './lib/components/molecules/alert-box/alert-box.component';
 export * from './lib/components/molecules/alert-box/types';
 export * from './lib/components/molecules/button-group/button-group.component';