valtech-components 2.0.404 → 2.0.407

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

@@ -0,0 +1,92 @@
+import { Color } from '@ionic/core';
+/**
+ * Aspect ratio options for the glow-card image
+ */
+export type GlowCardAspectRatio = '16:9' | '4:3' | '1:1' | '3:2' | '21:9';
+/**
+ * CTA (Call-to-Action) configuration for glow-card
+ */
+export interface GlowCardCTA {
+    /** CTA text (static) */
+    text?: string;
+    /** Content key for i18n support */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey not found */
+    contentFallback?: string;
+    /** URL to navigate to */
+    url: string;
+    /** Navigation type */
+    type: 'internal' | 'tab' | 'browse';
+    /** Icon name (defaults to 'arrow-forward-outline') */
+    icon?: string;
+}
+/**
+ * Glow effect configuration
+ */
+export interface GlowConfig {
+    /** Whether glow is enabled (default: true) */
+    enabled?: boolean;
+    /** Custom glow color - uses CSS color or Ionic color name */
+    color?: Color | string;
+    /** Glow intensity (default: 'medium') */
+    intensity?: 'subtle' | 'medium' | 'intense';
+}
+/**
+ * Event emitted when glow-card is clicked
+ */
+export interface GlowCardClickEvent {
+    /** Click target */
+    target: 'card' | 'cta' | 'image';
+    /** Optional token for identification */
+    token?: string;
+    /** CTA URL if CTA was clicked */
+    url?: string;
+}
+/**
+ * Props for val-glow-card component.
+ *
+ * A card component with image, title, description, and animated CTA.
+ * Features hover states with image zoom, expanding CTA link, and glow effect.
+ */
+export interface GlowCardMetadata {
+    /** Unique token for event identification */
+    token?: string;
+    /** Image source URL */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt: string;
+    /** Image aspect ratio (default: '16:9') */
+    aspectRatio?: GlowCardAspectRatio;
+    /** Static title text */
+    title?: string;
+    /** Title content key for i18n */
+    titleKey?: string;
+    /** Title content class for i18n lookup */
+    titleClass?: string;
+    /** Title fallback text */
+    titleFallback?: string;
+    /** Static description text */
+    description?: string;
+    /** Description content key for i18n */
+    descriptionKey?: string;
+    /** Description content class for i18n lookup */
+    descriptionClass?: string;
+    /** Description fallback text */
+    descriptionFallback?: string;
+    /** CTA configuration */
+    cta: GlowCardCTA;
+    /** Glow effect configuration */
+    glow?: GlowConfig;
+    /** Card background color (optional) */
+    backgroundColor?: Color | string;
+    /** Show border around the card (default: false) */
+    bordered?: boolean;
+    /** Border color - uses CSS color or Ionic color name (default: 'medium') */
+    borderColor?: Color | string;
+}
+/**
+ * Factory function to create GlowCardMetadata with defaults
+ */
+export declare function createGlowCardProps(overrides: Partial<GlowCardMetadata> & Pick<GlowCardMetadata, 'imageSrc' | 'imageAlt' | 'cta'>): GlowCardMetadata;

