valtech-components 4.0.107 → 4.0.108

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

@@ -5,25 +5,36 @@ import * as i0 from "@angular/core";
  * val-section-header
  *
  * 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.
+ * bold title + optional right-aligned action button(s) on one row, with an
+ * optional muted subtitle below.
  *
- * Theming: set `--val-section-header-cta-color` on the host or parent to
- * override the CTA color (e.g. `--bingo-magenta` in bingo).
+ * Replaces ad-hoc eyebrow spans, custom `.section-header` divs, and
+ * paired val-title + val-button combinations that accumulate per-page
+ * padding inconsistencies.
+ *
+ * **Actions:** pass `actions: ButtonMetadata[]` for right-side buttons.
+ * Use `fill: 'clear'` + `size: 'small'` for a text-link style CTA, or
+ * `fill: 'outline'` + `size: 'small'` for a contained button (e.g. "New").
+ *
+ * **Theming:** set `--val-section-header-cta-color` on the host or parent
+ * to tint plain-text CTAs without affecting full buttons.
  *
  * @example
  * ```html
  * <val-section-header
- *   [props]="{ title: 'Premios', subtitle: 'Regalos sorteados por ronda.', cta: { label: '¿Qué son?' } }"
- *   (ctaClick)="openInfoModal()" />
+ *   [props]="{
+ *     title: 'Premios',
+ *     subtitle: 'Regalos sorteados por ronda.',
+ *     actions: [{ text: '¿Qué son?', fill: 'clear', size: 'small', color: 'primary', type: 'button', state: 'ENABLED', token: 'info' }]
+ *   }"
+ *   (actionClick)="openInfoModal()" />
  * ```
  */
 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>;
+    /** Emits the clicked button's `token` (from `actions`). */
+    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,23 +1,34 @@
+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.
  *
- * @example Title-only (replaces plain eyebrow text)
+ * @example Title-only
  * ```html
  * <val-section-header [props]="{ title: 'Talonarios' }" />
  * ```
  *
- * @example Title + CTA + subtitle
+ * @example Title + text CTA + subtitle
  * ```html
  * <val-section-header
  *   [props]="{
  *     title: 'Premios',
  *     subtitle: 'Los regalos sorteados durante el evento.',
- *     cta: { label: '¿Qué son?' }
+ *     actions: [{ text: '¿Qué son?', fill: 'clear', size: 'small', color: 'primary', type: 'button', state: 'ENABLED', token: 'info' }]
  *   }"
- *   (ctaClick)="openInfoModal()" />
+ *   (actionClick)="openInfoModal()" />
+ * ```
+ *
+ * @example Title + create button
+ * ```html
+ * <val-section-header
+ *   [props]="{
+ *     title: 'Talonarios',
+ *     actions: [{ text: 'Nueva tanda', fill: 'outline', size: 'small', color: 'primary', type: 'button', state: 'ENABLED', token: 'create' }]
+ *   }"
+ *   (actionClick)="onAction($event)" />
  * ```
  */
 export interface SectionHeaderMetadata {
@@ -25,14 +36,10 @@ export interface SectionHeaderMetadata {
     title: string;
     /** Muted helper line below the title row. */
     subtitle?: string;
-    /** Right-aligned call-to-action. Emits `(ctaClick)` with its `token`. */
-    cta?: {
-        /** Visible label. */
-        label: string;
-        /**
-         * Value emitted by `(ctaClick)`. Useful when one handler manages several
-         * section headers. Defaults to `'cta'` when omitted.
-         */
-        token?: string;
-    };
+    /**
+     * Right-aligned action buttons. Rendered as `val-button` components.
+     * Each emits `(actionClick)` with its own `token`.
+     * Use `fill: 'clear'` + `size: 'small'` for a text-link style CTA.
+     */
+    actions?: ButtonMetadata[];
 }

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.108";

package/package.json

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