valtech-components 4.0.105 → 4.0.107

package/lib/components/molecules/form-field/form-field.component.d.ts

@@ -3,20 +3,29 @@ import * as i0 from "@angular/core";
  * Primitivo de campo de formulario: label (estilo val-form) + contenido proyectado.
  *
  * Usar cuando necesitás un campo fuera de val-form pero con el mismo estilo:
- * ion-input, ion-textarea, image-picker, date-picker, selectores custom, etc.
+ * image-picker, date-picker, selectores custom, chips, etc.
  *
- * ```html
- * <val-form-field label="Nombre del premio">
- *   <ion-input fill="outline" ... />
- * </val-form-field>
+ * NOTA: para ion-input / ion-textarea NO usar ng-content projection — el Shadow DOM
+ * de Ionic no responde al grid del host. Usá en cambio un `<div class="pf-field">`
+ * plano en el template con `<p class="pf-label">` + ion-input directo.
  *
+ * ```html
  * <val-form-field label="Imagen">
  *   <app-image-picker ... />
  * </val-form-field>
+ *
+ * <!-- Para ion-input: NO val-form-field, usar div plano -->
+ * <div class="pf-field">
+ *   <p class="pf-label">Nombre</p>
+ *   <ion-input fill="outline" ... />
+ * </div>
  * ```
  *
  * El label usa el mismo val-title que val-form (size=small, color=dark, bold=false).
  * El spacing entre campos se controla con --val-form-field-gap (default 0.5rem).
+ * El padding horizontal se hereda vía --val-form-field-padding (default 0).
+ * Setearlo en el contenedor padre para consistencia sin override en cada campo:
+ *   `.my-card { --val-form-field-padding: 0 16px; }`
  */
 export declare class FormFieldComponent {
     label: import("@angular/core").InputSignal<string>;

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import { SectionHeaderMetadata } from './types';
+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.
+ *
+ * Theming: set `--val-section-header-cta-color` on the host or parent to
+ * override the CTA color (e.g. `--bingo-magenta` in bingo).
+ *
+ * @example
+ * ```html
+ * <val-section-header
+ *   [props]="{ title: 'Premios', subtitle: 'Regalos sorteados por ronda.', cta: { label: '¿Qué son?' } }"
+ *   (ctaClick)="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>;
+    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>;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * 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)
+ * ```html
+ * <val-section-header [props]="{ title: 'Talonarios' }" />
+ * ```
+ *
+ * @example Title + CTA + subtitle
+ * ```html
+ * <val-section-header
+ *   [props]="{
+ *     title: 'Premios',
+ *     subtitle: 'Los regalos sorteados durante el evento.',
+ *     cta: { label: '¿Qué son?' }
+ *   }"
+ *   (ctaClick)="openInfoModal()" />
+ * ```
+ */
+export interface SectionHeaderMetadata {
+    /** 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. */
+        label: string;
+        /**
+         * Value emitted by `(ctaClick)`. Useful when one handler manages several
+         * section headers. Defaults to `'cta'` when omitted.
+         */
+        token?: 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.105";
+export declare const VERSION = "4.0.107";

package/package.json

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

package/public-api.d.ts

@@ -183,6 +183,8 @@ export * from './lib/components/molecules/cta-card/cta-card.component';
 export * from './lib/components/molecules/cta-card/types';
 export * from './lib/components/molecules/entity-card/entity-card.component';
 export * from './lib/components/molecules/entity-card/types';
+export * from './lib/components/molecules/section-header/section-header.component';
+export * from './lib/components/molecules/section-header/types';
 export * from './lib/components/molecules/invitation-card/invitation-card.component';
 export * from './lib/components/molecules/invitation-card/types';
 export * from './lib/components/molecules/member-card/member-card.component';