valtech-components 2.0.773 → 2.0.775

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

@@ -45,6 +45,12 @@ export interface PatternTile {
     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[];
 /**

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

@@ -39,15 +39,27 @@ export declare class PatternComponent implements OnDestroy {
     private readonly chevronDensity;
     private readonly preserveAspect;
     private readonly animated;
+    /** ms entre updates individuales de tiles (modo animated). Default 1200ms. */
     private readonly reshuffleInterval;
+    /** Cuántos tiles cambiar por tick (default 1 → cambio sutil). */
+    private readonly tilesPerTick;
     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. */
+    /**
+     * 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 por el modo animated para staggered reshuffle.
+     */
+    private mutateRandomTiles;
     ngOnDestroy(): void;
     private resolvePalette;
     private randomSeed;

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

@@ -7,10 +7,15 @@ import { PatternPaletteKey } from './motifs';
  * <val-pattern [props]="{ palette: 'purple', cols: 12, rows: 4, seed: 42 }" />
  * ```
  *
- * @example Animated (reshuffle cada 8s):
+ * @example Animated staggered (1 tile cada 1.2s, sutil):
  * ```html
  * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
  * ```
+ *
+ * @example Animated más activo (2 tiles cada 800ms):
+ * ```html
+ * <val-pattern [props]="{ animated: true, reshuffleInterval: 800, tilesPerTick: 2 }" />
+ * ```
  */
 export interface PatternMetadata {
     /**
@@ -33,12 +38,21 @@ export interface PatternMetadata {
      */
     chevronDensity?: number;
     /**
-     * Si `true`, el patrón se reshuffles automáticamente con fade entre seeds.
+     * Si `true`, el patrón hace **staggered reshuffle**: cada `reshuffleInterval`
+     * ms se reemplazan `tilesPerTick` tiles random — NO la grid entera.
      * Default: `false`.
      */
     animated?: boolean;
-    /** Intervalo en ms entre reshuffles (solo si `animated: true`). Default: `8000`. */
+    /**
+     * 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.

package/lib/components/organisms/cookie-banner/cookie-banner.component.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '@angular/core';
+import { CookieBannerMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-cookie-banner` — bottom/top fixed banner asking the user to choose
+ * a cookie consent option. Presentational only: emits events on each
+ * action, the parent decides what to do (typically wiring to
+ * `AnalyticsService` from `valtech-components`).
+ *
+ * @example
+ * <val-cookie-banner
+ *   [props]="bannerProps()"
+ *   (accept)="onAccept()"
+ *   (reject)="onReject()"
+ *   (customize)="onCustomize()"
+ *   (dismiss)="onDismiss()"
+ * />
+ *
+ * Wire `props.visible` to `analytics.consentState().hasDecided === false`
+ * so the banner auto-hides once the user makes a choice.
+ */
+export declare class CookieBannerComponent {
+    /** Banner configuration object. */
+    props: CookieBannerMetadata;
+    /** Fired when the user clicks the primary "accept" button. */
+    accept: EventEmitter<void>;
+    /** Fired when the user clicks the secondary "reject" button. */
+    reject: EventEmitter<void>;
+    /** Fired when the user clicks the tertiary "customize/configure" button. */
+    customize: EventEmitter<void>;
+    /** Fired when the user clicks the dismiss (X) icon. */
+    dismiss: EventEmitter<void>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CookieBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CookieBannerComponent, "val-cookie-banner", never, { "props": { "alias": "props"; "required": false; }; }, { "accept": "accept"; "reject": "reject"; "customize": "customize"; "dismiss": "dismiss"; }, never, never, true, never>;
+}

package/lib/components/organisms/cookie-banner/types.d.ts

@@ -0,0 +1,62 @@
+import { Color } from '@ionic/core';
+/** Position of the banner relative to the viewport. */
+export type CookieBannerPosition = 'bottom' | 'top';
+/**
+ * Configuration for `val-cookie-banner`.
+ *
+ * The banner is purely presentational: it shows configurable text and
+ * up to three action buttons. It does NOT couple to any consent service —
+ * the parent decides what to do on each event (accept/reject/customize).
+ *
+ * Typical wiring (with `AnalyticsService` from valtech-components):
+ *   - `accept`   → `analytics.grantAllConsent()`
+ *   - `reject`   → `analytics.denyAllConsent()`
+ *   - `customize` → `router.navigate(['/cookies'])`
+ *
+ * Visibility is controlled by the parent via `[visible]` — typically
+ * tied to `analytics.consentState().hasDecided === false`.
+ */
+export interface CookieBannerMetadata {
+    /** Whether the banner is shown. Parent toggles based on `hasDecided`. */
+    visible: boolean;
+    /** Where the banner anchors. Default `'bottom'`. */
+    position?: CookieBannerPosition;
+    /** Short title above the message (optional). */
+    title?: string;
+    /**
+     * Main message shown to the user. Plain text — newlines respected.
+     * For inline links, use `policyHref` + `policyLinkText` so the link
+     * renders consistently after the message.
+     */
+    message: string;
+    /** Optional inline link appended to the message (e.g. "More info"). */
+    policyLinkText?: string;
+    /** Href for the inline policy link (relative or absolute). */
+    policyHref?: string;
+    /** Label for the "accept all" primary action. */
+    acceptText: string;
+    /** Label for the "reject / essential only" secondary action. */
+    rejectText: string;
+    /**
+     * Label for the "configure / customize" tertiary action. When omitted,
+     * the button is not rendered (simple two-button mode).
+     */
+    customizeText?: string;
+    /** Router link applied to the customize button (e.g. `'/cookies'`). */
+    customizeRouterLink?: string;
+    /** Show an `X` icon to dismiss the banner without deciding. Default `false`. */
+    dismissible?: boolean;
+    /** Color of the primary action button. Default `'primary'`. */
+    acceptColor?: Color;
+    /** Color of the secondary action button. Default `'medium'`. */
+    rejectColor?: Color;
+    /** Color of the tertiary action button. Default `'dark'`. */
+    customizeColor?: Color;
+    /**
+     * Max width of the inner banner container. Defaults to `'1200px'` so it
+     * doesn't span the full viewport on large screens.
+     */
+    maxWidth?: string;
+    /** Apply translucent (glass-style) backdrop. Default `false`. */
+    translucent?: boolean;
+}

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.773";
+export declare const VERSION = "2.0.775";

package/package.json

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

package/public-api.d.ts

@@ -172,6 +172,8 @@ export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
 export * from './lib/components/organisms/banner/banner.component';
 export * from './lib/components/organisms/banner/types';
+export * from './lib/components/organisms/cookie-banner/cookie-banner.component';
+export * from './lib/components/organisms/cookie-banner/types';
 export * from './lib/components/organisms/footer/footer.component';
 export * from './lib/components/organisms/form/factory';
 export * from './lib/components/organisms/form/form-footer/form-footer.component';