valtech-components 2.0.404 → 2.0.407

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

@@ -0,0 +1,108 @@
+import { Color } from '@ionic/core';
+import { ImageMetadata } from '../../atoms/image/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Raffle status type.
+ */
+export type RaffleStatus = 'upcoming' | 'active' | 'sold_out' | 'drawing' | 'completed' | 'cancelled';
+/**
+ * Raffle progress information.
+ */
+export interface RaffleProgress {
+    /** Total tickets available */
+    totalTickets: number;
+    /** Tickets sold */
+    soldTickets: number;
+    /** Tickets reserved (not paid) */
+    reservedTickets?: number;
+    /** Goal amount (monetary) */
+    goalAmount?: number;
+    /** Current amount raised */
+    currentAmount?: number;
+}
+/**
+ * Prize information for the raffle.
+ */
+export interface RafflePrize {
+    /** Prize name */
+    name: string;
+    /** Prize description */
+    description?: string;
+    /** Prize image */
+    image?: ImageMetadata;
+    /** Prize value */
+    value?: number;
+    /** Currency for value */
+    currency?: string;
+}
+/**
+ * Metadata for the raffle status card component.
+ */
+export interface RaffleStatusCardMetadata {
+    /** Raffle title */
+    title: string;
+    /** Raffle description */
+    description?: string;
+    /** Current status */
+    status: RaffleStatus;
+    /** Progress information */
+    progress?: RaffleProgress;
+    /** Prize information */
+    prize?: RafflePrize;
+    /** Cover image */
+    coverImage?: ImageMetadata;
+    /** Raffle start date */
+    startDate?: Date | string;
+    /** Raffle end date / draw date */
+    endDate?: Date | string;
+    /** Show countdown to end date */
+    showCountdown?: boolean;
+    /** Ticket price */
+    ticketPrice?: number;
+    /** Currency */
+    currency?: string;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Card variant */
+    variant?: 'default' | 'featured' | 'compact' | 'horizontal';
+    /** Size */
+    size?: 'small' | 'medium' | 'large';
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show ticket stats */
+    showTicketStats?: boolean;
+    /** Show price */
+    showPrice?: boolean;
+    /** Show dates */
+    showDates?: boolean;
+    /** Show status badge */
+    showStatusBadge?: boolean;
+    /** Primary action button */
+    primaryAction?: ButtonMetadata;
+    /** Secondary action button */
+    secondaryAction?: ButtonMetadata;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Status color override */
+    statusColor?: Color;
+    /** Beneficiary name */
+    beneficiary?: string;
+    /** Beneficiary logo/image */
+    beneficiaryImage?: ImageMetadata;
+    /** Custom status labels */
+    statusLabels?: Partial<Record<RaffleStatus, string>>;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Content key for title */
+    titleContentKey?: string;
+    /** Content key for description */
+    descriptionContentKey?: string;
+}
+/**
+ * Default status labels.
+ */
+export declare const DEFAULT_STATUS_LABELS: Record<RaffleStatus, string>;
+/**
+ * Default status colors.
+ */
+export declare const DEFAULT_STATUS_COLORS: Record<RaffleStatus, Color>;

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

