valtech-components 4.0.107 → 4.0.109

package/lib/components/molecules/section-header/section-header.component.d.ts

@@ -2,28 +2,25 @@ import { EventEmitter } from '@angular/core';
 import { SectionHeaderMetadata } from './types';
 import * as i0 from "@angular/core";
 /**
- * val-section-header
+ * val-section-header — standard section eyebrow for all factory apps.
  *
- * Standard molecule for section titles across all factory apps. Renders a
- * title + optional right-aligned CTA on one row, with an optional muted
- * subtitle below. Replaces ad-hoc `eyebrow`, `val-title`, and custom header
- * divs that accumulate per-page padding inconsistencies.
+ * Two-row layout:
+ * ```
+ * ┌────────────────────────────────────────────────┐
+ * │  TITLE (bold 18px)              [action btn]  │  ← row 1, space-between
+ * │  info link / subtitle (muted 13px)            │  ← row 2, optional
+ * └────────────────────────────────────────────────┘
+ * ```
  *
- * Theming: set `--val-section-header-cta-color` on the host or parent to
- * override the CTA color (e.g. `--bingo-magenta` in bingo).
+ * CSS var `--val-section-header-cta-color` tints the `infoLink` text color.
  *
- * @example
- * ```html
- * <val-section-header
- *   [props]="{ title: 'Premios', subtitle: 'Regalos sorteados por ronda.', cta: { label: '¿Qué son?' } }"
- *   (ctaClick)="openInfoModal()" />
- * ```
+ * Both `action` (button) and `infoLink` (text link) emit `(actionClick)` with
+ * their respective `token`.
  */
 export declare class SectionHeaderComponent {
     readonly props: import("@angular/core").InputSignal<Partial<SectionHeaderMetadata>>;
-    /** Emits the CTA token (defaults to `'cta'`) when the CTA is clicked. */
-    ctaClick: EventEmitter<string>;
+    actionClick: EventEmitter<string>;
     readonly config: import("@angular/core").Signal<SectionHeaderMetadata>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeaderComponent, "val-section-header", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "ctaClick": "ctaClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeaderComponent, "val-section-header", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, never, true, never>;
 }

package/lib/components/molecules/section-header/types.d.ts

@@ -1,38 +1,62 @@
+import { ButtonMetadata } from '../../types';
 /**
  * Configuration for `val-section-header`.
  *
- * Presentational molecule — all strings are already-resolved (consumer
- * translates via I18nService). No i18n of its own.
+ * Layout (two rows):
+ * ```
+ * ┌─────────────────────────────────────────────┐
+ * │  title (bold, 18px)        [action button]  │  ← row 1, space-between
+ * │  info link / subtitle (muted)               │  ← row 2, optional
+ * └─────────────────────────────────────────────┘
+ * ```
+ *
+ * Both `action` and `infoLink` emit `(actionClick)` with their `token`.
+ *
+ * @example Title + primary action button
+ * ```html
+ * <val-section-header
+ *   [props]="{ title: 'Talonarios', action: createButtonProps() }"
+ *   (actionClick)="openCreate()" />
+ * ```
  *
- * @example Title-only (replaces plain eyebrow text)
+ * @example Title + row-1 info link (no primary action)
  * ```html
- * <val-section-header [props]="{ title: 'Talonarios' }" />
+ * <val-section-header
+ *   [props]="{ title: 'Premios', infoLink: { label: '¿Qué son?', token: 'info' } }"
+ *   (actionClick)="openInfo()" />
  * ```
  *
- * @example Title + CTA + subtitle
+ * @example Full — title + action + row-2 info link
  * ```html
  * <val-section-header
  *   [props]="{
- *     title: 'Premios',
- *     subtitle: 'Los regalos sorteados durante el evento.',
- *     cta: { label: '¿Qué son?' }
+ *     title: 'Vendedores y talonarios',
+ *     action: createButtonProps(),
+ *     infoLink: { label: '¿Qué son los talonarios?', token: 'info' }
  *   }"
- *   (ctaClick)="openInfoModal()" />
+ *   (actionClick)="onAction($event)" />
  * ```
  */
 export interface SectionHeaderMetadata {
-    /** Main section title. Bold, ~18px. */
+    /** Main section title — bold, ~18px. */
     title: string;
-    /** Muted helper line below the title row. */
-    subtitle?: string;
-    /** Right-aligned call-to-action. Emits `(ctaClick)` with its `token`. */
-    cta?: {
-        /** Visible label. */
+    /**
+     * Primary action button rendered on the RIGHT of row 1 (space-between).
+     * Emits `(actionClick)` with the button's `token`.
+     */
+    action?: ButtonMetadata;
+    /**
+     * Clickable info / help link rendered at the START of row 2 (below title).
+     * Emits `(actionClick)` with its `token` (defaults to `'info'`).
+     * Use for "¿Qué es esto?"-style links.
+     */
+    infoLink?: {
         label: string;
-        /**
-         * Value emitted by `(ctaClick)`. Useful when one handler manages several
-         * section headers. Defaults to `'cta'` when omitted.
-         */
         token?: string;
     };
+    /**
+     * Static muted text in row 2 (shown below `infoLink` if both are set).
+     * Use for brief descriptive copy that does not need to be clickable.
+     */
+    subtitle?: string;
 }

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 = "4.0.107";
+export declare const VERSION = "4.0.109";

package/package.json

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