valtech-components 2.0.691 → 2.0.692

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/password-input/password-input.component.d.ts

@@ -0,0 +1,37 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { IconService } from '../../../services/icons.service';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class PasswordInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-password-input preset="login" [props]="{ control: ctrl }"></val-password-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the input.
+     * @property placeholder - The placeholder text.
+     */
+    props: Partial<InputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: InputMetadata;
+    hidePassword: boolean;
+    constructor(icon: IconService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PasswordInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PasswordInputComponent, "val-password-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,59 @@
+import { EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges } 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, OnChanges, OnDestroy {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable phone input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-phone-input preset="form-field" [props]="{ control: ctrl }"></val-phone-input>
+     */
+    preset?: string;
+    /**
+     * Phone input configuration object. Values here override preset values.
+     */
+    props: Partial<PhoneInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: PhoneInputMetadata;
+    phoneChange: EventEmitter<PhoneInputChangeEvent>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    internalCountryControl: FormControl<string>;
+    internalNumberControl: FormControl<string>;
+    private valueSubscription;
+    private isInternalUpdate;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private setupComponent;
+    private parsePhoneNumber;
+    getLabel(): string;
+    getPlaceholder(): string;
+    getHint(): string;
+    getCountryList(): CountryCode[];
+    getSelectedCountry(): CountryCode | null;
+    get hasError(): boolean;
+    getErrorMessage(): string;
+    onCountryChange(event: CustomEvent): void;
+    onNumberInput(event: CustomEvent): void;
+    onNumberInputNative(event: Event): void;
+    onBlur(): void;
+    private updateMainControl;
+    private validateNumber;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PhoneInputComponent, "val-phone-input", never, { "preset": { "alias": "preset"; "required": false; }; "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/pill/pill.component.d.ts

@@ -0,0 +1,33 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ThemeService } from '../../../services/theme.service';
+import { PillMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PillComponent implements OnInit, OnChanges {
+    theme: ThemeService;
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable pill configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
+     */
+    preset?: string;
+    /**
+     * Pill configuration object. Values here override preset values.
+     */
+    props: Partial<PillMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: PillMetadata;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PillComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "val-pill", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,9 @@
+import { ActionHeaderMetadata } from '../action-header/types';
+export type PillMetadata = {
+    token?: string;
+    image?: string;
+    bordered?: boolean;
+    background?: string;
+    hoverable?: boolean;
+    content: ActionHeaderMetadata;
+};

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

@@ -0,0 +1,21 @@
+import { OnInit } from '@angular/core';
+import { NgOtpInputComponent, NgOtpInputConfig } from 'ng-otp-input';
+import { PinInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PinInputComponent implements OnInit {
+    pinCode: NgOtpInputComponent | undefined;
+    /**
+     * Input configuration object.
+     * @type {PinInputMetadata}
+     * @property control - The Angular FormControl for the PIN input.
+     * @property length - Number of digits in PIN (default: 5).
+     */
+    props: PinInputMetadata;
+    codeLength: number;
+    otpInputConfig: NgOtpInputConfig;
+    constructor();
+    ngOnInit(): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PinInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PinInputComponent, "val-pin-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,69 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Size options for PIN input component.
+ */
+export type PinInputSize = 'small' | 'medium' | 'large';
+/**
+ * Metadata for the PIN input component.
+ */
+export interface PinInputMetadata {
+    /** Form control for the PIN value (stores string, optional when used in val-form) */
+    control?: FormControl<string | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Number of digits in PIN (default: 5) */
+    length?: number;
+    /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium') */
+    size?: PinInputSize;
+    /** Allow only numbers */
+    allowNumbersOnly?: boolean;
+    /** Mask input (show dots instead of characters) */
+    mask?: boolean;
+    /** Mask character to display */
+    maskChar?: string;
+    /** Disable paste functionality */
+    disablePaste?: boolean;
+    /** Auto focus first input */
+    autoFocus?: boolean;
+    /** Auto submit when complete */
+    autoSubmit?: boolean;
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Input box styles */
+    inputStyles?: Record<string, string>;
+    /** Input box class */
+    inputClass?: string;
+    /** Content key for reactive label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if content key is not found */
+    contentFallback?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}
+/**
+ * Event emitted when PIN input changes.
+ */
+export interface PinInputChangeEvent {
+    /** Current PIN value */
+    value: string;
+    /** Whether the PIN is complete */
+    isComplete: boolean;
+    /** Number of digits entered */
+    length: number;
+}

package/lib/components/molecules/plain-code-box/plain-code-box.component.d.ts

@@ -0,0 +1,22 @@
+import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-typescript';
+import { PlainCodeBoxMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PlainCodeBoxComponent implements AfterViewInit, OnChanges {
+    private toast;
+    private cdr;
+    private i18n;
+    props: PlainCodeBoxMetadata;
+    codeBlock: ElementRef<HTMLElement>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private highlightCode;
+    copyCode(): Promise<void>;
+    presentToast(message: string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlainCodeBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlainCodeBoxComponent, "val-plain-code-box", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/plain-code-box/types.d.ts

@@ -0,0 +1,10 @@
+export type CodeLineType = 'normal' | 'command' | 'success' | 'error';
+export type CodeLine = {
+    text: string;
+    type?: CodeLineType;
+};
+export type PlainCodeBoxMetadata = {
+    lines: CodeLine[];
+    showCopyButton?: boolean;
+    language?: string;
+};

package/lib/components/molecules/popover-selector/popover-selector.component.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '@angular/core';
+import { PopoverSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PopoverSelectorComponent {
+    /**
+     * Popover selector configuration object.
+     * @type {PopoverSelectorMetadata}
+     */
+    props: PopoverSelectorMetadata;
+    /**
+     * Event emitted when the selection changes.
+     * Emits the selected value(s).
+     */
+    selectionChange: EventEmitter<string | string[]>;
+    private i18n;
+    constructor();
+    /**
+     * Get placeholder text.
+     */
+    getPlaceholderText(): string;
+    /**
+     * Get cancel text.
+     */
+    getCancelText(): string;
+    /**
+     * Get ok text.
+     */
+    getOkText(): string;
+    /**
+     * Handle selection change from the ion-select.
+     * @param event - The ion-select change event
+     */
+    onSelectionChange(event: any): void;
+    /**
+     * Get the display text for the trigger button.
+     * Shows the selected option's label or placeholder.
+     * @returns The display text
+     */
+    getDisplayText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverSelectorComponent, "val-popover-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/popover-selector/types.d.ts

@@ -0,0 +1,69 @@
+import { Color } from '@ionic/core';
+/**
+ * Option for the popover selector.
+ */
+export interface PopoverOption {
+    /** Option value */
+    value: string;
+    /** Option display label */
+    label: string;
+    /** Option icon (optional) */
+    icon?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for val-popover-selector component.
+ * A generic reusable popover selector component.
+ *
+ * @property options - Array of selectable options.
+ * @property selectedValue - Currently selected value.
+ * @property label - Display label for the selector.
+ * @property icon - Icon to display in the trigger button (optional).
+ * @property placeholder - Placeholder text when no option is selected.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property interface - Popover interface style ('popover' | 'action-sheet' | 'alert').
+ * @property showCheckmark - Whether to show checkmarks for selected options.
+ * @property multiple - Whether multiple selection is allowed.
+ * @property cancelText - Text for cancel button.
+ * @property okText - Text for OK button.
+ */
+export interface PopoverSelectorMetadata {
+    /** Array of selectable options */
+    options: PopoverOption[];
+    /** Currently selected value(s) */
+    selectedValue?: string | string[];
+    /** Display label for the selector */
+    label?: string;
+    /** Icon to display in the trigger */
+    icon?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Button color */
+    color?: Color;
+    /** Button size */
+    size?: 'small' | 'default' | 'large';
+    /** Button fill style */
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /** Button shape */
+    shape?: 'round';
+    /** Button expansion */
+    expand?: 'full' | 'block';
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Popover interface style */
+    interface?: 'popover' | 'action-sheet' | 'alert';
+    /** Whether to show checkmarks for selected options */
+    showCheckmark?: boolean;
+    /** Whether multiple selection is allowed */
+    multiple?: boolean;
+    /** Cancel button text */
+    cancelText?: string;
+    /** OK button text */
+    okText?: string;
+}

package/lib/components/molecules/progress-status/progress-status.component.d.ts

@@ -0,0 +1,23 @@
+import { OnInit } from '@angular/core';
+import { ProgressStatusMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ProgressStatusComponent implements OnInit {
+    /**
+     * Progress status configuration object.
+     * @type {ProgressStatusMetadata}
+     * @property progress - The progress value (0 to 1).
+     * @property color - The color of the progress bar.
+     * @property size - The size of the text and bar.
+     * @property titles - Title block configuration.
+     * @property messages - Array of status messages.
+     */
+    props: ProgressStatusMetadata;
+    currentIndex: number;
+    blinking: boolean;
+    constructor();
+    ngOnInit(): void;
+    get Content(): string;
+    getNextMessage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressStatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressStatusComponent, "val-progress-status", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/progress-status/types.d.ts

@@ -0,0 +1,20 @@
+import { Color } from '@ionic/core';
+import { TitleBlockMetada } from '../title-block/types';
+/**
+ * Props for val-progress-status component.
+ *
+ * @property progress - The progress value (0 to 1).
+ * @property titles - Title block configuration.
+ * @property color - The color of the progress bar.
+ * @property size - The size of the text and bar (optional).
+ * @property type - The type of progress bar (optional).
+ * @property messages - Array of status messages.
+ */
+export type ProgressStatusMetadata = {
+    progress: number;
+    titles: TitleBlockMetada;
+    color: Color;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    type?: 'determinate' | 'indeterminate';
+    messages: string[];
+};

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

@@ -0,0 +1,10 @@
+import { EventEmitter } from '@angular/core';
+import { PrompterMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PrompterComponent {
+    props: PrompterMetadata;
+    onClick: EventEmitter<string>;
+    clickHandler(token?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrompterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrompterComponent, "val-prompter", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}