valtech-components 2.0.944 → 2.0.946

package/lib/components/molecules/article-card/article-card.component.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '@angular/core';
+import { ArticleCardMetadata, ArticleCardClickEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-article-card
+ *
+ * Article / blog teaser card: cover image, topic chip, title, excerpt and date.
+ * Clickable (routerLink or external href).
+ *
+ * Presentational — pass already-resolved/formatted strings (pre-format the date
+ * in the consumer with a locale-aware pipe).
+ *
+ * @example
+ * ```html
+ * <val-article-card
+ *   [props]="{
+ *     image: '/assets/post.jpg',
+ *     topic: 'Holidays',
+ *     title: 'New Holiday Shopping Features',
+ *     excerpt: 'A short summary of the article that gets clamped after a few lines.',
+ *     date: 'Oct 31, 2025',
+ *     routerLink: '/blog/holiday-shopping'
+ *   }"
+ *   (onClick)="open($event)"
+ * />
+ * ```
+ */
+export declare class ArticleCardComponent {
+    private navigation;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<ArticleCardMetadata>>;
+    /** Emitted when the card is clicked */
+    onClick: EventEmitter<ArticleCardClickEvent>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<ArticleCardMetadata & Required<Pick<ArticleCardMetadata, "bordered" | "aspectRatio" | "shadowed" | "excerptLines">>>;
+    isClickable: import("@angular/core").Signal<boolean>;
+    getTopicColor(): string | null;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCardComponent, "val-article-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/article-card/types.d.ts

@@ -0,0 +1,51 @@
+import { Color } from '@ionic/core';
+/**
+ * Click event emitted by val-article-card.
+ */
+export interface ArticleCardClickEvent {
+    /** Token identifier for the card */
+    token?: string;
+    /** Whether navigation was triggered (routerLink / href set) */
+    navigated?: boolean;
+}
+/**
+ * Metadata for val-article-card.
+ *
+ * Article / blog teaser card: cover image, topic chip, title, excerpt and date.
+ * Presentational — pass already-resolved/formatted strings (the date should be
+ * pre-formatted by the consumer, e.g. with a locale-aware pipe).
+ */
+export interface ArticleCardMetadata {
+    /** Unique token identifier */
+    token?: string;
+    /** Cover image URL */
+    image?: string;
+    /** Alt text for the cover image */
+    imageAlt?: string;
+    /** Image aspect ratio (CSS). Default: '16 / 9' */
+    aspectRatio?: string;
+    /** Topic / category label (rendered as a chip) */
+    topic?: string;
+    /** Topic chip color (Ionic color name or CSS color) */
+    topicColor?: Color | string;
+    /** Article title */
+    title: string;
+    /** Short excerpt / summary */
+    excerpt?: string;
+    /** Pre-formatted publication date string */
+    date?: string;
+    /** Internal Angular route */
+    routerLink?: string | any[];
+    /** External URL (opens in a new tab) */
+    href?: string;
+    /** Show border. Default: true */
+    bordered?: boolean;
+    /** Show shadow. Default: false */
+    shadowed?: boolean;
+    /** Number of lines before the excerpt is clamped. Default: 3 */
+    excerptLines?: number;
+}
+/**
+ * Default values for ArticleCardMetadata.
+ */
+export declare const ARTICLE_CARD_DEFAULTS: Required<Pick<ArticleCardMetadata, 'aspectRatio' | 'bordered' | 'shadowed' | 'excerptLines'>>;

package/lib/components/molecules/cta-card/cta-card.component.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '@angular/core';
+import { CtaCardMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-cta-card
+ *
+ * Card with a title, optional description and a group of action buttons, with
+ * customisable padding, corner rounding and background (Ionic colors
+ * supported). Buttons reuse `val-button-group`.
+ *
+ * Presentational — pass already-resolved strings.
+ *
+ * @example
+ * ```html
+ * <val-cta-card
+ *   [props]="{
+ *     title: 'Read the Bible Online',
+ *     description: 'Trusted translations, in your language.',
+ *     actions: {
+ *       position: 'left',
+ *       columned: false,
+ *       buttons: [
+ *         { text: 'Continue Reading', color: 'dark', type: 'button', shape: 'round', state: 'ENABLED', token: 'read' },
+ *         { text: 'Listen', color: 'dark', fill: 'outline', type: 'button', shape: 'round', state: 'ENABLED', token: 'listen' }
+ *       ]
+ *     }
+ *   }"
+ *   (onAction)="onAction($event)"
+ * />
+ * ```
+ */
+export declare class CtaCardComponent {
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<CtaCardMetadata>>;
+    /** Emitted with the token of the clicked action button */
+    onAction: EventEmitter<string>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<CtaCardMetadata & Required<Pick<CtaCardMetadata, "borderRadius" | "bordered" | "shadowed" | "align" | "padding">>>;
+    private resolveColor;
+    getBackground(): string;
+    getColor(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CtaCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CtaCardComponent, "val-cta-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+}

package/lib/components/molecules/cta-card/types.d.ts

@@ -0,0 +1,42 @@
+import { Color } from '@ionic/core';
+import { ButtonGroupMetadata } from '../button-group/types';
+/**
+ * Metadata for val-cta-card.
+ *
+ * Card with a title, optional description and a group of action buttons, with
+ * customisable padding, corner rounding and background (Ionic colors
+ * supported). The "Read the Bible Online / Continue Reading + Listen" pattern.
+ *
+ * Presentational — pass already-resolved strings. Buttons reuse
+ * `ButtonGroupMetadata` (same as banner / layered-card).
+ */
+export interface CtaCardMetadata {
+    /** Unique token identifier */
+    token?: string;
+    /** Small label above the title */
+    overtitle?: string;
+    /** Main title */
+    title: string;
+    /** Description / supporting text */
+    description?: string;
+    /** Action buttons configuration (reuses val-button-group) */
+    actions?: ButtonGroupMetadata;
+    /** Background color (Ionic color name or CSS color). Default: light surface */
+    backgroundColor?: Color | string;
+    /** Text color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Custom padding (CSS value). Default: '2rem' */
+    padding?: string;
+    /** Custom corner rounding (CSS value). Default: '20px' */
+    borderRadius?: string;
+    /** Content alignment. Default: 'start' */
+    align?: 'start' | 'center';
+    /** Show border. Default: false */
+    bordered?: boolean;
+    /** Show shadow. Default: false */
+    shadowed?: boolean;
+}
+/**
+ * Default values for CtaCardMetadata.
+ */
+export declare const CTA_CARD_DEFAULTS: Required<Pick<CtaCardMetadata, 'padding' | 'borderRadius' | 'align' | 'bordered' | 'shadowed'>>;

package/lib/components/molecules/media-object/media-object.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '@angular/core';
+import { MediaObjectMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-media-object
+ *
+ * Image (or icon) on one side, title + long body text on the other. Useful for
+ * feature rows, informational blocks, "what is X" sections, etc.
+ *
+ * Presentational: pass already-resolved strings (build them with
+ * `I18nService.t()` in the consumer page).
+ *
+ * @example
+ * ```html
+ * <val-media-object
+ *   [props]="{
+ *     image: '/assets/feature.png',
+ *     overtitle: 'Privacy',
+ *     title: 'Your data stays yours',
+ *     body: 'A long explanation that can span several lines without truncation.',
+ *     link: { label: 'Learn more', routerLink: '/privacy' }
+ *   }"
+ * />
+ * ```
+ */
+export declare class MediaObjectComponent {
+    private navigation;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<MediaObjectMetadata>>;
+    /** Emitted when the inline link is clicked */
+    onLinkClick: EventEmitter<string>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<MediaObjectMetadata & Required<Pick<MediaObjectMetadata, "rounded" | "circle" | "mediaWidth" | "reversed" | "align">>>;
+    getColor(): string;
+    handleLinkClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MediaObjectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediaObjectComponent, "val-media-object", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onLinkClick": "onLinkClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/media-object/types.d.ts

@@ -0,0 +1,53 @@
+import { Color } from '@ionic/core';
+/**
+ * Optional inline link / CTA shown under the body of a media object.
+ */
+export interface MediaObjectLink {
+    /** Link text (already resolved by the consumer, e.g. via I18nService.t()) */
+    label: string;
+    /** Internal Angular route */
+    routerLink?: string | any[];
+    /** External URL (opens in a new tab) */
+    href?: string;
+}
+/**
+ * Metadata for val-media-object.
+ *
+ * Media object = image (or icon) on one side, title + long body text on the
+ * other. Presentational: all visible strings are passed already resolved by
+ * the consumer (build them with I18nService.t() in the page).
+ */
+export interface MediaObjectMetadata {
+    /** Unique token identifier */
+    token?: string;
+    /** Image URL displayed on the side (takes precedence over icon) */
+    image?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Ionicon name shown when no image is provided */
+    icon?: string;
+    /** Icon / image accent color */
+    color?: Color | string;
+    /** Small label above the title */
+    overtitle?: string;
+    /** Main title */
+    title: string;
+    /** Body text (supports long, multi-line content) */
+    body?: string;
+    /** Optional link / CTA under the body */
+    link?: MediaObjectLink;
+    /** Media width (CSS value). Default: '96px' */
+    mediaWidth?: string;
+    /** Place the media on the right instead of the left */
+    reversed?: boolean;
+    /** Vertical alignment of the media against the content */
+    align?: 'start' | 'center';
+    /** Round the image / icon container corners. Default: true */
+    rounded?: boolean;
+    /** Render image as a circle (avatar style) */
+    circle?: boolean;
+}
+/**
+ * Default values for MediaObjectMetadata.
+ */
+export declare const MEDIA_OBJECT_DEFAULTS: Required<Pick<MediaObjectMetadata, 'mediaWidth' | 'reversed' | 'align' | 'rounded' | 'circle'>>;

package/lib/components/molecules/stats-bar/stats-bar.component.d.ts

@@ -0,0 +1,32 @@
+import { StatsBarMetadata, StatItem } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-stats-bar
+ *
+ * Horizontal row of headline stats separated by dividers (AWS / SES "Daily
+ * email usage" style). Stacks vertically on mobile.
+ *
+ * Presentational: values + labels are passed already resolved/formatted.
+ *
+ * @example
+ * ```html
+ * <val-stats-bar
+ *   [props]="{
+ *     stats: [
+ *       { label: 'Emails sent', value: 0 },
+ *       { label: 'Remaining sends', value: 200 },
+ *       { label: 'Sending quota used', value: '0.00', suffix: '%' }
+ *     ]
+ *   }"
+ * />
+ * ```
+ */
+export declare class StatsBarComponent {
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<StatsBarMetadata>>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<StatsBarMetadata & Required<Omit<StatsBarMetadata, "stats">>>;
+    getColor(stat: StatItem): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatsBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatsBarComponent, "val-stats-bar", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/stats-bar/types.d.ts

@@ -0,0 +1,40 @@
+import { Color } from '@ionic/core';
+/**
+ * A single stat shown inside a stats bar.
+ */
+export interface StatItem {
+    /** Label / caption above the value (already resolved by the consumer) */
+    label: string;
+    /** Main value (number or pre-formatted string) */
+    value: string | number;
+    /** Value prefix (e.g. "$") */
+    prefix?: string;
+    /** Value suffix (e.g. "%", "users") */
+    suffix?: string;
+    /** Value color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Optional token identifier */
+    token?: string;
+}
+/**
+ * Metadata for val-stats-bar.
+ *
+ * Horizontal row of headline stats separated by dividers (AWS / SES "Daily
+ * email usage" style). Stacks vertically on mobile.
+ */
+export interface StatsBarMetadata {
+    /** Stats to display */
+    stats: StatItem[];
+    /** Show vertical dividers between stats. Default: true */
+    dividers?: boolean;
+    /** Horizontal alignment of the group. Default: 'start' */
+    align?: 'start' | 'center' | 'spaced';
+    /** Value size. Default: 'large' */
+    size?: 'medium' | 'large';
+    /** Stack stats vertically on small screens. Default: true */
+    stackOnMobile?: boolean;
+}
+/**
+ * Default values for StatsBarMetadata.
+ */
+export declare const STATS_BAR_DEFAULTS: Required<Omit<StatsBarMetadata, 'stats'>>;

package/lib/components/types.d.ts

@@ -194,6 +194,12 @@ export type FormMetadata = {
     actions: ButtonMetadata;
     /** Global form state */
     state: ComponentState;
+    /**
+     * Espacio vertical entre campos, en px. Si se omite, usa el default
+     * responsivo de la lib (8px mobile / 12px desktop). Útil para formularios
+     * densos o más aireados sin tocar CSS del consumer.
+     */
+    fieldSpacing?: number;
 };
 /**
  * Possible action types for a toolbar.

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

package/package.json

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

package/public-api.d.ts

@@ -173,6 +173,14 @@ export * from './lib/components/molecules/update-banner/update-banner.component'
 export * from './lib/components/molecules/update-banner/types';
 export * from './lib/components/molecules/action-card/action-card.component';
 export * from './lib/components/molecules/action-card/types';
+export * from './lib/components/molecules/media-object/media-object.component';
+export * from './lib/components/molecules/media-object/types';
+export * from './lib/components/molecules/stats-bar/stats-bar.component';
+export * from './lib/components/molecules/stats-bar/types';
+export * from './lib/components/molecules/article-card/article-card.component';
+export * from './lib/components/molecules/article-card/types';
+export * from './lib/components/molecules/cta-card/cta-card.component';
+export * from './lib/components/molecules/cta-card/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';