valtech-components 2.0.821 → 2.0.824

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

@@ -0,0 +1,43 @@
+import { GlassMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-glass`
+ *
+ * Capa **glassmorphism** reusable. Frosted glass overlay con backdrop blur,
+ * tint semi-translúcido, border sutil y shadow. Acepta cualquier contenido via
+ * `<ng-content>` — desde un texto a un card entero.
+ *
+ * Ideal sobre backgrounds decorativos (val-pattern, gradients, imágenes) para
+ * mejorar legibilidad del contenido sin tapar la decoración.
+ *
+ * @example Pill sobre patrón:
+ * ```html
+ * <val-glass><h1>Buenos días</h1></val-glass>
+ * ```
+ *
+ * @example Card glass (block) con auto tint:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', display: 'block', radius: '20px', padding: '24px' }">
+ *   <p>Contenido del card</p>
+ * </val-glass>
+ * ```
+ */
+export declare class GlassComponent {
+    private readonly props_;
+    set props(value: GlassMetadata | undefined);
+    /** Snapshot reactivo de los props con defaults aplicados. */
+    readonly resolvedProps: import("@angular/core").Signal<GlassMetadata>;
+    /**
+     * Resuelve el background según `tint` + `tintAlpha`.
+     * - `'dark'` → rgba purple-dark
+     * - `'light'` → rgba blanco
+     * - `'auto'` → CSS var con fallback (resolved vía media/class del tema)
+     * - custom string → usado tal cual
+     */
+    readonly bgStyle: import("@angular/core").Signal<string>;
+    readonly filterStyle: import("@angular/core").Signal<string>;
+    readonly borderStyle: import("@angular/core").Signal<"none" | "1px solid rgba(0, 0, 0, 0.08)" | "1px solid rgba(255, 255, 255, 0.08)">;
+    readonly shadowStyle: import("@angular/core").Signal<"none" | "0 2px 8px rgba(0, 0, 0, 0.15)" | "0 12px 40px rgba(0, 0, 0, 0.35)" | "0 4px 24px rgba(0, 0, 0, 0.25)">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlassComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlassComponent, "val-glass", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,70 @@
+/**
+ * Configuración del componente `val-glass`.
+ *
+ * Capa glassmorphism (frosted glass) — backdrop blur + tint semi-translúcido +
+ * border sutil + shadow. Diseñada para usarse SOBRE backgrounds decorativos
+ * (patterns, gradients, hero images) para mejorar legibilidad del contenido
+ * sin tapar la decoración.
+ *
+ * @example Pill sobre patrón (greeting hero):
+ * ```html
+ * <val-glass>
+ *   <h1>Buenos días, Juan</h1>
+ * </val-glass>
+ * ```
+ *
+ * @example Card glass auto-tint según tema:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', radius: '20px', padding: '24px', display: 'block' }">
+ *   <p>Contenido</p>
+ * </val-glass>
+ * ```
+ *
+ * @example Light glass sobre dark bg:
+ * ```html
+ * <val-glass [props]="{ tint: 'light', tintAlpha: 0.15, blur: 16 }">
+ *   ...
+ * </val-glass>
+ * ```
+ */
+export interface GlassMetadata {
+    /**
+     * Tint del fondo. Built-in:
+     * - `'dark'` (default) — `rgba(14, 4, 32, alpha)` — combina con palette Valtech purple
+     * - `'light'` — `rgba(255, 255, 255, alpha)` — para usar sobre dark bg
+     * - `'auto'` — switch por tema activo (`body.dark` → dark, sino light)
+     *
+     * También acepta una string CSS color custom (`rgba(...)`, `hsl(...)`, hex).
+     * Si pasas custom, `tintAlpha` se ignora.
+     */
+    tint?: 'dark' | 'light' | 'auto' | string;
+    /** Alpha del tint (0..1). Default `0.55`. Ignorado si `tint` es custom string. */
+    tintAlpha?: number;
+    /** Blur radius en px. Default `10`. Subir a 16-24 para más frosting. */
+    blur?: number;
+    /** Saturate filter % (acompañando blur). Default `140`. */
+    saturate?: number;
+    /** Border radius. Cualquier CSS length. Default `'14px'`. */
+    radius?: string;
+    /** Padding interno. CSS shorthand. Default `'10px 18px'`. */
+    padding?: string;
+    /** Mostrar border sutil (1px rgba blanco). Default `true`. */
+    border?: boolean;
+    /**
+     * Elevación de shadow:
+     * - `'none'` — sin shadow
+     * - `'sm'` — `0 2px 8px rgba(0,0,0,0.15)`
+     * - `'md'` (default) — `0 4px 24px rgba(0,0,0,0.25)`
+     * - `'lg'` — `0 12px 40px rgba(0,0,0,0.35)`
+     */
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Display mode:
+     * - `'inline-block'` (default) — fit-content, ideal para pills/badges
+     * - `'block'` — fill parent width, ideal para cards
+     * - `'flex'` — flex column, ideal para layouts internos
+     */
+    display?: 'inline-block' | 'block' | 'flex';
+    /** Clase CSS extra. */
+    cssClass?: string;
+}

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

@@ -0,0 +1,42 @@
+import { GlowIntensity, GlowMetadata, GlowPosition, GlowShape, GlowSize } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-glow` — wrapper that paints a colored radial or linear gradient behind its
+ * projected content. Uses Ionic color tokens, so it respects light/dark theme.
+ *
+ * @example
+ * <val-glow [props]="{ color: 'primary', position: 'top', size: 'large' }">
+ *   <h1>Hero title</h1>
+ *   <p>Body copy...</p>
+ * </val-glow>
+ *
+ * @example Two-tone radial
+ * <val-glow [props]="{ color: 'primary', secondaryColor: 'tertiary', position: 'center' }">
+ *   ...
+ * </val-glow>
+ *
+ * @example Linear sweep from top
+ * <val-glow [props]="{ color: 'success', shape: 'linear', position: 'top', intensity: 'strong' }">
+ *   ...
+ * </val-glow>
+ */
+export declare class GlowComponent {
+    props: import("@angular/core").InputSignal<GlowMetadata>;
+    protected color: import("@angular/core").Signal<import("@ionic/core").Color>;
+    protected secondaryColor: import("@angular/core").Signal<import("@ionic/core").Color>;
+    protected hasSecondary: import("@angular/core").Signal<boolean>;
+    protected position: import("@angular/core").Signal<GlowPosition>;
+    protected size: import("@angular/core").Signal<GlowSize>;
+    protected intensity: import("@angular/core").Signal<GlowIntensity>;
+    protected shape: import("@angular/core").Signal<GlowShape>;
+    protected animated: import("@angular/core").Signal<boolean>;
+    protected blendMode: import("@angular/core").Signal<"normal" | "multiply" | "screen" | "overlay" | "soft-light" | "hard-light" | "color-dodge">;
+    protected colorRgbVar: import("@angular/core").Signal<string>;
+    protected secondaryColorRgbVar: import("@angular/core").Signal<string>;
+    protected positionCss: import("@angular/core").Signal<string>;
+    protected sizeCss: import("@angular/core").Signal<string>;
+    protected intensityValue: import("@angular/core").Signal<string>;
+    protected angleCss: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlowComponent, "val-glow", never, { "props": { "alias": "props"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,40 @@
+import { Color } from '@ionic/core';
+/**
+ * Origin point of the glow.
+ * Maps to a CSS background-position value.
+ */
+export type GlowPosition = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+/** Radius preset of the glow halo. */
+export type GlowSize = 'small' | 'medium' | 'large' | 'xlarge';
+/** Alpha multiplier applied to the glow color(s). */
+export type GlowIntensity = 'subtle' | 'medium' | 'strong';
+/**
+ * Gradient shape:
+ * - `radial` — circular halo at `position` (default; matches the showcase / AWS look)
+ * - `linear` — directional sweep from `position` outwards (good for full-band backdrops)
+ */
+export type GlowShape = 'radial' | 'linear';
+/**
+ * Configuration for `val-glow`.
+ */
+export interface GlowMetadata {
+    /** Primary Ionic color of the glow. Default `'primary'`. */
+    color?: Color;
+    /**
+     * Optional second Ionic color for two-tone gradients. When set, the gradient
+     * blends `color` → `secondaryColor` → transparent.
+     */
+    secondaryColor?: Color;
+    /** Where the halo originates. Default `'center'`. */
+    position?: GlowPosition;
+    /** Halo radius preset. Default `'large'`. */
+    size?: GlowSize;
+    /** Opacity preset of the color stops. Default `'medium'`. */
+    intensity?: GlowIntensity;
+    /** Gradient shape. Default `'radial'`. */
+    shape?: GlowShape;
+    /** Subtle drifting animation. Default `false`. */
+    animated?: boolean;
+    /** Custom CSS background-blend-mode for the glow layer. Optional advanced tweak. */
+    blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'hard-light' | 'color-dodge';
+}

package/lib/components/atoms/horizontal-scroll/horizontal-scroll.component.d.ts

@@ -0,0 +1,41 @@
+import { TemplateRef } from '@angular/core';
+import { HorizontalScrollMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-horizontal-scroll
+ *
+ * A generic horizontal scroll container that renders items using a provided template.
+ * Useful for carousels, galleries, or any horizontally scrollable content.
+ *
+ * @example
+ * <val-horizontal-scroll
+ *   [items]="cards"
+ *   [itemTemplate]="cardTemplate"
+ *   [props]="{ gap: '16px', snapAlign: 'start' }"
+ * ></val-horizontal-scroll>
+ *
+ * <ng-template #cardTemplate let-item let-index="index">
+ *   <div class="card">{{ item.title }}</div>
+ * </ng-template>
+ *
+ * @input items - Array of items to render
+ * @input itemTemplate - Template reference for rendering each item
+ * @input props - Optional configuration (gap, padding, showScrollbar, snapAlign)
+ */
+export declare class HorizontalScrollComponent<T = any> {
+    /**
+     * Array of items to render in the horizontal scroll.
+     */
+    items: T[];
+    /**
+     * Template reference for rendering each item.
+     * The template receives the item as implicit context and index as 'index'.
+     */
+    itemTemplate: TemplateRef<any>;
+    /**
+     * Optional configuration for the horizontal scroll container.
+     */
+    props?: HorizontalScrollMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HorizontalScrollComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalScrollComponent<any>, "val-horizontal-scroll", never, { "items": { "alias": "items"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/horizontal-scroll/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Configuration for the horizontal scroll component.
+ */
+export interface HorizontalScrollMetadata {
+    /** Optional gap between items in pixels or CSS units. Default: '0px' */
+    gap?: string;
+    /** Optional padding for the scroll container. Default: '0px' */
+    padding?: string;
+    /** Whether to show the scrollbar. Default: false */
+    showScrollbar?: boolean;
+    /** Snap behavior for scroll items: 'none' | 'start' | 'center'. Default: 'none' */
+    snapAlign?: 'none' | 'start' | 'center';
+}

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

@@ -0,0 +1,25 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { DownloadService } from '../../../services/download.service';
+import { HrefMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class HrefComponent implements OnInit {
+    private downloadService;
+    /**
+     * Link configuration object.
+     * @type {HrefMetadata}
+     * @property url - The URL to open.
+     * @property text - The link text.
+     * @property color - The link color (Ionic color string).
+     * @property download - Whether to trigger a download (optional).
+     * @property hoverable - Whether the link is hoverable (optional).
+     * @property token - Optional token for event identification.
+     */
+    props: HrefMetadata;
+    onClick: EventEmitter<string>;
+    constructor(downloadService: DownloadService);
+    ngOnInit(): void;
+    getFileName(): string;
+    onClickHandler(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HrefComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HrefComponent, "val-href", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,19 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-href component.
+ *
+ * @property url - The URL to open.
+ * @property token - Optional token for event identification.
+ * @property text - The link text.
+ * @property color - The link color (Ionic color string).
+ * @property download - Whether to trigger a download (optional).
+ * @property hoverable - Whether the link is hoverable (optional).
+ */
+export type HrefMetadata = {
+    url: string;
+    token: string;
+    text: string;
+    color: Color;
+    download: boolean;
+    hoverable: boolean;
+};

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

@@ -0,0 +1,18 @@
+import { OnInit } from '@angular/core';
+import { IconService } from '../../../services/icons.service';
+import { IconMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class IconComponent implements OnInit {
+    /**
+     * Icon configuration object.
+     * @type {IconMetadata}
+     * @property name - The icon name (Ionicons).
+     * @property color - The icon color (Ionic color string).
+     * @property size - The icon size ('small' | 'medium' | 'large' | 'xlarge').
+     */
+    props: IconMetadata;
+    constructor(service: IconService);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "val-icon", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,13 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-icon component.
+ *
+ * @property name - The icon name (Ionicons).
+ * @property color - The icon color (Ionic color string).
+ * @property size - The icon size ('small' | 'medium' | 'large' | 'xlarge').
+ */
+export interface IconMetadata {
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    color: Color;
+    name: string;
+}

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

@@ -0,0 +1,41 @@
+import { OnInit } from '@angular/core';
+import { ImageMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ImageComponent implements OnInit {
+    props: ImageMetadata;
+    available: boolean;
+    isPreviewOpen: boolean;
+    zoomLevel: number;
+    minZoom: number;
+    maxZoom: number;
+    panX: number;
+    panY: number;
+    isDragging: boolean;
+    lastPanX: number;
+    lastPanY: number;
+    startX: number;
+    startY: number;
+    initialDistance: number;
+    initialZoom: number;
+    touches: Touch[];
+    Math: Math;
+    constructor();
+    ngOnInit(): void;
+    changeToVisible(): void;
+    openPreview(): void;
+    closePreview(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetZoom(): void;
+    onMouseDown(event: MouseEvent): void;
+    onMouseMove(event: MouseEvent): void;
+    onMouseUp(event: MouseEvent): void;
+    onTouchStart(event: TouchEvent): void;
+    onTouchMove(event: TouchEvent): void;
+    onTouchEnd(event: TouchEvent): void;
+    onWheel(event: WheelEvent): void;
+    private getDistance;
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageComponent, "val-image", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * 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;
+    previewMode?: boolean;
+};

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

@@ -0,0 +1,60 @@
+/**
+ * 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 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 declare function generateRandomTile(palette: string[], chevronDensity?: number, rng?: () => number): PatternTile;
+/** 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,68 @@
+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;
+    /** ms entre reshuffles (modo animated). Default 8000ms — "de vez en cuando". */
+    private readonly reshuffleInterval;
+    /** Tiles a cambiar por tick. 0 → reseed grid completo (default). >0 → staggered. */
+    private readonly tilesPerTick;
+    private timer?;
+    /** Object-first input. Cambios disparan re-render por signals. */
+    set props(value: PatternMetadata | undefined);
+    /**
+     * 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;
+    /** SVG completo como string sanitized para `[innerHTML]`. */
+    readonly svgHtml: import("@angular/core").Signal<SafeHtml>;
+    constructor();
+    /**
+     * Reemplaza `count` tiles random del grid actual con tiles nuevos generados.
+     * Usado para staggered reshuffle (opt-in via `tilesPerTick > 0`).
+     */
+    private mutateRandomTiles;
+    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,61 @@
+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';
+}

package/lib/components/atoms/price-tag/price-tag.component.d.ts

@@ -0,0 +1,15 @@
+import { PriceTagMetadata, CurrencyInfo } from './types';
+import * as i0 from "@angular/core";
+export declare class PriceTagComponent {
+    props: PriceTagMetadata;
+    get currencyInfo(): CurrencyInfo;
+    get hasDiscount(): boolean;
+    getSymbol(): string;
+    formatAmount(): string;
+    formatPrice(amount: number): string;
+    getPrefix(): string;
+    getPeriod(): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PriceTagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PriceTagComponent, "val-price-tag", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}