package/lib/components/molecules/number-stepper/number-stepper.component.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { NumberStepperMetadata, NumberStepperChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class NumberStepperComponent implements OnInit, OnDestroy {
+    props: NumberStepperMetadata;
+    valueChange: EventEmitter<NumberStepperChangeEvent>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    private valueSubscription;
+    private langService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get currentValue(): number;
+    get isAtMin(): boolean;
+    get isAtMax(): boolean;
+    get totalPrice(): number;
+    increment(): void;
+    decrement(): void;
+    setValue(value: number): void;
+    onInputBlur(): void;
+    private clampValue;
+    private clamp;
+    private emitChange;
+    getLabel(): string;
+    getUnitLabel(): string;
+    formatPrice(amount: number): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumberStepperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NumberStepperComponent, "val-number-stepper", never, { "props": { "alias": "props"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/number-stepper/types.d.ts

@@ -0,0 +1,88 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Quick selection preset for number stepper.
+ */
+export interface NumberStepperPreset {
+    /** Preset value */
+    value: number;
+    /** Display label (optional, defaults to value) */
+    label?: string;
+    /** Whether this is a popular/highlighted option */
+    popular?: boolean;
+}
+/**
+ * Metadata for the number stepper component.
+ */
+export interface NumberStepperMetadata {
+    /** Form control for the value */
+    control: FormControl<number>;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Show manual input field */
+    showInput?: boolean;
+    /** Allow manual input editing */
+    editableInput?: boolean;
+    /** Unit price for total calculation */
+    unitPrice?: number;
+    /** Currency code for price display */
+    currency?: string;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Show total price */
+    showTotal?: boolean;
+    /** Unit label (e.g., "boletos", "tickets") */
+    unitLabel?: string;
+    /** Singular unit label */
+    unitLabelSingular?: string;
+    /** Preset values for quick selection */
+    presets?: NumberStepperPreset[];
+    /** Show preset buttons */
+    showPresets?: boolean;
+    /** Component color */
+    color?: Color;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Button shape */
+    buttonShape?: 'square' | 'round';
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Component state */
+    state?: ComponentState;
+    /** Label for the component */
+    label?: string;
+    /** Hint text */
+    hint?: string;
+    /** Decrement button aria label */
+    decrementLabel?: string;
+    /** Increment button aria label */
+    incrementLabel?: string;
+    /** Content key for label */
+    labelContentKey?: string;
+    /** Content key for unit label */
+    unitLabelContentKey?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Event emitted when value changes.
+ */
+export interface NumberStepperChangeEvent {
+    /** New value */
+    value: number;
+    /** Previous value */
+    previousValue: number;
+    /** Total price (if unitPrice is set) */
+    totalPrice?: number;
+    /** Whether at minimum */
+    atMin: boolean;
+    /** Whether at maximum */
+    atMax: boolean;
+}

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

@@ -0,0 +1,15 @@
+import { OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { PaginationMetadata, PageChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class PaginationComponent implements OnChanges {
+    props: PaginationMetadata;
+    pageChange: EventEmitter<PageChangeEvent>;
+    visiblePages: number[];
+    totalPages: number;
+    ngOnChanges(changes: SimpleChanges): void;
+    goToPage(page: number): void;
+    private calculateTotalPages;
+    private calculateVisiblePages;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "val-pagination", never, { "props": { "alias": "props"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,41 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the pagination component.
+ */
+export interface PaginationMetadata {
+    /** Current page number (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Items per page */
+    pageSize?: number;
+    /** Total number of items (alternative to totalPages) */
+    totalItems?: number;
+    /** Maximum visible page buttons */
+    maxVisiblePages?: number;
+    /** Show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Pagination color */
+    color?: Color;
+    /** Size variant */
+    size?: 'small' | 'default' | 'large';
+    /** Disable pagination */
+    disabled?: boolean;
+    /** Show page info text (e.g., "Page 1 of 10") */
+    showPageInfo?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Event emitted when page changes.
+ */
+export interface PageChangeEvent {
+    /** New page number */
+    page: number;
+    /** Previous page number */
+    previousPage: number;
+    /** Page size */
+    pageSize: number;
+}

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

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import { ParticipantCardMetadata, ParticipantCardClickEvent, ParticipantCardActionEvent, ParticipantTicket } from './types';
+import * as i0 from "@angular/core";
+export declare class ParticipantCardComponent {
+    props: ParticipantCardMetadata;
+    cardClick: EventEmitter<ParticipantCardClickEvent>;
+    actionClick: EventEmitter<ParticipantCardActionEvent>;
+    showAllTickets: boolean;
+    private langService;
+    get ticketNumbers(): (number | ParticipantTicket)[];
+    get visibleTickets(): (number | ParticipantTicket)[];
+    get hiddenTicketsCount(): number;
+    formatTicketNumber(ticket: number | ParticipantTicket): string;
+    getTicketColor(ticket: number | ParticipantTicket): string;
+    isWinnerTicket(ticket: number | ParticipantTicket): boolean;
+    getPaymentStatusLabel(): string;
+    getPaymentStatusColor(): string;
+    getPaymentStatusIcon(): string;
+    formatCurrency(amount: number): string;
+    formatDate(date: Date | string): string;
+    toggleShowAllTickets(event: Event): void;
+    onCardClick(): void;
+    onActionsClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ParticipantCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ParticipantCardComponent, "val-participant-card", never, { "props": { "alias": "props"; "required": false; }; }, { "cardClick": "cardClick"; "actionClick": "actionClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,132 @@
+import { Color } from '@ionic/core';
+import { AvatarMetadata } from '../../atoms/avatar/types';
+/**
+ * Participant payment status.
+ */
+export type ParticipantPaymentStatus = 'pending' | 'processing' | 'paid' | 'refunded' | 'failed';
+/**
+ * Ticket info for participant.
+ */
+export interface ParticipantTicket {
+    /** Ticket number */
+    number: number;
+    /** Ticket status */
+    status: 'active' | 'reserved' | 'cancelled' | 'winner';
+}
+/**
+ * Participant information.
+ */
+export interface ParticipantInfo {
+    /** Participant ID */
+    id: string | number;
+    /** Participant name */
+    name: string;
+    /** Participant email */
+    email?: string;
+    /** Participant phone */
+    phone?: string;
+    /** Avatar */
+    avatar?: AvatarMetadata;
+    /** Location */
+    location?: string;
+    /** Registration date */
+    registrationDate?: Date | string;
+    /** Tickets purchased */
+    tickets: ParticipantTicket[] | number[];
+    /** Payment status */
+    paymentStatus?: ParticipantPaymentStatus;
+    /** Total amount paid */
+    amountPaid?: number;
+    /** Notes */
+    notes?: string;
+    /** Is winner */
+    isWinner?: boolean;
+    /** Custom data */
+    customData?: Record<string, any>;
+}
+/**
+ * Metadata for the participant card component.
+ */
+export interface ParticipantCardMetadata {
+    /** Participant information */
+    participant: ParticipantInfo;
+    /** Card variant */
+    variant?: 'default' | 'compact' | 'detailed' | 'admin';
+    /** Size */
+    size?: 'small' | 'medium' | 'large';
+    /** Show avatar */
+    showAvatar?: boolean;
+    /** Show email */
+    showEmail?: boolean;
+    /** Show phone */
+    showPhone?: boolean;
+    /** Show tickets */
+    showTickets?: boolean;
+    /** Max tickets to show before collapsing */
+    maxTicketsVisible?: number;
+    /** Show payment status */
+    showPaymentStatus?: boolean;
+    /** Show amount */
+    showAmount?: boolean;
+    /** Show date */
+    showDate?: boolean;
+    /** Number padding for tickets */
+    numberPadding?: number;
+    /** Currency code */
+    currency?: string;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Highlight if winner */
+    highlightWinner?: boolean;
+    /** Clickable card */
+    clickable?: boolean;
+    /** Show action menu */
+    showActions?: boolean;
+    /** Actions menu items */
+    actions?: ParticipantCardAction[];
+    /** Payment status labels */
+    paymentStatusLabels?: Partial<Record<ParticipantPaymentStatus, string>>;
+    /** Content class */
+    contentClass?: string;
+}
+/**
+ * Action item for participant card.
+ */
+export interface ParticipantCardAction {
+    /** Action ID */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Action icon */
+    icon?: string;
+    /** Action color */
+    color?: Color;
+    /** Is destructive action */
+    destructive?: boolean;
+}
+/**
+ * Event emitted when card is clicked.
+ */
+export interface ParticipantCardClickEvent {
+    /** Participant info */
+    participant: ParticipantInfo;
+}
+/**
+ * Event emitted when action is clicked.
+ */
+export interface ParticipantCardActionEvent {
+    /** Action ID */
+    actionId: string;
+    /** Participant info */
+    participant: ParticipantInfo;
+}
+/**
+ * Default payment status labels.
+ */
+export declare const DEFAULT_PAYMENT_STATUS_LABELS: Record<ParticipantPaymentStatus, string>;
+/**
+ * Default payment status colors.
+ */
+export declare const DEFAULT_PAYMENT_STATUS_COLORS: Record<ParticipantPaymentStatus, Color>;

package/lib/components/molecules/phone-input/phone-input.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { PhoneInputMetadata, PhoneInputChangeEvent, CountryCode } from './types';
+import * as i0 from "@angular/core";
+export declare class PhoneInputComponent implements OnInit, OnDestroy {
+    props: PhoneInputMetadata;
+    phoneChange: EventEmitter<PhoneInputChangeEvent>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    internalCountryControl: FormControl<string>;
+    internalNumberControl: FormControl<string>;
+    private langSubscription;
+    private valueSubscription;
+    private langService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private isInternalUpdate;
+    private parsePhoneNumber;
+    private hasReactiveContent;
+    getLabel(): string;
+    getPlaceholder(): string;
+    getHint(): string;
+    getCountryList(): CountryCode[];
+    getSelectedCountry(): CountryCode | null;
+    get hasError(): boolean;
+    getErrorMessage(): string;
+    onCountryChange(event: CustomEvent): void;
+    onNumberInput(event: CustomEvent): void;
+    onBlur(): void;
+    private updateMainControl;
+    private validateNumber;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PhoneInputComponent, "val-phone-input", never, { "props": { "alias": "props"; "required": false; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/phone-input/types.d.ts

@@ -0,0 +1,98 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Country code option for phone input.
+ */
+export interface CountryCode {
+    /** ISO country code (e.g., 'US', 'MX', 'ES') */
+    code: string;
+    /** Country name */
+    name: string;
+    /** Dial code (e.g., '+1', '+52', '+34') */
+    dialCode: string;
+    /** Flag emoji (optional) */
+    flag?: string;
+    /** Phone number format pattern (optional) */
+    format?: string;
+}
+/**
+ * Common country codes for quick access.
+ */
+export declare const COMMON_COUNTRY_CODES: CountryCode[];
+/**
+ * Metadata for the phone input component.
+ */
+export interface PhoneInputMetadata {
+    /** Form control for the complete phone number (with country code) */
+    control: FormControl<string>;
+    /** Separate control for just the number (without country code) */
+    numberControl?: FormControl<string>;
+    /** Separate control for country code selection */
+    countryControl?: FormControl<string>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Input placeholder for phone number */
+    placeholder?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Available country codes */
+    countryCodes?: CountryCode[];
+    /** Default country code (ISO code, e.g., 'MX') */
+    defaultCountry?: string;
+    /** Show country selector */
+    showCountrySelector?: boolean;
+    /** Show country flag */
+    showFlag?: boolean;
+    /** Allow searching countries */
+    searchableCountries?: boolean;
+    /** Preferred countries to show at top */
+    preferredCountries?: string[];
+    /** Validate phone format */
+    validateFormat?: boolean;
+    /** Custom validation pattern */
+    pattern?: string;
+    /** Minimum digits */
+    minDigits?: number;
+    /** Maximum digits */
+    maxDigits?: number;
+    /** Component color */
+    color?: Color;
+    /** Fill style */
+    fill?: 'outline' | 'solid';
+    /** Label placement */
+    labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Content key for reactive label */
+    labelContentKey?: string;
+    /** Content key for reactive placeholder */
+    placeholderContentKey?: string;
+    /** Content key for reactive hint */
+    hintContentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}
+/**
+ * Event emitted when phone input changes.
+ */
+export interface PhoneInputChangeEvent {
+    /** Complete phone number with country code */
+    fullNumber: string;
+    /** Phone number without country code */
+    number: string;
+    /** Selected country */
+    country: CountryCode | null;
+    /** Whether the number is valid */
+    isValid: boolean;
+}

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

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+export interface QuoteBoxMetadata {
+    /** Contenido de la cita */
+    content: string;
+    /** Autor de la cita */
+    author?: string;
+    /** Fuente de la cita (libro, artículo, etc.) */
+    source?: string;
+    /** Tamaño del texto */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Color de la cita */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+    /** Color del autor y fuente */
+    authorColor?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+    /** Alineación del contenido */
+    alignment?: 'left' | 'center' | 'right';
+    /** Mostrar comillas decorativas */
+    showQuoteMark?: boolean;
+    /** Texto en negrita */
+    bold?: boolean;
+}
+export declare class QuoteBoxComponent {
+    props: QuoteBoxMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuoteBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuoteBoxComponent, "quote-box", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/raffle-status-card/raffle-status-card.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '@angular/core';
+import { RaffleStatusCardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class RaffleStatusCardComponent {
+    props: RaffleStatusCardMetadata;
+    primaryActionClick: EventEmitter<void>;
+    secondaryActionClick: EventEmitter<void>;
+    private langService;
+    get isActiveOrUpcoming(): boolean;
+    get progressPercentage(): number;
+    getStatusLabel(): string;
+    getStatusColor(): string;
+    getProgressColor(): string;
+    getTitle(): string;
+    getDescription(): string;
+    formatCurrency(amount: number): string;
+    formatDate(date: Date | string): string;
+    onPrimaryAction(): void;
+    onSecondaryAction(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RaffleStatusCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RaffleStatusCardComponent, "val-raffle-status-card", never, { "props": { "alias": "props"; "required": false; }; }, { "primaryActionClick": "primaryActionClick"; "secondaryActionClick": "secondaryActionClick"; }, never, never, true, never>;
+}