valtech-components 2.0.821 → 2.0.824

package/lib/components/atoms/user-avatar/user-avatar.component.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '@angular/core';
+import { UserAvatarMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-user-avatar`
+ *
+ * Avatar **smart** con cadena de fallback automática:
+ *
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Si la imagen falla en cargar (404, CORS, etc.), automáticamente cae a las
+ * iniciales sin que el caller tenga que hacer nada. Color de fondo derivado
+ * deterministicamente del user para que el mismo user tenga siempre el mismo
+ * color (a menos que `background` se sobrescriba).
+ *
+ * @example
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goProfile()" />
+ * ```
+ */
+export declare class UserAvatarComponent {
+    private readonly props_;
+    private readonly imageFailed;
+    /** Indica si el `<img>` actual disparó su evento `load`. Conduce el fade-in. */
+    protected readonly imageLoaded: import("@angular/core").WritableSignal<boolean>;
+    set props(value: UserAvatarMetadata | undefined);
+    onClick: EventEmitter<void>;
+    /** Subscribers — usado para condicionar cursor/aria. */
+    get hasClick(): boolean;
+    readonly resolvedProps: import("@angular/core").Signal<UserAvatarMetadata>;
+    /** Resuelve los campos del user (user prop > campos sueltos). */
+    private readonly resolvedUser;
+    /**
+     * URL de imagen. Empty si la última carga falló — eso evita re-intentar
+     * con la misma URL cuando el browser ya marcó error. El placeholder
+     * (iniciales/icono) sigue visible debajo.
+     */
+    readonly imageUrl: import("@angular/core").Signal<string>;
+    /** Iniciales — 1-2 chars derivados de name (preferred) o email prefix. */
+    readonly initials: import("@angular/core").Signal<string>;
+    readonly sizeClass: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge" | "xsmall">;
+    readonly shapeClass: import("@angular/core").Signal<"circle" | "square">;
+    /** Background — explicito o derivado deterministicamente del user. */
+    readonly bgColor: import("@angular/core").Signal<string>;
+    readonly ariaLabel: import("@angular/core").Signal<string>;
+    onImageError(): void;
+    onImageLoad(): void;
+    /**
+     * Hash determinista string → HSL color del rango Valtech (purples/blues).
+     * Mismo seed → mismo color (consistencia entre sessions).
+     */
+    private colorFromSeed;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UserAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserAvatarComponent, "val-user-avatar", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/accordion/accordion.component.d.ts

@@ -0,0 +1,18 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { AccordionMetadata, AccordionItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class AccordionComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<AccordionMetadata>;
+    resolvedProps: AccordionMetadata;
+    accordionChange: EventEmitter<string | string[]>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    onAccordionChange(event: CustomEvent): void;
+    getItemHeader(item: AccordionItemMetadata): string;
+    getItemContent(item: AccordionItemMetadata): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "val-accordion", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "accordionChange": "accordionChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/accordion/types.d.ts

@@ -0,0 +1,47 @@
+import { Color } from '@ionic/core';
+/**
+ * Single accordion item configuration.
+ */
+export interface AccordionItemMetadata {
+    /** Unique value identifier */
+    value: string;
+    /** Header text (static) */
+    header?: string;
+    /** Header icon */
+    icon?: string;
+    /** Content text */
+    content?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Reactive content key for header */
+    headerKey?: string;
+    /** Reactive content key for content */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback for header */
+    headerFallback?: string;
+    /** Fallback for content */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the accordion component.
+ */
+export interface AccordionMetadata {
+    /** Accordion items */
+    items: AccordionItemMetadata[];
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Currently expanded item value(s) */
+    value?: string | string[];
+    /** Accordion color */
+    color?: Color;
+    /** Expand icon position */
+    expandIconSlot?: 'start' | 'end';
+    /** Readonly mode (no expand/collapse) */
+    readonly?: boolean;
+    /** Unique token identifier */
+    token?: string;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+}

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

@@ -0,0 +1,90 @@
+import { EventEmitter } from '@angular/core';
+import { ActionCardMetadata, ActionCardClickEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-action-card
+ *
+ * A clickable card component with icon, title, description, and optional badge.
+ * Supports multiple icon formats: Ionicons, SVG paths, and image URLs.
+ *
+ * @example Basic usage with Ionicon
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { ionicon: 'settings-outline' },
+ *     title: 'Settings',
+ *     description: 'Manage your preferences'
+ *   }"
+ *   (onClick)="onCardClick($event)"
+ * />
+ * ```
+ *
+ * @example With routerLink navigation
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { ionicon: 'person-outline', color: 'primary' },
+ *     title: 'Profile',
+ *     description: 'View and edit your profile',
+ *     routerLink: '/settings/profile',
+ *     showChevron: true
+ *   }"
+ * />
+ * ```
+ *
+ * @example With custom SVG icon
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { svgPath: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+ *     title: 'Custom Feature',
+ *     description: 'A feature with custom SVG icon',
+ *     badge: { text: 'NEW', color: 'light', backgroundColor: 'primary' }
+ *   }"
+ * />
+ * ```
+ */
+export declare class ActionCardComponent {
+    private i18n;
+    private navigation;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<ActionCardMetadata>>;
+    /** Event emitted when card is clicked */
+    onClick: EventEmitter<ActionCardClickEvent>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<{
+        token?: string;
+        icon?: import("./types").ActionCardIcon;
+        title?: string;
+        titleKey?: string;
+        description?: string;
+        descriptionKey?: string;
+        i18nNamespace?: string;
+        size: import("./types").ActionCardSize;
+        bordered: boolean;
+        borderColor?: string | (string & Record<never, never>);
+        backgroundColor?: string | (string & Record<never, never>);
+        shadowed: boolean;
+        disabled: boolean;
+        routerLink?: string | any[];
+        href?: string;
+        badge?: import("./types").ActionCardBadge;
+        showChevron: boolean;
+    }>;
+    /** Get title with i18n support */
+    getTitle(): string;
+    /** Get description with i18n support */
+    getDescription(): string;
+    /** Resolve color to CSS value */
+    private resolveColor;
+    getBackgroundColor(): string | null;
+    getBorderColor(): string | null;
+    getIconColor(): string | null;
+    getIconBackgroundColor(): string | null;
+    getBadgeColor(): string | null;
+    getBadgeBackgroundColor(): string | null;
+    /** Handle card click */
+    handleClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,83 @@
+import { Color } from '@ionic/core';
+/**
+ * Size options for action-card
+ */
+export type ActionCardSize = 'small' | 'medium' | 'large';
+/**
+ * Badge configuration for action-card
+ */
+export interface ActionCardBadge {
+    /** Badge text */
+    text: string;
+    /** Badge color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Badge background color */
+    backgroundColor?: Color | string;
+}
+/**
+ * Icon configuration - supports multiple icon sources
+ */
+export interface ActionCardIcon {
+    /** Ionicon name (e.g., 'settings-outline', 'home') */
+    ionicon?: string;
+    /** SVG path data for custom icons */
+    svgPath?: string;
+    /** Image URL for custom images */
+    imageUrl?: string;
+    /** Icon color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Icon background color */
+    backgroundColor?: Color | string;
+}
+/**
+ * Click event emitted by action-card
+ */
+export interface ActionCardClickEvent {
+    /** Token identifier for the card */
+    token?: string;
+    /** Whether navigation was triggered (if routerLink was set) */
+    navigated?: boolean;
+}
+/**
+ * Metadata for val-action-card component
+ */
+export interface ActionCardMetadata {
+    /** Unique token for identification */
+    token?: string;
+    /** Icon configuration object */
+    icon?: ActionCardIcon;
+    /** Card title (static text) */
+    title: string;
+    /** i18n key for title */
+    titleKey?: string;
+    /** Card description (static text) */
+    description?: string;
+    /** i18n key for description */
+    descriptionKey?: string;
+    /** i18n namespace for translations */
+    i18nNamespace?: string;
+    /** Card size variant */
+    size?: ActionCardSize;
+    /** Show border */
+    bordered?: boolean;
+    /** Border color */
+    borderColor?: Color | string;
+    /** Card background color */
+    backgroundColor?: Color | string;
+    /** Show shadow */
+    shadowed?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Router link for navigation */
+    routerLink?: string | any[];
+    /** External URL (opens in new tab/browser) */
+    href?: string;
+    /** Badge configuration */
+    badge?: ActionCardBadge;
+    /** Show chevron icon on the right */
+    showChevron?: boolean;
+}
+/**
+ * Default values for ActionCardMetadata
+ */
+export declare const ACTION_CARD_DEFAULTS: Required<Pick<ActionCardMetadata, 'size' | 'bordered' | 'shadowed' | 'disabled' | 'showChevron'>>;

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

@@ -0,0 +1,27 @@
+import { ActionHeaderMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-action-header` — heading with a right-aligned action button.
+ *
+ * By default renders the heading via `val-display` (hero size). Set
+ * `headingKind: 'title'` to render via `val-title` (section size) so it
+ * matches `val-title` section labels elsewhere on the same screen.
+ *
+ * @example Section heading (matches `val-title size='medium'` on the page):
+ * <val-action-header [props]="{
+ *   headingKind: 'title',
+ *   title: { size: 'medium', color: 'dark', bold: true, content: 'Active sessions' },
+ *   action: { text: 'Sign out all', color: 'dark', fill: 'outline', size: 'small', ... },
+ * }"></val-action-header>
+ *
+ * @example Page hero (default):
+ * <val-action-header [props]="{
+ *   title: { size: 'large', color: 'dark', content: 'Settings' },
+ *   action: { ... },
+ * }"></val-action-header>
+ */
+export declare class ActionHeaderComponent {
+    props: ActionHeaderMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionHeaderComponent, "val-action-header", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,27 @@
+import { DisplayMetadata } from '../../atoms/display/types';
+import { TitleMetadata } from '../../atoms/title/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Determines how the heading is rendered.
+ *
+ * - `'display'` (default) — uses `val-display`. Very large (40px medium, 48px large).
+ *   Ideal for page-level hero headers.
+ * - `'title'` — uses `val-title`. Smaller (18px medium, 24px large). Ideal for
+ *   section-level headings inside a page, so they match other `val-title`
+ *   section labels on the same screen.
+ */
+export type ActionHeaderHeadingKind = 'display' | 'title';
+/**
+ * Configuration for `val-action-header` — a section title with a right-aligned
+ * action button. Use `headingKind: 'title'` when this lives inside a page that
+ * already has `val-title` section labels (so sizes stay coherent).
+ */
+export type ActionHeaderMetadata = {
+    /** Heading props. Use `DisplayMetadata` shape when `headingKind === 'display'`,
+     *  `TitleMetadata` shape when `headingKind === 'title'`. Both accept
+     *  `size`, `color`, `content`. */
+    title: DisplayMetadata | TitleMetadata;
+    action: ButtonMetadata;
+    /** Default `'display'` for back-compat. */
+    headingKind?: ActionHeaderHeadingKind;
+};

package/lib/components/molecules/ad-slot/ad-slot.component.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Ad Slot Component
+ *
+ * Componente standalone para mostrar ads de Google AdSense.
+ * Se integra automaticamente con el servicio de Ads y respeta consent + premium.
+ *
+ * @example
+ * ```html
+ * <!-- Banner basico -->
+ * <val-ad-slot
+ *   slotId="homepage-top"
+ *   format="horizontal"
+ *   [fullWidth]="true"
+ * />
+ *
+ * <!-- Rectangle ad -->
+ * <val-ad-slot
+ *   slotId="sidebar-ad"
+ *   adSlot="1234567890"
+ *   format="rectangle"
+ * />
+ *
+ * <!-- Auto format (Google decides) -->
+ * <val-ad-slot
+ *   slotId="article-ad"
+ *   format="auto"
+ *   [fullWidth]="true"
+ * />
+ * ```
+ */
+import { OnInit, OnDestroy, AfterViewInit } from '@angular/core';
+import { AdsService } from '../../../services/ads/ads.service';
+import { AdFormat, AdSlotState } from '../../../services/ads/types';
+import * as i0 from "@angular/core";
+export declare class AdSlotComponent implements OnInit, OnDestroy, AfterViewInit {
+    readonly adsService: AdsService;
+    private readonly platformId;
+    private readonly elementRef;
+    /** ID unico del slot (para tracking interno) */
+    slotId: string;
+    /** Ad Slot ID de AdSense (opcional, para unidades manuales) */
+    adSlot?: string;
+    /** Formato del ad */
+    format: AdFormat;
+    /** Full width responsive */
+    fullWidth: boolean;
+    /** CSS class adicional */
+    cssClass: string;
+    /** Altura minima */
+    minHeight: string;
+    /** Mostrar skeleton */
+    showSkeleton: boolean;
+    private readonly _state;
+    readonly state: import("@angular/core").Signal<AdSlotState>;
+    private adInitialized;
+    /** Indica si el componente debe renderizarse */
+    readonly shouldRender: import("@angular/core").Signal<boolean>;
+    /**
+     * Indica si debe mostrar placeholder en vez de ad real.
+     * Activo en localhost o con Publisher ID placeholder.
+     */
+    readonly isPlaceholderMode: import("@angular/core").Signal<boolean>;
+    ngOnInit(): Promise<void>;
+    ngAfterViewInit(): Promise<void>;
+    ngOnDestroy(): void;
+    private initializeAd;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdSlotComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdSlotComponent, "val-ad-slot", never, { "slotId": { "alias": "slotId"; "required": true; }; "adSlot": { "alias": "adSlot"; "required": false; }; "format": { "alias": "format"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/alert-box/alert-box.component.d.ts

@@ -0,0 +1,39 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AlertBoxMetadata, ReactiveAlertBoxMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class AlertBoxComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable alert configurations
+     * (color, icon, box style) that can be registered at app level.
+     *
+     * @example
+     * <val-alert-box preset="warning" [props]="{ text: 'Warning message' }"></val-alert-box>
+     */
+    preset?: string;
+    /**
+     * Alert box configuration object. Values here override preset values.
+     * Supports both legacy AlertBoxMetadata and ReactiveAlertBoxMetadata patterns.
+     */
+    props: Partial<AlertBoxMetadata | ReactiveAlertBoxMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: AlertBoxMetadata | ReactiveAlertBoxMetadata;
+    /** Computed text properties for reactive pattern */
+    computedTextProps: any;
+    /** Whether this is using the legacy props pattern */
+    get isLegacyProps(): boolean;
+    /** Get text props for legacy pattern */
+    getLegacyTextProps(): any;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private initializeTextProps;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertBoxComponent, "val-alert-box", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/alert-box/types.d.ts

@@ -0,0 +1,37 @@
+import { BoxMetadata } from '../../atoms/box/types';
+import { IconMetadata } from '../../atoms/icon/types';
+import { TextMetadata } from '../../atoms/text/types';
+/**
+ * Alert box component metadata with support for reactive content.
+ * Provides both static and reactive content options for the text element.
+ */
+export interface AlertBoxMetadata {
+    box: BoxMetadata;
+    icon: IconMetadata;
+    text: TextMetadata;
+}
+/**
+ * Enhanced alert box metadata with simplified reactive content support.
+ * Alternative to the standard AlertBoxMetadata for common use cases.
+ */
+export interface ReactiveAlertBoxMetadata {
+    /** Box styling configuration */
+    box: BoxMetadata;
+    /** Icon configuration */
+    icon: IconMetadata;
+    /** Static text (takes precedence over textConfig) */
+    text?: string;
+    /** Reactive content configuration for alert text */
+    textConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
+    /** Text styling options */
+    textStyle?: {
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+        color?: string;
+        bold?: boolean;
+    };
+}

package/lib/components/molecules/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,22 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { BreadcrumbMetadata, BreadcrumbItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class BreadcrumbComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<BreadcrumbMetadata>;
+    resolvedProps: BreadcrumbMetadata;
+    breadcrumbClick: EventEmitter<{
+        item: BreadcrumbItemMetadata;
+        index: number;
+    }>;
+    collapsedClick: EventEmitter<CustomEvent<any>>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    onBreadcrumbClick(event: Event, item: BreadcrumbItemMetadata, index: number): void;
+    onCollapsedClick(event: CustomEvent): void;
+    getItemLabel(item: BreadcrumbItemMetadata): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "val-breadcrumb", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "breadcrumbClick": "breadcrumbClick"; "collapsedClick": "collapsedClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/breadcrumb/types.d.ts

@@ -0,0 +1,45 @@
+import { Color } from '@ionic/core';
+/**
+ * Single breadcrumb item configuration.
+ */
+export interface BreadcrumbItemMetadata {
+    /** Display text */
+    label?: string;
+    /** Navigation href or router link */
+    href?: string;
+    /** Icon name */
+    icon?: string;
+    /** Whether this is the current/active item */
+    active?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback for label */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the breadcrumb component.
+ */
+export interface BreadcrumbMetadata {
+    /** Breadcrumb items */
+    items: BreadcrumbItemMetadata[];
+    /** Separator character or icon */
+    separator?: string;
+    /** Use icon as separator */
+    separatorIcon?: string;
+    /** Maximum items before collapsing */
+    maxItems?: number;
+    /** Collapsed item indicator */
+    collapsedIndicator?: string;
+    /** Color for active/current item */
+    activeColor?: Color;
+    /** Color for inactive items */
+    inactiveColor?: Color;
+    /** Unique token identifier */
+    token?: string;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+}

package/lib/components/molecules/button-group/button-group.component.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { ButtonGroupMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ButtonGroupComponent implements OnInit {
+    /**
+     * Button group configuration object.
+     * @type {ButtonGroupMetadata}
+     * @property buttons - Array of button configurations.
+     * @property position - Position of the button group ('center' | 'left' | 'right' | 'spaced').
+     * @property columned - Whether the buttons are displayed in a column.
+     */
+    props: ButtonGroupMetadata;
+    /**
+     * Event emitted with the token of the clicked button.
+     */
+    onClick: EventEmitter<string>;
+    constructor();
+    ngOnInit(): void;
+    clickHandler(token?: string): void;
+    get Position(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "val-button-group", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/button-group/types.d.ts

@@ -0,0 +1,13 @@
+import { ButtonMetadata } from '../../types';
+/**
+ * Props for val-button-group component.
+ *
+ * @property buttons - Array of button configurations.
+ * @property position - Position of the button group ('center' | 'left' | 'right' | 'spaced').
+ * @property columned - Whether the buttons are displayed in a column.
+ */
+export interface ButtonGroupMetadata {
+    buttons: ButtonMetadata[];
+    position: 'center' | 'left' | 'right' | 'spaced' | 'leftocenter';
+    columned: boolean;
+}

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

@@ -0,0 +1,49 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ToolbarActionType } from '../../types';
+import { CardClickEvent, CardMetadata, CardSection, CardType } from './types';
+import * as i0 from "@angular/core";
+export declare class CardComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable card configurations
+     * (type, variant, padding, etc.) that can be registered at app level.
+     *
+     * @example
+     * <val-card preset="feature" [props]="{ title: 'My Card' }"></val-card>
+     */
+    preset?: string;
+    /**
+     * Card configuration object. Values here override preset values.
+     * @type {CardMetadata}
+     * @property type - The card type (see CardType).
+     * @property title - The card title.
+     * @property image - The card image URL.
+     * @property content - The card content.
+     * @property actions - Array of action buttons (optional).
+     * @property sections - Custom card sections (optional).
+     * @property overtitle - Subtitle or overtitle (optional).
+     */
+    props: Partial<CardMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: CardMetadata;
+    /**
+     * Event emitted when the card or an action is clicked.
+     */
+    onClick: EventEmitter<CardClickEvent>;
+    types: typeof CardType;
+    actionTypes: typeof ToolbarActionType;
+    sections: typeof CardSection;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    clickHandler(section: CardSection, token?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "val-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}