valtech-components 2.0.774 → 2.0.776

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

@@ -39,9 +39,9 @@ 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. */
+    /** ms entre reshuffles (modo animated). Default 8000ms — "de vez en cuando". */
     private readonly reshuffleInterval;
-    /** Cuántos tiles cambiar por tick (default 1 → cambio sutil). */
+    /** 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. */
@@ -57,7 +57,7 @@ export declare class PatternComponent implements OnDestroy {
     constructor();
     /**
      * Reemplaza `count` tiles random del grid actual con tiles nuevos generados.
-     * Usado por el modo animated para staggered reshuffle.
+     * Usado para staggered reshuffle (opt-in via `tilesPerTick > 0`).
      */
     private mutateRandomTiles;
     ngOnDestroy(): void;

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

@@ -7,12 +7,12 @@ import { PatternPaletteKey } from './motifs';
  * <val-pattern [props]="{ palette: 'purple', cols: 12, rows: 4, seed: 42 }" />
  * ```
  *
- * @example Animated staggered (1 tile cada 1.2s, sutil):
+ * @example Animated whole-grid reshuffle (cada 8s — default):
  * ```html
  * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
  * ```
  *
- * @example Animated más activo (2 tiles cada 800ms):
+ * @example Animated staggered (2 tiles cada 800ms — sutil):
  * ```html
  * <val-pattern [props]="{ animated: true, reshuffleInterval: 800, tilesPerTick: 2 }" />
  * ```

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.774",
+  "version": "2.0.776",
   "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';