valtech-components 4.0.107 → 4.0.108

package/esm2022/lib/components/molecules/section-header/section-header.component.mjs

@@ -1,64 +1,80 @@
 import { Component, EventEmitter, Output, computed, input } from '@angular/core';
+import { ButtonComponent } from '../../atoms/button/button.component';
 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 class SectionHeaderComponent {
     constructor() {
         this.props = input({});
-        /** Emits the CTA token (defaults to `'cta'`) when the CTA is clicked. */
-        this.ctaClick = new EventEmitter();
+        /** Emits the clicked button's `token` (from `actions`). */
+        this.actionClick = new EventEmitter();
         this.config = computed(() => ({
             title: '',
             ...this.props(),
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
     <div class="sh-row">
       <span class="sh-title">{{ config().title }}</span>
-      @if (config().cta; as cta) {
-        <button type="button" class="sh-cta" (click)="ctaClick.emit(cta.token ?? 'cta')">
-          {{ cta.label }}
-        </button>
+      @if (config().actions?.length) {
+        <div class="sh-actions">
+          @for (action of config().actions; track action.token || $index) {
+            <val-button [props]="action" (onClick)="actionClick.emit($event)" />
+          }
+        </div>
       }
     </div>
     @if (config().subtitle) {
       <p class="sh-subtitle">{{ config().subtitle }}</p>
     }
-  `, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-cta{background:none;border:none;padding:0;font-size:.8125rem;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));cursor:pointer;white-space:nowrap;flex-shrink:0}.sh-cta:hover{text-decoration:underline;text-underline-offset:3px}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }); }
+  `, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-section-header', standalone: true, imports: [], template: `
+            args: [{ selector: 'val-section-header', standalone: true, imports: [ButtonComponent], template: `
     <div class="sh-row">
       <span class="sh-title">{{ config().title }}</span>
-      @if (config().cta; as cta) {
-        <button type="button" class="sh-cta" (click)="ctaClick.emit(cta.token ?? 'cta')">
-          {{ cta.label }}
-        </button>
+      @if (config().actions?.length) {
+        <div class="sh-actions">
+          @for (action of config().actions; track action.token || $index) {
+            <val-button [props]="action" (onClick)="actionClick.emit($event)" />
+          }
+        </div>
       }
     </div>
     @if (config().subtitle) {
       <p class="sh-subtitle">{{ config().subtitle }}</p>
     }
-  `, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-cta{background:none;border:none;padding:0;font-size:.8125rem;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));cursor:pointer;white-space:nowrap;flex-shrink:0}.sh-cta:hover{text-decoration:underline;text-underline-offset:3px}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
-        }], propDecorators: { ctaClick: [{
+  `, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
+        }], propDecorators: { actionClick: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbi1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9zZWN0aW9uLWhlYWRlci9zZWN0aW9uLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBR2pGOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQW9CSCxNQUFNLE9BQU8sc0JBQXNCO0lBbkJuQztRQW9CVyxVQUFLLEdBQUcsS0FBSyxDQUFpQyxFQUFFLENBQUMsQ0FBQztRQUUzRCx5RUFBeUU7UUFDL0QsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFdkMsV0FBTSxHQUFHLFFBQVEsQ0FBd0IsR0FBRyxFQUFFLENBQUMsQ0FBQztZQUN2RCxLQUFLLEVBQUUsRUFBRTtZQUNULEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRTtTQUNoQixDQUFDLENBQUMsQ0FBQztLQUNMOytHQVZZLHNCQUFzQjttR0FBdEIsc0JBQXNCLHFQQWZ2Qjs7Ozs7Ozs7Ozs7O0dBWVQ7OzRGQUdVLHNCQUFzQjtrQkFuQmxDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxFQUFFLFlBQ0Q7Ozs7Ozs7Ozs7OztHQVlUOzhCQU9TLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNlY3Rpb25IZWFkZXJNZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG4vKipcbiAqIHZhbC1zZWN0aW9uLWhlYWRlclxuICpcbiAqIFN0YW5kYXJkIG1vbGVjdWxlIGZvciBzZWN0aW9uIHRpdGxlcyBhY3Jvc3MgYWxsIGZhY3RvcnkgYXBwcy4gUmVuZGVycyBhXG4gKiB0aXRsZSArIG9wdGlvbmFsIHJpZ2h0LWFsaWduZWQgQ1RBIG9uIG9uZSByb3csIHdpdGggYW4gb3B0aW9uYWwgbXV0ZWRcbiAqIHN1YnRpdGxlIGJlbG93LiBSZXBsYWNlcyBhZC1ob2MgYGV5ZWJyb3dgLCBgdmFsLXRpdGxlYCwgYW5kIGN1c3RvbSBoZWFkZXJcbiAqIGRpdnMgdGhhdCBhY2N1bXVsYXRlIHBlci1wYWdlIHBhZGRpbmcgaW5jb25zaXN0ZW5jaWVzLlxuICpcbiAqIFRoZW1pbmc6IHNldCBgLS12YWwtc2VjdGlvbi1oZWFkZXItY3RhLWNvbG9yYCBvbiB0aGUgaG9zdCBvciBwYXJlbnQgdG9cbiAqIG92ZXJyaWRlIHRoZSBDVEEgY29sb3IgKGUuZy4gYC0tYmluZ28tbWFnZW50YWAgaW4gYmluZ28pLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7IHRpdGxlOiAnUHJlbWlvcycsIHN1YnRpdGxlOiAnUmVnYWxvcyBzb3J0ZWFkb3MgcG9yIHJvbmRhLicsIGN0YTogeyBsYWJlbDogJ8K/UXXDqSBzb24/JyB9IH1cIlxuICogICAoY3RhQ2xpY2spPVwib3BlbkluZm9Nb2RhbCgpXCIgLz5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtc2VjdGlvbi1oZWFkZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic2gtcm93XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInNoLXRpdGxlXCI+e3sgY29uZmlnKCkudGl0bGUgfX08L3NwYW4+XG4gICAgICBAaWYgKGNvbmZpZygpLmN0YTsgYXMgY3RhKSB7XG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwic2gtY3RhXCIgKGNsaWNrKT1cImN0YUNsaWNrLmVtaXQoY3RhLnRva2VuID8/ICdjdGEnKVwiPlxuICAgICAgICAgIHt7IGN0YS5sYWJlbCB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICBAaWYgKGNvbmZpZygpLnN1YnRpdGxlKSB7XG4gICAgICA8cCBjbGFzcz1cInNoLXN1YnRpdGxlXCI+e3sgY29uZmlnKCkuc3VidGl0bGUgfX08L3A+XG4gICAgfVxuICBgLFxuICBzdHlsZVVybDogJy4vc2VjdGlvbi1oZWFkZXIuY29tcG9uZW50LnNjc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBTZWN0aW9uSGVhZGVyQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgcHJvcHMgPSBpbnB1dDxQYXJ0aWFsPFNlY3Rpb25IZWFkZXJNZXRhZGF0YT4+KHt9KTtcblxuICAvKiogRW1pdHMgdGhlIENUQSB0b2tlbiAoZGVmYXVsdHMgdG8gYCdjdGEnYCkgd2hlbiB0aGUgQ1RBIGlzIGNsaWNrZWQuICovXG4gIEBPdXRwdXQoKSBjdGFDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHJlYWRvbmx5IGNvbmZpZyA9IGNvbXB1dGVkPFNlY3Rpb25IZWFkZXJNZXRhZGF0YT4oKCkgPT4gKHtcbiAgICB0aXRsZTogJycsXG4gICAgLi4udGhpcy5wcm9wcygpLFxuICB9KSk7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbi1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9zZWN0aW9uLWhlYWRlci9zZWN0aW9uLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOztBQUd0RTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQXNCSCxNQUFNLE9BQU8sc0JBQXNCO0lBckJuQztRQXNCVyxVQUFLLEdBQUcsS0FBSyxDQUFpQyxFQUFFLENBQUMsQ0FBQztRQUUzRCwyREFBMkQ7UUFDakQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRTFDLFdBQU0sR0FBRyxRQUFRLENBQXdCLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDdkQsS0FBSyxFQUFFLEVBQUU7WUFDVCxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUU7U0FDaEIsQ0FBQyxDQUFDLENBQUM7S0FDTDsrR0FWWSxzQkFBc0I7bUdBQXRCLHNCQUFzQiwyUEFqQnZCOzs7Ozs7Ozs7Ozs7OztHQWNULDZmQWZTLGVBQWU7OzRGQWtCZCxzQkFBc0I7a0JBckJsQyxTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxlQUFlLENBQUMsWUFDaEI7Ozs7Ozs7Ozs7Ozs7O0dBY1Q7OEJBT1MsV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIGNvbXB1dGVkLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2VjdGlvbkhlYWRlck1ldGFkYXRhIH0gZnJvbSAnLi90eXBlcyc7XG5cbi8qKlxuICogdmFsLXNlY3Rpb24taGVhZGVyXG4gKlxuICogU3RhbmRhcmQgbW9sZWN1bGUgZm9yIHNlY3Rpb24gdGl0bGVzIGFjcm9zcyBhbGwgZmFjdG9yeSBhcHBzLiBSZW5kZXJzIGFcbiAqIGJvbGQgdGl0bGUgKyBvcHRpb25hbCByaWdodC1hbGlnbmVkIGFjdGlvbiBidXR0b24ocykgb24gb25lIHJvdywgd2l0aCBhblxuICogb3B0aW9uYWwgbXV0ZWQgc3VidGl0bGUgYmVsb3cuXG4gKlxuICogUmVwbGFjZXMgYWQtaG9jIGV5ZWJyb3cgc3BhbnMsIGN1c3RvbSBgLnNlY3Rpb24taGVhZGVyYCBkaXZzLCBhbmRcbiAqIHBhaXJlZCB2YWwtdGl0bGUgKyB2YWwtYnV0dG9uIGNvbWJpbmF0aW9ucyB0aGF0IGFjY3VtdWxhdGUgcGVyLXBhZ2VcbiAqIHBhZGRpbmcgaW5jb25zaXN0ZW5jaWVzLlxuICpcbiAqICoqQWN0aW9uczoqKiBwYXNzIGBhY3Rpb25zOiBCdXR0b25NZXRhZGF0YVtdYCBmb3IgcmlnaHQtc2lkZSBidXR0b25zLlxuICogVXNlIGBmaWxsOiAnY2xlYXInYCArIGBzaXplOiAnc21hbGwnYCBmb3IgYSB0ZXh0LWxpbmsgc3R5bGUgQ1RBLCBvclxuICogYGZpbGw6ICdvdXRsaW5lJ2AgKyBgc2l6ZTogJ3NtYWxsJ2AgZm9yIGEgY29udGFpbmVkIGJ1dHRvbiAoZS5nLiBcIk5ld1wiKS5cbiAqXG4gKiAqKlRoZW1pbmc6Kiogc2V0IGAtLXZhbC1zZWN0aW9uLWhlYWRlci1jdGEtY29sb3JgIG9uIHRoZSBob3N0IG9yIHBhcmVudFxuICogdG8gdGludCBwbGFpbi10ZXh0IENUQXMgd2l0aG91dCBhZmZlY3RpbmcgZnVsbCBidXR0b25zLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7XG4gKiAgICAgdGl0bGU6ICdQcmVtaW9zJyxcbiAqICAgICBzdWJ0aXRsZTogJ1JlZ2Fsb3Mgc29ydGVhZG9zIHBvciByb25kYS4nLFxuICogICAgIGFjdGlvbnM6IFt7IHRleHQ6ICfCv1F1w6kgc29uPycsIGZpbGw6ICdjbGVhcicsIHNpemU6ICdzbWFsbCcsIGNvbG9yOiAncHJpbWFyeScsIHR5cGU6ICdidXR0b24nLCBzdGF0ZTogJ0VOQUJMRUQnLCB0b2tlbjogJ2luZm8nIH1dXG4gKiAgIH1cIlxuICogICAoYWN0aW9uQ2xpY2spPVwib3BlbkluZm9Nb2RhbCgpXCIgLz5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtc2VjdGlvbi1oZWFkZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQnV0dG9uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic2gtcm93XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInNoLXRpdGxlXCI+e3sgY29uZmlnKCkudGl0bGUgfX08L3NwYW4+XG4gICAgICBAaWYgKGNvbmZpZygpLmFjdGlvbnM/Lmxlbmd0aCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwic2gtYWN0aW9uc1wiPlxuICAgICAgICAgIEBmb3IgKGFjdGlvbiBvZiBjb25maWcoKS5hY3Rpb25zOyB0cmFjayBhY3Rpb24udG9rZW4gfHwgJGluZGV4KSB7XG4gICAgICAgICAgICA8dmFsLWJ1dHRvbiBbcHJvcHNdPVwiYWN0aW9uXCIgKG9uQ2xpY2spPVwiYWN0aW9uQ2xpY2suZW1pdCgkZXZlbnQpXCIgLz5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgIDwvZGl2PlxuICAgIEBpZiAoY29uZmlnKCkuc3VidGl0bGUpIHtcbiAgICAgIDxwIGNsYXNzPVwic2gtc3VidGl0bGVcIj57eyBjb25maWcoKS5zdWJ0aXRsZSB9fTwvcD5cbiAgICB9XG4gIGAsXG4gIHN0eWxlVXJsOiAnLi9zZWN0aW9uLWhlYWRlci5jb21wb25lbnQuc2NzcycsXG59KVxuZXhwb3J0IGNsYXNzIFNlY3Rpb25IZWFkZXJDb21wb25lbnQge1xuICByZWFkb25seSBwcm9wcyA9IGlucHV0PFBhcnRpYWw8U2VjdGlvbkhlYWRlck1ldGFkYXRhPj4oe30pO1xuXG4gIC8qKiBFbWl0cyB0aGUgY2xpY2tlZCBidXR0b24ncyBgdG9rZW5gIChmcm9tIGBhY3Rpb25zYCkuICovXG4gIEBPdXRwdXQoKSBhY3Rpb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHJlYWRvbmx5IGNvbmZpZyA9IGNvbXB1dGVkPFNlY3Rpb25IZWFkZXJNZXRhZGF0YT4oKCkgPT4gKHtcbiAgICB0aXRsZTogJycsXG4gICAgLi4udGhpcy5wcm9wcygpLFxuICB9KSk7XG59XG4iXX0=

package/esm2022/lib/components/molecules/section-header/types.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL3NlY3Rpb24taGVhZGVyL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbmZpZ3VyYXRpb24gZm9yIGB2YWwtc2VjdGlvbi1oZWFkZXJgLlxuICpcbiAqIFByZXNlbnRhdGlvbmFsIG1vbGVjdWxlIOKAlCBhbGwgc3RyaW5ncyBhcmUgYWxyZWFkeS1yZXNvbHZlZCAoY29uc3VtZXJcbiAqIHRyYW5zbGF0ZXMgdmlhIEkxOG5TZXJ2aWNlKS4gTm8gaTE4biBvZiBpdHMgb3duLlxuICpcbiAqIEBleGFtcGxlIFRpdGxlLW9ubHkgKHJlcGxhY2VzIHBsYWluIGV5ZWJyb3cgdGV4dClcbiAqIGBgYGh0bWxcbiAqIDx2YWwtc2VjdGlvbi1oZWFkZXIgW3Byb3BzXT1cInsgdGl0bGU6ICdUYWxvbmFyaW9zJyB9XCIgLz5cbiAqIGBgYFxuICpcbiAqIEBleGFtcGxlIFRpdGxlICsgQ1RBICsgc3VidGl0bGVcbiAqIGBgYGh0bWxcbiAqIDx2YWwtc2VjdGlvbi1oZWFkZXJcbiAqICAgW3Byb3BzXT1cIntcbiAqICAgICB0aXRsZTogJ1ByZW1pb3MnLFxuICogICAgIHN1YnRpdGxlOiAnTG9zIHJlZ2Fsb3Mgc29ydGVhZG9zIGR1cmFudGUgZWwgZXZlbnRvLicsXG4gKiAgICAgY3RhOiB7IGxhYmVsOiAnwr9RdcOpIHNvbj8nIH1cbiAqICAgfVwiXG4gKiAgIChjdGFDbGljayk9XCJvcGVuSW5mb01vZGFsKClcIiAvPlxuICogYGBgXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2VjdGlvbkhlYWRlck1ldGFkYXRhIHtcbiAgLyoqIE1haW4gc2VjdGlvbiB0aXRsZS4gQm9sZCwgfjE4cHguICovXG4gIHRpdGxlOiBzdHJpbmc7XG4gIC8qKiBNdXRlZCBoZWxwZXIgbGluZSBiZWxvdyB0aGUgdGl0bGUgcm93LiAqL1xuICBzdWJ0aXRsZT86IHN0cmluZztcbiAgLyoqIFJpZ2h0LWFsaWduZWQgY2FsbC10by1hY3Rpb24uIEVtaXRzIGAoY3RhQ2xpY2spYCB3aXRoIGl0cyBgdG9rZW5gLiAqL1xuICBjdGE/OiB7XG4gICAgLyoqIFZpc2libGUgbGFiZWwuICovXG4gICAgbGFiZWw6IHN0cmluZztcbiAgICAvKipcbiAgICAgKiBWYWx1ZSBlbWl0dGVkIGJ5IGAoY3RhQ2xpY2spYC4gVXNlZnVsIHdoZW4gb25lIGhhbmRsZXIgbWFuYWdlcyBzZXZlcmFsXG4gICAgICogc2VjdGlvbiBoZWFkZXJzLiBEZWZhdWx0cyB0byBgJ2N0YSdgIHdoZW4gb21pdHRlZC5cbiAgICAgKi9cbiAgICB0b2tlbj86IHN0cmluZztcbiAgfTtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL3NlY3Rpb24taGVhZGVyL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25NZXRhZGF0YSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuLyoqXG4gKiBDb25maWd1cmF0aW9uIGZvciBgdmFsLXNlY3Rpb24taGVhZGVyYC5cbiAqXG4gKiBQcmVzZW50YXRpb25hbCBtb2xlY3VsZSDigJQgYWxsIHN0cmluZ3MgYXJlIGFscmVhZHktcmVzb2x2ZWQgKGNvbnN1bWVyXG4gKiB0cmFuc2xhdGVzIHZpYSBJMThuU2VydmljZSkuIE5vIGkxOG4gb2YgaXRzIG93bi5cbiAqXG4gKiBAZXhhbXBsZSBUaXRsZS1vbmx5XG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyIFtwcm9wc109XCJ7IHRpdGxlOiAnVGFsb25hcmlvcycgfVwiIC8+XG4gKiBgYGBcbiAqXG4gKiBAZXhhbXBsZSBUaXRsZSArIHRleHQgQ1RBICsgc3VidGl0bGVcbiAqIGBgYGh0bWxcbiAqIDx2YWwtc2VjdGlvbi1oZWFkZXJcbiAqICAgW3Byb3BzXT1cIntcbiAqICAgICB0aXRsZTogJ1ByZW1pb3MnLFxuICogICAgIHN1YnRpdGxlOiAnTG9zIHJlZ2Fsb3Mgc29ydGVhZG9zIGR1cmFudGUgZWwgZXZlbnRvLicsXG4gKiAgICAgYWN0aW9uczogW3sgdGV4dDogJ8K/UXXDqSBzb24/JywgZmlsbDogJ2NsZWFyJywgc2l6ZTogJ3NtYWxsJywgY29sb3I6ICdwcmltYXJ5JywgdHlwZTogJ2J1dHRvbicsIHN0YXRlOiAnRU5BQkxFRCcsIHRva2VuOiAnaW5mbycgfV1cbiAqICAgfVwiXG4gKiAgIChhY3Rpb25DbGljayk9XCJvcGVuSW5mb01vZGFsKClcIiAvPlxuICogYGBgXG4gKlxuICogQGV4YW1wbGUgVGl0bGUgKyBjcmVhdGUgYnV0dG9uXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7XG4gKiAgICAgdGl0bGU6ICdUYWxvbmFyaW9zJyxcbiAqICAgICBhY3Rpb25zOiBbeyB0ZXh0OiAnTnVldmEgdGFuZGEnLCBmaWxsOiAnb3V0bGluZScsIHNpemU6ICdzbWFsbCcsIGNvbG9yOiAncHJpbWFyeScsIHR5cGU6ICdidXR0b24nLCBzdGF0ZTogJ0VOQUJMRUQnLCB0b2tlbjogJ2NyZWF0ZScgfV1cbiAqICAgfVwiXG4gKiAgIChhY3Rpb25DbGljayk9XCJvbkFjdGlvbigkZXZlbnQpXCIgLz5cbiAqIGBgYFxuICovXG5leHBvcnQgaW50ZXJmYWNlIFNlY3Rpb25IZWFkZXJNZXRhZGF0YSB7XG4gIC8qKiBNYWluIHNlY3Rpb24gdGl0bGUuIEJvbGQsIH4xOHB4LiAqL1xuICB0aXRsZTogc3RyaW5nO1xuICAvKiogTXV0ZWQgaGVscGVyIGxpbmUgYmVsb3cgdGhlIHRpdGxlIHJvdy4gKi9cbiAgc3VidGl0bGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBSaWdodC1hbGlnbmVkIGFjdGlvbiBidXR0b25zLiBSZW5kZXJlZCBhcyBgdmFsLWJ1dHRvbmAgY29tcG9uZW50cy5cbiAgICogRWFjaCBlbWl0cyBgKGFjdGlvbkNsaWNrKWAgd2l0aCBpdHMgb3duIGB0b2tlbmAuXG4gICAqIFVzZSBgZmlsbDogJ2NsZWFyJ2AgKyBgc2l6ZTogJ3NtYWxsJ2AgZm9yIGEgdGV4dC1saW5rIHN0eWxlIENUQS5cbiAgICovXG4gIGFjdGlvbnM/OiBCdXR0b25NZXRhZGF0YVtdO1xufVxuIl19

package/esm2022/lib/version.mjs

@@ -2,5 +2,5 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export const VERSION = '4.0.107';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC4xMDcnO1xuIl19
+export const VERSION = '4.0.108';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC4xMDgnO1xuIl19

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.107';
+const VERSION = '4.0.108';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -28956,61 +28956,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * 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()" />
  * ```
  */
 class SectionHeaderComponent {
     constructor() {
         this.props = input({});
-        /** Emits the CTA token (defaults to `'cta'`) when the CTA is clicked. */
-        this.ctaClick = new EventEmitter();
+        /** Emits the clicked button's `token` (from `actions`). */
+        this.actionClick = new EventEmitter();
         this.config = computed(() => ({
             title: '',
             ...this.props(),
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
     <div class="sh-row">
       <span class="sh-title">{{ config().title }}</span>
-      @if (config().cta; as cta) {
-        <button type="button" class="sh-cta" (click)="ctaClick.emit(cta.token ?? 'cta')">
-          {{ cta.label }}
-        </button>
+      @if (config().actions?.length) {
+        <div class="sh-actions">
+          @for (action of config().actions; track action.token || $index) {
+            <val-button [props]="action" (onClick)="actionClick.emit($event)" />
+          }
+        </div>
       }
     </div>
     @if (config().subtitle) {
       <p class="sh-subtitle">{{ config().subtitle }}</p>
     }
-  `, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-cta{background:none;border:none;padding:0;font-size:.8125rem;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));cursor:pointer;white-space:nowrap;flex-shrink:0}.sh-cta:hover{text-decoration:underline;text-underline-offset:3px}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }); }
+  `, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-section-header', standalone: true, imports: [], template: `
+            args: [{ selector: 'val-section-header', standalone: true, imports: [ButtonComponent], template: `
     <div class="sh-row">
       <span class="sh-title">{{ config().title }}</span>
-      @if (config().cta; as cta) {
-        <button type="button" class="sh-cta" (click)="ctaClick.emit(cta.token ?? 'cta')">
-          {{ cta.label }}
-        </button>
+      @if (config().actions?.length) {
+        <div class="sh-actions">
+          @for (action of config().actions; track action.token || $index) {
+            <val-button [props]="action" (onClick)="actionClick.emit($event)" />
+          }
+        </div>
       }
     </div>
     @if (config().subtitle) {
       <p class="sh-subtitle">{{ config().subtitle }}</p>
     }
-  `, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-cta{background:none;border:none;padding:0;font-size:.8125rem;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));cursor:pointer;white-space:nowrap;flex-shrink:0}.sh-cta:hover{text-decoration:underline;text-underline-offset:3px}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
-        }], propDecorators: { ctaClick: [{
+  `, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.sh-subtitle{margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
+        }], propDecorators: { actionClick: [{
                 type: Output
             }] } });