@@ -0,0 +1,30 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { RangeInputMetadata, RangeValue } from './types';
+import * as i0 from "@angular/core";
+export declare class RangeInputComponent implements OnInit, OnDestroy {
+    /**
+     * Input configuration object.
+     * @type {RangeInputMetadata}
+     */
+    props: RangeInputMetadata;
+    /**
+     * Emits the new value when the range changes.
+     */
+    rangeChange: EventEmitter<number | RangeValue>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    displayLabel: string;
+    private langService;
+    private subscription?;
+    defaultPinFormatter: (value: number) => string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onRangeChange(event: CustomEvent): void;
+    private setupLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RangeInputComponent, "val-range-input", never, { "props": { "alias": "props"; "required": false; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,59 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the range/slider input component.
+ */
+export interface RangeInputMetadata {
+    /** Associated form control for single value */
+    control: FormControl<number>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Show pin with current value */
+    pin?: boolean;
+    /** Pin format function */
+    pinFormatter?: (value: number) => string;
+    /** Show tick marks */
+    ticks?: boolean;
+    /** Snap to ticks */
+    snaps?: boolean;
+    /** Range color */
+    color?: Color;
+    /** Component state */
+    state?: ComponentState;
+    /** Enable/disable range */
+    disabled?: boolean;
+    /** Debounce time for ionChange event (ms) */
+    debounce?: number;
+    /** Dual knobs for range selection */
+    dualKnobs?: boolean;
+    /** Control for lower bound (only with dualKnobs) */
+    lowerControl?: FormControl<number>;
+    /** Control for upper bound (only with dualKnobs) */
+    upperControl?: FormControl<number>;
+    /** Show start label (min value or custom) */
+    startLabel?: string;
+    /** Show end label (max value or custom) */
+    endLabel?: string;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+}
+/**
+ * Value emitted by range component.
+ */
+export interface RangeValue {
+    lower?: number;
+    upper?: number;
+}

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

@@ -0,0 +1,17 @@
+import { EventEmitter } from '@angular/core';
+import { RatingMetadata, RatingChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class RatingComponent {
+    props: RatingMetadata;
+    ratingChange: EventEmitter<RatingChangeEvent>;
+    hoverValue: number | null;
+    get displayValue(): number;
+    getStars(): number[];
+    getStarIcon(position: number): string;
+    getStarColor(position: number): string;
+    onStarClick(position: number): void;
+    onStarHover(position: number): void;
+    onStarLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RatingComponent, "val-rating", never, { "props": { "alias": "props"; "required": false; }; }, { "ratingChange": "ratingChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,41 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the rating component.
+ */
+export interface RatingMetadata {
+    /** Current rating value */
+    value: number;
+    /** Maximum rating value */
+    max?: number;
+    /** Icon name for filled state */
+    icon?: string;
+    /** Icon name for empty state */
+    iconEmpty?: string;
+    /** Icon name for half state */
+    iconHalf?: string;
+    /** Allow half values */
+    allowHalf?: boolean;
+    /** Readonly mode */
+    readonly?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Rating color */
+    color?: Color;
+    /** Empty icon color */
+    emptyColor?: Color;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show numeric value */
+    showValue?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Event emitted when rating changes.
+ */
+export interface RatingChangeEvent {
+    /** New rating value */
+    value: number;
+    /** Previous rating value */
+    previousValue: number;
+}

package/lib/components/molecules/segment-control/segment-control.component.d.ts

@@ -0,0 +1,30 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { SegmentControlMetadata, SegmentOption } from './types';
+import * as i0 from "@angular/core";
+export declare class SegmentControlComponent implements OnInit, OnDestroy {
+    /**
+     * Input configuration object.
+     * @type {SegmentControlMetadata}
+     */
+    props: SegmentControlMetadata;
+    /**
+     * Emits the selected value when the segment changes.
+     */
+    segmentChange: EventEmitter<string>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    optionLabels: Map<string, string>;
+    private langService;
+    private subscriptions;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onSegmentChange(event: CustomEvent): void;
+    getOptionLabel(option: SegmentOption): string;
+    private setupOptionLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SegmentControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SegmentControlComponent, "val-segment-control", never, { "props": { "alias": "props"; "required": false; }; }, { "segmentChange": "segmentChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/segment-control/types.d.ts

@@ -0,0 +1,46 @@
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Option for segment control.
+ */
+export interface SegmentOption {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label?: string;
+    /** Icon name (Ionicons) */
+    icon?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Layout direction for icon and label */
+    layout?: 'icon-start' | 'icon-end' | 'icon-top' | 'icon-bottom';
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the segment control component.
+ */
+export interface SegmentControlMetadata {
+    /** Available options */
+    options: SegmentOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Segment color */
+    color?: Color;
+    /** Component state */
+    state?: ComponentState;
+    /** Enable/disable entire segment */
+    disabled?: boolean;
+    /** Scroll segments horizontally */
+    scrollable?: boolean;
+    /** Swipe to change segments (iOS only) */
+    swipeGesture?: boolean;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/molecules/share-buttons/share-buttons.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '@angular/core';
+import { ShareButtonsMetadata, ShareEvent, SharePlatform, ShareButtonConfig } from './types';
+import * as i0 from "@angular/core";
+export declare class ShareButtonsComponent {
+    props: ShareButtonsMetadata;
+    shareComplete: EventEmitter<ShareEvent>;
+    private toastController;
+    private langService;
+    getButtons(): ShareButtonConfig[];
+    getButtonFill(): 'solid' | 'outline' | 'clear';
+    getButtonIcon(button: ShareButtonConfig): string;
+    getButtonLabel(button: ShareButtonConfig): string;
+    getButtonColor(button: ShareButtonConfig): string;
+    share(platform: SharePlatform): Promise<void>;
+    private openShareUrl;
+    private nativeShare;
+    private copyToClipboard;
+    private getCopySuccessMessage;
+    private isNativeShareSupported;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShareButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "val-share-buttons", never, { "props": { "alias": "props"; "required": false; }; }, { "shareComplete": "shareComplete"; }, never, never, true, never>;
+}

package/lib/components/molecules/share-buttons/types.d.ts

@@ -0,0 +1,108 @@
+import { Color } from '@ionic/core';
+/**
+ * Social platform identifiers for sharing.
+ */
+export type SharePlatform = 'whatsapp' | 'facebook' | 'twitter' | 'telegram' | 'linkedin' | 'email' | 'copy' | 'native';
+/**
+ * Configuration for a share button.
+ */
+export interface ShareButtonConfig {
+    /** Platform identifier */
+    platform: SharePlatform;
+    /** Custom label (overrides default) */
+    label?: string;
+    /** Custom icon (overrides default) */
+    icon?: string;
+    /** Custom color (overrides default) */
+    color?: Color | string;
+    /** Whether this button is disabled */
+    disabled?: boolean;
+    /** Additional custom data for the platform */
+    customData?: Record<string, string>;
+}
+/**
+ * Data to be shared.
+ */
+export interface ShareData {
+    /** Title of the content */
+    title?: string;
+    /** Description or message */
+    text?: string;
+    /** URL to share */
+    url?: string;
+    /** Hashtags (for Twitter) */
+    hashtags?: string[];
+    /** Email subject (for email sharing) */
+    emailSubject?: string;
+    /** Email body (for email sharing) */
+    emailBody?: string;
+    /** Phone number for WhatsApp (optional, for direct messaging) */
+    whatsappPhone?: string;
+}
+/**
+ * Metadata for the share buttons component.
+ */
+export interface ShareButtonsMetadata {
+    /** Data to share */
+    shareData: ShareData;
+    /** Platforms to show (defaults to all) */
+    platforms?: SharePlatform[];
+    /** Custom button configurations */
+    buttons?: ShareButtonConfig[];
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Button style */
+    variant?: 'solid' | 'outline' | 'icon-only';
+    /** Show labels */
+    showLabels?: boolean;
+    /** Gap between buttons */
+    gap?: number;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Use platform colors */
+    usePlatformColors?: boolean;
+    /** Default color (when not using platform colors) */
+    color?: Color;
+    /** Show copy success toast */
+    showCopyToast?: boolean;
+    /** Copy success message */
+    copySuccessMessage?: string;
+    /** Use native share when available */
+    preferNativeShare?: boolean;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Content key for copy success message */
+    copySuccessMessageContentKey?: string;
+}
+/**
+ * Event emitted when a share action is performed.
+ */
+export interface ShareEvent {
+    /** Platform that was used */
+    platform: SharePlatform;
+    /** Whether the share was successful */
+    success: boolean;
+    /** Error message if failed */
+    error?: string;
+    /** The share data that was used */
+    shareData: ShareData;
+}
+/**
+ * Default platform configurations.
+ */
+export interface PlatformConfig {
+    name: string;
+    icon: string;
+    color: string;
+    getUrl: (data: ShareData) => string;
+}
+/**
+ * Default platform configurations.
+ */
+export declare const PLATFORM_CONFIGS: Record<SharePlatform, PlatformConfig>;
+/**
+ * Default platforms to show.
+ */
+export declare const DEFAULT_PLATFORMS: SharePlatform[];

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

@@ -0,0 +1,14 @@
+import { EventEmitter } from '@angular/core';
+import { StatsCardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class StatsCardComponent {
+    props: StatsCardMetadata;
+    cardClick: EventEmitter<void>;
+    Math: Math;
+    getCardColor(): string;
+    getBackgroundClass(): string;
+    getTrendClass(): string;
+    getTrendIcon(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatsCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "props": { "alias": "props"; "required": false; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,41 @@
+import { Color } from '@ionic/core';
+/**
+ * Trend configuration for stats card.
+ */
+export interface StatsTrend {
+    /** Trend value (percentage or absolute) */
+    value: number;
+    /** Trend direction */
+    direction: 'up' | 'down' | 'neutral';
+    /** Trend label (e.g., "vs last month") */
+    label?: string;
+    /** Invert colors (up=bad, down=good) */
+    invertColors?: boolean;
+}
+/**
+ * Metadata for the stats card component.
+ */
+export interface StatsCardMetadata {
+    /** Stat title/label */
+    title: string;
+    /** Main stat value */
+    value: string | number;
+    /** Value prefix (e.g., "$", "€") */
+    prefix?: string;
+    /** Value suffix (e.g., "%", "users") */
+    suffix?: string;
+    /** Icon name */
+    icon?: string;
+    /** Card color */
+    color?: Color;
+    /** Background style */
+    background?: 'solid' | 'gradient' | 'light';
+    /** Trend indicator */
+    trend?: StatsTrend;
+    /** Footer text */
+    footer?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}

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

@@ -0,0 +1,21 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { StepperMetadata, StepMetadata, StepChangeEvent, StepStatus } from './types';
+import * as i0 from "@angular/core";
+export declare class StepperComponent implements OnInit, OnDestroy {
+    props: StepperMetadata;
+    stepChange: EventEmitter<StepChangeEvent>;
+    private langService;
+    private subscriptions;
+    private stepLabels;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getCurrentIndex(): number;
+    getStepStatus(step: StepMetadata, index: number): StepStatus;
+    getStepColor(step: StepMetadata, index: number): string;
+    isStepClickable(step: StepMetadata, index: number): boolean;
+    onStepClick(step: StepMetadata, index: number): void;
+    getStepLabel(step: StepMetadata): string;
+    private setupLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "val-stepper", never, { "props": { "alias": "props"; "required": false; }; }, { "stepChange": "stepChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,66 @@
+import { Color } from '@ionic/core';
+/**
+ * Step status.
+ */
+export type StepStatus = 'pending' | 'current' | 'completed' | 'error';
+/**
+ * Single step configuration.
+ */
+export interface StepMetadata {
+    /** Unique step identifier */
+    value: string;
+    /** Step label */
+    label?: string;
+    /** Step description/subtitle */
+    description?: string;
+    /** Step icon (overrides number) */
+    icon?: string;
+    /** Step status */
+    status?: StepStatus;
+    /** Whether step is optional */
+    optional?: boolean;
+    /** Whether step is editable (can go back) */
+    editable?: boolean;
+    /** Whether step 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 stepper component.
+ */
+export interface StepperMetadata {
+    /** Step items */
+    steps: StepMetadata[];
+    /** Current step value */
+    currentStep?: string;
+    /** Current step index (alternative to currentStep) */
+    currentIndex?: number;
+    /** Stepper orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Linear mode (must complete in order) */
+    linear?: boolean;
+    /** Stepper color */
+    color?: Color;
+    /** Show step numbers */
+    showNumbers?: boolean;
+    /** Connector line style */
+    connectorStyle?: 'solid' | 'dashed' | 'none';
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Event emitted when step changes.
+ */
+export interface StepChangeEvent {
+    /** New step */
+    step: StepMetadata;
+    /** New step index */
+    index: number;
+    /** Previous step index */
+    previousIndex: number;
+}

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

@@ -0,0 +1,17 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { TabsMetadata, TabMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TabsComponent implements OnInit, OnDestroy {
+    props: TabsMetadata;
+    tabChange: EventEmitter<TabMetadata>;
+    private langService;
+    private subscriptions;
+    private tabLabels;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onTabClick(tab: TabMetadata): void;
+    getTabLabel(tab: TabMetadata): string;
+    private setupLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "val-tabs", never, { "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,45 @@
+import { Color } from '@ionic/core';
+/**
+ * Single tab configuration.
+ */
+export interface TabMetadata {
+    /** Unique tab identifier */
+    value: string;
+    /** Tab label (static) */
+    label?: string;
+    /** Tab icon name */
+    icon?: string;
+    /** Badge text or number */
+    badge?: string | number;
+    /** Badge color */
+    badgeColor?: Color;
+    /** Whether the tab 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 tabs component.
+ */
+export interface TabsMetadata {
+    /** Tab items */
+    tabs: TabMetadata[];
+    /** Currently selected tab value */
+    selectedTab?: string;
+    /** Tabs color */
+    color?: Color;
+    /** Tab bar position */
+    position?: 'top' | 'bottom';
+    /** Tab layout */
+    layout?: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+    /** Unique token identifier */
+    token?: string;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+    /** Translucent background */
+    translucent?: boolean;
+}