valtech-components 2.0.821 → 2.0.824

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

@@ -0,0 +1,25 @@
+import { Color } from '@ionic/core';
+import { HrefMetadata } from '../../atoms/href/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Props for val-prompter component.
+ *
+ * @property teleprompter - Whether to use teleprompter style.
+ * @property bordered - Whether the box has a border.
+ * @property color - The background color of the box (optional).
+ * @property content - The main text content.
+ * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
+ * @property buttons - Array of button configurations (optional).
+ * @property hrefs - Array of link configurations (optional).
+ * @property padding - Custom padding for the box (optional).
+ */
+export type PrompterMetadata = {
+    teleprompter: boolean;
+    bordered: boolean;
+    color?: Color;
+    content: string;
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    buttons?: ButtonMetadata[];
+    hrefs?: HrefMetadata[];
+    padding?: string;
+};

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

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class RadioInputComponent implements OnInit {
+    /**
+     * Input configuration object.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the radio input.
+     * @property options - The available options for the radio group. For i18n, translate names before passing.
+     */
+    props: InputMetadata;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioInputComponent, "val-radio-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '@angular/core';
+import { RangeInputMetadata, RangeValue } from './types';
+import * as i0 from "@angular/core";
+export declare class RangeInputComponent {
+    /**
+     * 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";
+    };
+    defaultPinFormatter: (value: number) => string;
+    get displayLabel(): string;
+    onRangeChange(event: CustomEvent): void;
+    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,23 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { RatingMetadata, RatingChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class RatingComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<RatingMetadata>;
+    resolvedProps: RatingMetadata;
+    ratingChange: EventEmitter<RatingChangeEvent>;
+    hoverValue: number | null;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    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, { "preset": { "alias": "preset"; "required": false; }; "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/refresher/refresher.component.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { IonRefresher } from '@ionic/angular/standalone';
+import { RefresherMetadata, RefresherState, RefreshEvent, RefreshPullEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Componente de pull-to-refresh para movil y web.
+ *
+ * @example
+ * <!-- Uso basico -->
+ * <val-refresher
+ *   [props]="{
+ *     color: 'primary',
+ *     pullingText: 'Arrastra para actualizar',
+ *     refreshingText: 'Cargando...'
+ *   }"
+ *   (refresh)="onRefresh($event)"
+ * >
+ *   <ion-content>
+ *     <!-- Contenido scrolleable -->
+ *   </ion-content>
+ * </val-refresher>
+ *
+ * @example
+ * <!-- Con indicador personalizado -->
+ * <val-refresher [props]="{ color: 'primary' }" (refresh)="onRefresh($event)">
+ *   <ng-template #pullingIndicator let-progress="progress">
+ *     <div class="custom-indicator">
+ *       <ion-icon name="arrow-down" [style.transform]="'rotate(' + progress * 180 + 'deg)'"></ion-icon>
+ *     </div>
+ *   </ng-template>
+ *   <ion-content>...</ion-content>
+ * </val-refresher>
+ */
+export declare class RefresherComponent {
+    ionRefresher: IonRefresher;
+    /** Templates personalizados via content projection */
+    pullingIndicator?: TemplateRef<{
+        progress: number;
+    }>;
+    refreshingIndicator?: TemplateRef<void>;
+    completingIndicator?: TemplateRef<void>;
+    /** Configuracion del refresher */
+    props: RefresherMetadata;
+    /** Evento emitido cuando se activa el refresh */
+    refresh: EventEmitter<RefreshEvent>;
+    /** Evento de progreso durante el pull */
+    pullProgressChange: EventEmitter<RefreshPullEvent>;
+    /** Evento de cambio de estado */
+    stateChange: EventEmitter<RefresherState>;
+    private i18n;
+    /** Estado actual del refresher */
+    readonly state: import("@angular/core").WritableSignal<RefresherState>;
+    /** Progreso actual del pull (0-1) */
+    readonly pullProgress: import("@angular/core").WritableSignal<number>;
+    /** Get pulling text with i18n fallback */
+    getPullingText(): string;
+    /** Get refreshing text with i18n fallback */
+    getRefreshingText(): string;
+    /** Props combinados con defaults */
+    get mergedProps(): RefresherMetadata;
+    /** Si hay indicadores personalizados */
+    get hasCustomIndicator(): boolean;
+    /**
+     * Activa programaticamente el refresh.
+     */
+    triggerRefresh(): void;
+    /**
+     * Completa la operacion de refresh actual.
+     */
+    complete(): void;
+    /**
+     * Cancela la operacion de refresh actual.
+     */
+    cancel(): void;
+    /** Handler para evento ionRefresh */
+    onIonRefresh(event: CustomEvent): void;
+    /** Handler para evento ionPull */
+    onIonPull(event: CustomEvent): void;
+    /** Handler para evento ionStart */
+    onIonStart(): void;
+    private emitRefreshEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RefresherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RefresherComponent, "val-refresher", never, { "props": { "alias": "props"; "required": false; }; }, { "refresh": "refresh"; "pullProgressChange": "pullProgressChange"; "stateChange": "stateChange"; }, ["pullingIndicator", "refreshingIndicator", "completingIndicator"], ["*"], true, never>;
+}

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

@@ -0,0 +1,86 @@
+import { TemplateRef } from '@angular/core';
+import { Color } from '@ionic/core';
+/**
+ * Estado del componente refresher.
+ */
+export type RefresherState = 'idle' | 'pulling' | 'refreshing' | 'completing';
+/**
+ * Tipos de spinner disponibles.
+ */
+export type RefresherSpinnerType = 'circular' | 'crescent' | 'dots' | 'lines-sharp';
+/**
+ * Evento emitido cuando se activa el refresh.
+ */
+export interface RefreshEvent {
+    /** Llamar cuando la operacion de refresh completa */
+    complete: () => void;
+    /** Llamar para cancelar el refresh */
+    cancel: () => void;
+    /** Timestamp cuando inicio el refresh */
+    timestamp: Date;
+}
+/**
+ * Evento de progreso durante el gesto de pull.
+ */
+export interface RefreshPullEvent {
+    /** Valor de progreso entre 0 y 1 */
+    progress: number;
+    /** Si se ha alcanzado el umbral de pull */
+    thresholdReached: boolean;
+}
+/**
+ * Configuracion de indicador personalizado.
+ */
+export interface RefresherIndicatorConfig {
+    /** Template personalizado para estado pulling */
+    pullingTemplate?: TemplateRef<{
+        progress: number;
+    }>;
+    /** Template personalizado para estado refreshing */
+    refreshingTemplate?: TemplateRef<void>;
+    /** Template personalizado para estado completing */
+    completingTemplate?: TemplateRef<void>;
+}
+/**
+ * Metadata para el componente val-refresher.
+ */
+export interface RefresherMetadata {
+    /** Si el refresher esta deshabilitado */
+    disabled?: boolean;
+    /** Umbral de pull en pixels (default: 70) */
+    pullThreshold?: number;
+    /** Distancia maxima de pull en pixels (default: 200) */
+    pullMax?: number;
+    /** Factor de resistencia del pull (0-1, default: 0.5) */
+    pullFactor?: number;
+    /** Duracion de snap back en ms (default: 280) */
+    snapbackDuration?: number;
+    /** Duracion de cierre en ms (default: 280) */
+    closeDuration?: number;
+    /** Color del spinner */
+    color?: Color;
+    /** Tipo de spinner */
+    spinnerType?: RefresherSpinnerType;
+    /** Texto mostrado mientras se arrastra */
+    pullingText?: string;
+    /** Texto mostrado mientras se actualiza */
+    refreshingText?: string;
+    /** Configuracion de indicador personalizado */
+    indicatorConfig?: RefresherIndicatorConfig;
+    /** Habilitar feedback haptico en movil (default: true) */
+    hapticFeedback?: boolean;
+    /** Modo web - habilita pull-to-refresh en navegadores desktop */
+    webMode?: boolean;
+    /** Identificador unico */
+    token?: string;
+    /** Key de traduccion para texto pulling */
+    pullingTextKey?: string;
+    /** Key de traduccion para texto refreshing */
+    refreshingTextKey?: string;
+    /** Clase CSS adicional */
+    contentClass?: string;
+}
+/**
+ * Valores por defecto para el refresher.
+ */
+export declare const DEFAULT_REFRESHER_METADATA: Partial<RefresherMetadata>;

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

@@ -0,0 +1,43 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { SearchbarMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class SearchbarComponent implements OnInit, OnChanges {
+    private presets;
+    private i18n;
+    /**
+     * Preset name to apply.
+     */
+    preset?: string;
+    /**
+     * Configuration object. Values here override preset values.
+     */
+    props: Partial<SearchbarMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: SearchbarMetadata;
+    /**
+     * Emits the search term on input.
+     */
+    filterEvent: EventEmitter<string>;
+    /**
+     * Emits when the searchbar gains focus.
+     */
+    focusEvent: EventEmitter<void>;
+    /**
+     * Emits when the searchbar loses focus.
+     */
+    blurEvent: EventEmitter<void>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    /** Get placeholder text */
+    getPlaceholder(): string;
+    /** Get cancel button text */
+    getCancelText(): string;
+    onSearch($event: any): void;
+    onFocus(): void;
+    onBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchbarComponent, "val-searchbar", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "filterEvent": "filterEvent"; "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Configuration for val-searchbar component.
+ */
+export interface SearchbarMetadata {
+    /**
+     * Whether the searchbar is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom placeholder text.
+     * If not provided, uses i18n default ('search').
+     */
+    placeholder?: string;
+    /**
+     * Custom cancel button text.
+     * If not provided, uses i18n default ('cancel').
+     */
+    cancelText?: string;
+    /**
+     * Debounce time in milliseconds for search input.
+     * Default: 500
+     */
+    debounce?: number;
+    /**
+     * When to show the cancel button.
+     * Default: 'focus'
+     */
+    showCancelButton?: 'always' | 'focus' | 'never';
+    /**
+     * Mode for styling (iOS or MD).
+     */
+    mode?: 'ios' | 'md';
+}

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

@@ -0,0 +1,35 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { SegmentControlMetadata, SegmentOption } from './types';
+import * as i0 from "@angular/core";
+export declare class SegmentControlComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable segment configurations.
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     */
+    props: Partial<SegmentControlMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: SegmentControlMetadata;
+    /**
+     * Emits the selected value when the segment changes.
+     */
+    segmentChange: EventEmitter<string>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    onSegmentChange(event: CustomEvent): void;
+    getOptionLabel(option: SegmentOption): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SegmentControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SegmentControlComponent, "val-segment-control", never, { "preset": { "alias": "preset"; "required": false; }; "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/select-input/select-input.component.d.ts

@@ -0,0 +1,57 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class SearchSelectorComponent implements OnInit, OnChanges {
+    private i18n;
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-select-input preset="form-field" [props]="{ control: ctrl, options: opts }"></val-select-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the select input.
+     * @property label - The label for the select.
+     * @property options - The available options for the select.
+     * @property placeholder - The placeholder text.
+     * @property modalHeader - Custom header text for the modal (optional, uses label if not provided).
+     * @property cancelText - Custom cancel button text (default: 'Cancelar').
+     * @property okText - Custom OK button text (default: 'Aceptar').
+     */
+    props: Partial<InputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: InputMetadata;
+    customModalOptions: {
+        header: string;
+        breakpoints: number[];
+        initialBreakpoint: number;
+    };
+    customPopoverOptions: {
+        cssClass: string;
+    };
+    cancelText: string;
+    okText: string;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private setupComponent;
+    /**
+     * Busca un key en `_global` primero, luego en `Common`, finalmente cae al
+     * default hardcoded. Útil para textos cross-cutting (cancel/ok/close/etc.)
+     * sin obligar a cada app a duplicarlos en cada namespace.
+     */
+    private resolveI18n;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchSelectorComponent, "val-select-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}