valtech-components 2.0.404 → 2.0.406

package/lib/components/atoms/countdown/countdown.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { CountdownMetadata, CountdownTime, CountdownCompleteEvent, CountdownTickEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class CountdownComponent implements OnInit, OnDestroy {
+    props: CountdownMetadata;
+    complete: EventEmitter<CountdownCompleteEvent>;
+    tick: EventEmitter<CountdownTickEvent>;
+    time: CountdownTime;
+    isExpired: boolean;
+    private intervalId;
+    private langService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Start the countdown timer.
+     */
+    start(): void;
+    /**
+     * Stop the countdown timer.
+     */
+    stop(): void;
+    /**
+     * Reset and restart the countdown.
+     */
+    restart(): void;
+    private updateTime;
+    private getTargetDate;
+    shouldShowDays(): boolean;
+    shouldShowHours(): boolean;
+    shouldShowMinutes(): boolean;
+    shouldShowSeconds(): boolean;
+    formatNumber(value: number): string;
+    getLabel(unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number): string;
+    getExpiredMessage(): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CountdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CountdownComponent, "val-countdown", never, { "props": { "alias": "props"; "required": false; }; }, { "complete": "complete"; "tick": "tick"; }, never, never, true, never>;
+}

package/lib/components/atoms/countdown/types.d.ts

@@ -0,0 +1,108 @@
+import { Color } from '@ionic/core';
+/**
+ * Time unit for countdown display.
+ */
+export interface CountdownUnit {
+    /** Value of the unit */
+    value: number;
+    /** Label for the unit */
+    label: string;
+    /** Whether to show this unit */
+    show: boolean;
+}
+/**
+ * Countdown time breakdown.
+ */
+export interface CountdownTime {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    totalSeconds: number;
+    isExpired: boolean;
+}
+/**
+ * Labels for countdown units.
+ */
+export interface CountdownLabels {
+    days?: string;
+    hours?: string;
+    minutes?: string;
+    seconds?: string;
+    /** Singular forms (optional) */
+    day?: string;
+    hour?: string;
+    minute?: string;
+    second?: string;
+}
+/**
+ * Default labels in Spanish.
+ */
+export declare const DEFAULT_COUNTDOWN_LABELS: CountdownLabels;
+/**
+ * Default labels in English.
+ */
+export declare const DEFAULT_COUNTDOWN_LABELS_EN: CountdownLabels;
+/**
+ * Metadata for the countdown component.
+ */
+export interface CountdownMetadata {
+    /** Target date/time to count down to */
+    targetDate: Date | string | number;
+    /** Display format */
+    format?: 'full' | 'compact' | 'minimal' | 'digital';
+    /** Show days */
+    showDays?: boolean;
+    /** Show hours */
+    showHours?: boolean;
+    /** Show minutes */
+    showMinutes?: boolean;
+    /** Show seconds */
+    showSeconds?: boolean;
+    /** Show labels below numbers */
+    showLabels?: boolean;
+    /** Show separators between units */
+    showSeparators?: boolean;
+    /** Separator character (default: ':') */
+    separator?: string;
+    /** Pad numbers with zeros */
+    padNumbers?: boolean;
+    /** Custom labels for time units */
+    labels?: CountdownLabels;
+    /** Message to show when expired */
+    expiredMessage?: string;
+    /** Show expired message or hide component */
+    showExpiredMessage?: boolean;
+    /** Component color */
+    color?: Color;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Auto-start countdown */
+    autoStart?: boolean;
+    /** Update interval in ms (default: 1000) */
+    updateInterval?: number;
+    /** Content key for expired message */
+    expiredMessageContentKey?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Event emitted when countdown completes.
+ */
+export interface CountdownCompleteEvent {
+    /** Target date that was reached */
+    targetDate: Date;
+    /** Timestamp when completed */
+    completedAt: Date;
+}
+/**
+ * Event emitted on each countdown tick.
+ */
+export interface CountdownTickEvent {
+    /** Current time breakdown */
+    time: CountdownTime;
+    /** Percentage of time elapsed (if start time known) */
+    percentageElapsed?: number;
+}

package/lib/components/atoms/fab/fab.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import { FabMetadata, FabActionMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class FabComponent {
+    props: FabMetadata;
+    fabClick: EventEmitter<void>;
+    actionClick: EventEmitter<FabActionMetadata>;
+    isActivated: boolean;
+    getVertical(): 'top' | 'bottom' | 'center';
+    getHorizontal(): 'start' | 'end' | 'center';
+    getMainIcon(): string;
+    onMainClick(): void;
+    onActionClick(action: FabActionMetadata): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FabComponent, "val-fab", never, { "props": { "alias": "props"; "required": false; }; }, { "fabClick": "fabClick"; "actionClick": "actionClick"; }, never, never, true, never>;
+}

package/lib/components/atoms/fab/types.d.ts

@@ -0,0 +1,45 @@
+import { Color } from '@ionic/core';
+/**
+ * FAB action item configuration.
+ */
+export interface FabActionMetadata {
+    /** Action icon */
+    icon: string;
+    /** Action label (tooltip) */
+    label?: string;
+    /** Action color */
+    color?: Color;
+    /** Action identifier */
+    token?: string;
+    /** Whether action is disabled */
+    disabled?: boolean;
+}
+/**
+ * Metadata for the FAB component.
+ */
+export interface FabMetadata {
+    /** Main FAB icon */
+    icon: string;
+    /** Icon when FAB is activated (optional) */
+    iconActivated?: string;
+    /** FAB color */
+    color?: Color;
+    /** FAB position */
+    position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'center-start' | 'center-end';
+    /** FAB size */
+    size?: 'small' | 'default';
+    /** FAB actions (mini buttons) */
+    actions?: FabActionMetadata[];
+    /** Actions list side */
+    side?: 'start' | 'end' | 'top' | 'bottom';
+    /** Whether FAB is disabled */
+    disabled?: boolean;
+    /** Translucent background */
+    translucent?: boolean;
+    /** Show labels on actions */
+    showLabels?: boolean;
+    /** Close on action click */
+    closeOnAction?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/atoms/price-tag/price-tag.component.d.ts

@@ -0,0 +1,16 @@
+import { PriceTagMetadata, CurrencyInfo } from './types';
+import * as i0 from "@angular/core";
+export declare class PriceTagComponent {
+    props: PriceTagMetadata;
+    private langService;
+    get currencyInfo(): CurrencyInfo;
+    get hasDiscount(): boolean;
+    getSymbol(): string;
+    formatAmount(): string;
+    formatPrice(amount: number): string;
+    getPrefix(): string;
+    getPeriod(): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PriceTagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PriceTagComponent, "val-price-tag", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/price-tag/types.d.ts

@@ -0,0 +1,59 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the price tag component.
+ */
+export interface PriceTagMetadata {
+    /** Price amount */
+    amount: number;
+    /** Currency code (ISO 4217) */
+    currency?: string;
+    /** Currency symbol (overrides auto-detection) */
+    currencySymbol?: string;
+    /** Original price (for showing discounts) */
+    originalAmount?: number;
+    /** Discount percentage to show */
+    discountPercentage?: number;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Display variant */
+    variant?: 'default' | 'highlight' | 'sale' | 'free' | 'badge';
+    /** Show currency code after amount */
+    showCurrencyCode?: boolean;
+    /** Decimal places */
+    decimals?: number;
+    /** Period/frequency label (e.g., "/mes", "por boleto") */
+    period?: string;
+    /** Prefix text (e.g., "Desde") */
+    prefix?: string;
+    /** Suffix text (e.g., "MXN") */
+    suffix?: string;
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Show currency symbol */
+    showSymbol?: boolean;
+    /** Content key for prefix */
+    prefixContentKey?: string;
+    /** Content key for period */
+    periodContentKey?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Currency configuration.
+ */
+export interface CurrencyInfo {
+    code: string;
+    symbol: string;
+    symbolPosition: 'prefix' | 'suffix';
+    decimals: number;
+    thousandsSeparator: string;
+    decimalSeparator: string;
+}
+/**
+ * Common currency configurations.
+ */
+export declare const CURRENCY_INFO: Record<string, CurrencyInfo>;

package/lib/components/atoms/progress-ring/progress-ring.component.d.ts

@@ -0,0 +1,20 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ProgressRingMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ProgressRingComponent implements OnChanges {
+    props: ProgressRingMetadata;
+    size: number;
+    strokeWidth: number;
+    radius: number;
+    center: number;
+    circumference: number;
+    dashOffset: number;
+    labelFontSize: number;
+    ngOnChanges(changes: SimpleChanges): void;
+    getProgressColor(): string;
+    getTrackColor(): string;
+    private calculateDimensions;
+    private calculateProgress;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressRingComponent, "val-progress-ring", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/progress-ring/types.d.ts

@@ -0,0 +1,24 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the progress ring component.
+ */
+export interface ProgressRingMetadata {
+    /** Progress value (0-100) */
+    value: number;
+    /** Size in pixels */
+    size?: number;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Progress color */
+    color?: Color;
+    /** Track (background) color */
+    trackColor?: Color;
+    /** Show percentage value */
+    showValue?: boolean;
+    /** Custom label (overrides percentage) */
+    label?: string;
+    /** Animate progress changes */
+    animated?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/atoms/qr-code/qr-code.component.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { QrCodeMetadata, QrCodeActionEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class QrCodeComponent implements OnInit, OnDestroy {
+    props: QrCodeMetadata;
+    actionComplete: EventEmitter<QrCodeActionEvent>;
+    imageLoad: EventEmitter<void>;
+    imageError: EventEmitter<Error>;
+    canShare: boolean;
+    canCopy: boolean;
+    private langSubscription;
+    private langService;
+    private qrService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private hasReactiveContent;
+    getDisplaySize(): string;
+    getBorderRadius(): string;
+    getPadding(): string;
+    getQrBorderRadius(): string;
+    getContainerClasses(): string;
+    getContainerBackground(): string;
+    getShadow(): string;
+    getLabelFontSize(): string;
+    hasActions(): boolean;
+    getDownloadLabel(): string;
+    getCopyLabel(): string;
+    getShareLabel(): string;
+    onDownload(): Promise<void>;
+    onCopy(): Promise<void>;
+    onShare(): Promise<void>;
+    onImageLoad(): void;
+    onImageError(_event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QrCodeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QrCodeComponent, "val-qr-code", never, { "props": { "alias": "props"; "required": false; }; }, { "actionComplete": "actionComplete"; "imageLoad": "imageLoad"; "imageError": "imageError"; }, never, never, true, never>;
+}

package/lib/components/atoms/qr-code/types.d.ts

@@ -0,0 +1,124 @@
+import { QrResult } from '../../../services/qr-generator/types';
+/**
+ * Theme presets for quick styling.
+ */
+export type QrDisplayTheme = 'default' | 'minimal' | 'gradient-purple' | 'gradient-blue' | 'gradient-sunset' | 'gradient-mint' | 'dark' | 'neon';
+/**
+ * Label position options.
+ */
+export type QrLabelPosition = 'top' | 'bottom';
+/**
+ * Gradient direction options.
+ */
+export type QrGradientDirection = 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left';
+/**
+ * Gradient configuration for backgrounds.
+ */
+export interface QrDisplayGradient {
+    /** Start color */
+    from: string;
+    /** End color */
+    to: string;
+    /** Optional middle color */
+    via?: string;
+    /** Gradient direction */
+    direction?: QrGradientDirection;
+}
+/**
+ * Label configuration for QR display.
+ */
+export interface QrLabelConfig {
+    /** Label text */
+    text: string;
+    /** Position (top or bottom) */
+    position?: QrLabelPosition;
+    /** Text color */
+    color?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font weight */
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Icon name (ionicon) to show with label */
+    icon?: string;
+    /** Icon position */
+    iconPosition?: 'start' | 'end';
+}
+/**
+ * Metadata for the QR code display component.
+ */
+export interface QrCodeMetadata {
+    /** QR result from QrGeneratorService */
+    qr: QrResult;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Whether to show download button */
+    showDownload?: boolean;
+    /** Download button label */
+    downloadLabel?: string;
+    /** Whether to show copy button */
+    showCopy?: boolean;
+    /** Copy button label */
+    copyLabel?: string;
+    /** Whether to show share button */
+    showShare?: boolean;
+    /** Share button label */
+    shareLabel?: string;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Size override (will scale the image) */
+    displaySize?: number;
+    /** Border radius for the container */
+    borderRadius?: number;
+    /** Show border around QR */
+    showBorder?: boolean;
+    /** Border color */
+    borderColor?: string;
+    /** Padding around the QR code */
+    padding?: number;
+    /** Background color for container */
+    containerBackground?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom filename for download (without extension) */
+    downloadFilename?: string;
+    /** Share title */
+    shareTitle?: string;
+    /** Share text/description */
+    shareText?: string;
+    /** Custom filename for share */
+    shareFilename?: string;
+    /** Theme preset for quick styling */
+    theme?: QrDisplayTheme;
+    /** Label/caption configuration */
+    label?: QrLabelConfig;
+    /** Gradient background (overrides containerBackground) */
+    gradient?: QrDisplayGradient;
+    /** Box shadow (e.g., 'sm', 'md', 'lg', 'xl', or custom CSS) */
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** Glow effect color (for neon theme) */
+    glowColor?: string;
+    /** Enable pulse animation on hover */
+    pulseOnHover?: boolean;
+    /** Enable scale animation on hover */
+    scaleOnHover?: boolean;
+    /** QR image border radius (to round the QR itself) */
+    qrBorderRadius?: number;
+    /** Reactive content keys */
+    downloadLabelContentKey?: string;
+    copyLabelContentKey?: string;
+    shareLabelContentKey?: string;
+    contentClass?: string;
+}
+/**
+ * Event emitted after QR code action.
+ */
+export interface QrCodeActionEvent {
+    /** Action type */
+    action: 'download' | 'copy' | 'share';
+    /** Whether action was successful */
+    success: boolean;
+    /** QR result */
+    qr: QrResult;
+    /** Error if action failed */
+    error?: Error;
+}

package/lib/components/atoms/skeleton/skeleton.component.d.ts

@@ -0,0 +1,12 @@
+import { SkeletonMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class SkeletonComponent {
+    props: SkeletonMetadata;
+    getWidth(): string;
+    getHeight(): string;
+    getBorderRadius(): string;
+    isCircle(): boolean;
+    getLines(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "val-skeleton", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/atoms/skeleton/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Skeleton type presets.
+ */
+export type SkeletonType = 'text' | 'avatar' | 'thumbnail' | 'card' | 'list-item' | 'paragraph' | 'custom';
+/**
+ * Metadata for the skeleton component.
+ */
+export interface SkeletonMetadata {
+    /** Skeleton type preset */
+    type?: SkeletonType;
+    /** Number of lines (for text/paragraph type) */
+    lines?: number;
+    /** Enable animation */
+    animated?: boolean;
+    /** Custom width */
+    width?: string;
+    /** Custom height */
+    height?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Show as circle (for avatar) */
+    circle?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Preset configurations for skeleton types.
+ */
+export declare const SKELETON_PRESETS: Record<SkeletonType, Partial<SkeletonMetadata>>;

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

@@ -0,0 +1,19 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { AccordionMetadata, AccordionItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class AccordionComponent implements OnInit, OnDestroy {
+    props: AccordionMetadata;
+    accordionChange: EventEmitter<string | string[]>;
+    private langService;
+    private subscriptions;
+    private headerLabels;
+    private contentLabels;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onAccordionChange(event: CustomEvent): void;
+    getItemHeader(item: AccordionItemMetadata): string;
+    getItemContent(item: AccordionItemMetadata): string;
+    private setupLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "val-accordion", never, { "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/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,22 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { BreadcrumbMetadata, BreadcrumbItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class BreadcrumbComponent implements OnInit, OnDestroy {
+    props: BreadcrumbMetadata;
+    breadcrumbClick: EventEmitter<{
+        item: BreadcrumbItemMetadata;
+        index: number;
+    }>;
+    collapsedClick: EventEmitter<CustomEvent<any>>;
+    private langService;
+    private subscriptions;
+    private itemLabels;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onBreadcrumbClick(event: Event, item: BreadcrumbItemMetadata, index: number): void;
+    onCollapsedClick(event: CustomEvent): void;
+    getItemLabel(item: BreadcrumbItemMetadata): string;
+    private setupLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "val-breadcrumb", never, { "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';
+}