valtech-components 2.0.691 → 2.0.692

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

@@ -0,0 +1,45 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { UsernameInputMetadata, UsernameAvailabilityStatus } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Username Input Component
+ *
+ * Input especializado para usernames/handles con:
+ * - Prefijo '@' visual
+ * - Validación de formato (alfanuméricos y _)
+ * - Normalización automática (lowercase, sin espacios)
+ * - Verificación de disponibilidad con debounce
+ * - Estados visuales: available, taken, checking
+ *
+ * @example
+ * <val-username-input
+ *   [props]="{
+ *     control: usernameControl,
+ *     label: 'Nombre de usuario',
+ *     placeholder: 'tu_username',
+ *     checkAvailability: checkFn
+ *   }"
+ * />
+ */
+export declare class UsernameInputComponent implements OnInit, OnDestroy {
+    props: UsernameInputMetadata;
+    private destroy$;
+    private checkAvailability$;
+    isFocused: import("@angular/core").WritableSignal<boolean>;
+    availabilityStatus: import("@angular/core").WritableSignal<UsernameAvailabilityStatus>;
+    hasError: import("@angular/core").Signal<boolean>;
+    showStatusMessage: import("@angular/core").Signal<boolean>;
+    statusColor: import("@angular/core").Signal<"success" | "danger">;
+    statusMessage: import("@angular/core").Signal<"" | "Username disponible" | "Username ya está en uso">;
+    errorMessage: import("@angular/core").Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onFocus(): void;
+    onBlur(): void;
+    onInput(event: CustomEvent): void;
+    private setupAvailabilityCheck;
+    private normalizeUsername;
+    private isValidFormat;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UsernameInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UsernameInputComponent, "val-username-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/winner-display/types.d.ts

@@ -0,0 +1,103 @@
+import { Color } from '@ionic/core';
+import { AvatarMetadata } from '../../atoms/avatar/types';
+/**
+ * Winner information.
+ */
+export interface WinnerInfo {
+    /** Winner's name */
+    name: string;
+    /** Winner's ticket number */
+    ticketNumber: number | string;
+    /** Winner's avatar */
+    avatar?: AvatarMetadata;
+    /** Prize won */
+    prize?: string;
+    /** Prize description */
+    prizeDescription?: string;
+    /** Prize image URL */
+    prizeImage?: string;
+    /** Prize value */
+    prizeValue?: number;
+    /** Winner's location (city, country) */
+    location?: string;
+    /** Additional winner info */
+    customData?: Record<string, any>;
+}
+/**
+ * Animation type for winner reveal.
+ */
+export type WinnerAnimationType = 'none' | 'fade' | 'zoom' | 'slide' | 'confetti' | 'spotlight';
+/**
+ * Display mode for the winner.
+ */
+export type WinnerDisplayMode = 'compact' | 'standard' | 'full' | 'celebration';
+/**
+ * Metadata for the winner display component.
+ */
+export interface WinnerDisplayMetadata {
+    /** Winner information */
+    winner: WinnerInfo;
+    /** Display mode */
+    mode?: WinnerDisplayMode;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show confetti animation */
+    showConfetti?: boolean;
+    /** Show trophy icon */
+    showTrophy?: boolean;
+    /** Show ticket number */
+    showTicketNumber?: boolean;
+    /** Show prize info */
+    showPrize?: boolean;
+    /** Show prize value */
+    showPrizeValue?: boolean;
+    /** Show location */
+    showLocation?: boolean;
+    /** Number padding for ticket */
+    numberPadding?: number;
+    /** Animation type */
+    animation?: WinnerAnimationType;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Delay before showing (for suspense) */
+    revealDelay?: number;
+    /** Auto-play animation on init */
+    autoPlay?: boolean;
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Background style */
+    background?: 'solid' | 'gradient' | 'transparent';
+    /** Winner label (e.g., "¡Ganador!") */
+    winnerLabel?: string;
+    /** Ticket label (e.g., "Boleto #") */
+    ticketLabel?: string;
+    /** Prize label (e.g., "Premio:") */
+    prizeLabel?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Content key for winner label */
+    winnerLabelContentKey?: string;
+    /** Content key for ticket label */
+    ticketLabelContentKey?: string;
+    /** Content key for prize label */
+    prizeLabelContentKey?: string;
+}
+/**
+ * Event emitted when animation completes.
+ */
+export interface WinnerDisplayAnimationEvent {
+    /** Animation type that completed */
+    animation: WinnerAnimationType;
+    /** Winner info */
+    winner: WinnerInfo;
+}
+/**
+ * Default labels.
+ */
+export declare const DEFAULT_WINNER_LABELS: {
+    winner: string;
+    ticket: string;
+    prize: string;
+};

package/lib/components/molecules/winner-display/winner-display.component.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
+import { WinnerDisplayMetadata, WinnerDisplayAnimationEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class WinnerDisplayComponent implements OnInit, OnDestroy, AfterViewInit {
+    props: WinnerDisplayMetadata;
+    animationComplete: EventEmitter<WinnerDisplayAnimationEvent>;
+    isAnimating: boolean;
+    isRevealed: boolean;
+    showConfetti: boolean;
+    confettiPieces: number[];
+    private revealTimeout;
+    private animationTimeout;
+    private elementRef;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    startReveal(): void;
+    /**
+     * Manually trigger the reveal animation.
+     */
+    reveal(): void;
+    /**
+     * Reset to initial state.
+     */
+    reset(): void;
+    formatTicketNumber(): string;
+    formatPrizeValue(): string;
+    getRandomX(index: number): string;
+    getRandomRotation(index: number): string;
+    getWinnerLabel(): string;
+    getTicketLabel(): string;
+    getPrizeLabel(): string;
+    getColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WinnerDisplayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WinnerDisplayComponent, "val-winner-display", never, { "props": { "alias": "props"; "required": false; }; }, { "animationComplete": "animationComplete"; }, never, never, true, never>;
+}

package/lib/components/organisms/article/article.component.d.ts

@@ -0,0 +1,108 @@
+import { OnInit } from '@angular/core';
+import { ImageMetadata } from '../../atoms/image/types';
+import { CodeDisplayMetadata } from '../../molecules/code-display/types';
+import { NotesBoxMetadata } from '../../molecules/notes-box/types';
+import { PlainCodeBoxMetadata } from '../../molecules/plain-code-box/types';
+import { ArticleButtonElement, ArticleCodeElement, ArticleCommandElement, ArticleCustomElement, ArticleElement, ArticleHighlightElement, ArticleImageElement, ArticleListElement, ArticleMetadata, ArticleNoteElement, ArticleQuoteElement, ArticleSeparatorElement, ArticleSubtitleElement, ArticleTextElement, ArticleTitleElement, ArticleVideoElement } from './types';
+import * as i0 from "@angular/core";
+export declare class ArticleComponent implements OnInit {
+    /**
+     * Configuración del artículo
+     * @type {ArticleMetadata}
+     */
+    props: ArticleMetadata;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Obtiene los estilos de padding para el contenedor article
+     */
+    getContainerStyles(): {
+        [key: string]: string;
+    };
+    /**
+     * Función de trackBy para optimizar el rendering de elementos
+     */
+    trackByFn(index: number, element: ArticleElement): any;
+    /**
+     * Obtiene el espaciado por defecto según el tipo de elemento
+     */
+    private getDefaultSpacingForType;
+    /**
+     * Obtiene las clases CSS para el espaciado del elemento.
+     * Prioridad: element.spacing > elementSpacing > espaciado nativo por tipo
+     */
+    getElementSpacingClass(element: ArticleElement): string;
+    getTitleElement(element: ArticleElement): ArticleTitleElement;
+    getSubtitleElement(element: ArticleElement): ArticleSubtitleElement;
+    getTextElement(element: ArticleElement): ArticleTextElement;
+    getQuoteElement(element: ArticleElement): ArticleQuoteElement;
+    getHighlightElement(element: ArticleElement): ArticleHighlightElement;
+    getCodeElement(element: ArticleElement): ArticleCodeElement;
+    getListElement(element: ArticleElement): ArticleListElement;
+    getButtonElement(element: ArticleElement): ArticleButtonElement;
+    getSeparatorElement(element: ArticleElement): ArticleSeparatorElement;
+    getImageElement(element: ArticleElement): ArticleImageElement;
+    getVideoElement(element: ArticleElement): ArticleVideoElement;
+    getCustomElement(element: ArticleElement): ArticleCustomElement;
+    getQuoteTextProps(element: ArticleElement): {
+        size: "small" | "medium" | "large" | "xlarge";
+        color: import("@ionic/core").Color;
+        content?: string;
+        bold: boolean;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        processLinks?: boolean;
+        linkConfig?: import("valtech-components").LinkProcessorConfig;
+        allowPartialBold?: boolean;
+        authorColor?: import("@ionic/core").Color;
+        alignment?: "left" | "center" | "right";
+        showQuoteMark?: boolean;
+    };
+    getHighlightTextProps(element: ArticleElement): {
+        size: "small" | "medium" | "large" | "xlarge";
+        color: import("@ionic/core").Color;
+        content?: string;
+        bold: boolean;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        processLinks?: boolean;
+        linkConfig?: import("valtech-components").LinkProcessorConfig;
+        allowPartialBold?: boolean;
+    };
+    getHighlightColor(element: ArticleElement): string;
+    getButtonProps(element: ArticleElement): {
+        actionType?: import("valtech-components").ActionType;
+        expand?: "full" | "block";
+        link?: string;
+        href?: string;
+        target?: "_blank" | "_self" | "_parent" | "_top";
+        download?: string;
+        color: import("@ionic/core").Color;
+        state: import("valtech-components").ComponentState;
+        text?: string;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        icon?: import("valtech-components").IconMetada;
+        shape?: "round";
+        size?: "small" | "large" | "default";
+        fill?: "default" | "clear" | "outline" | "solid";
+        type: "button" | "submit" | "reset";
+        token?: string;
+        ref?: any;
+        handler?: (value: any) => any;
+    };
+    getCodeDisplayProps(element: ArticleElement): CodeDisplayMetadata;
+    getNoteElement(element: ArticleElement): ArticleNoteElement;
+    getCommandElement(element: ArticleElement): ArticleCommandElement;
+    getNoteBoxProps(element: ArticleElement): NotesBoxMetadata;
+    getCommandProps(element: ArticleElement): PlainCodeBoxMetadata;
+    getImageMetadata(element: ArticleElement): ImageMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleComponent, "val-article", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/organisms/article/types.d.ts

@@ -0,0 +1,359 @@
+import { Color } from '@ionic/core';
+import { TextMetadata } from '../../atoms/text/types';
+import { TitleMetadata } from '../../atoms/title/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Tipos de contenido soportados en el componente val-article
+ */
+export type ArticleContentType = 'title' | 'subtitle' | 'text' | 'paragraph' | 'quote' | 'highlight' | 'code' | 'note' | 'command' | 'list' | 'button' | 'separator' | 'image' | 'video' | 'custom';
+/**
+ * Configuración de espaciado entre elementos
+ */
+export interface ArticleSpacing {
+    /** Espaciado superior */
+    top?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+    /** Espaciado inferior */
+    bottom?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+    /** Espaciado lateral */
+    horizontal?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+}
+/**
+ * Configuración base para cualquier elemento del artículo
+ */
+export interface BaseArticleElement {
+    /** Tipo de elemento */
+    type: ArticleContentType;
+    /** ID único del elemento (opcional) */
+    id?: string;
+    /** Clases CSS adicionales */
+    cssClass?: string;
+    /** Configuración de espaciado */
+    spacing?: ArticleSpacing;
+    /** Elemento visible condicionalmente */
+    visible?: boolean;
+}
+/**
+ * Elemento de título
+ */
+export interface ArticleTitleElement extends BaseArticleElement {
+    type: 'title';
+    props: TitleMetadata;
+}
+/**
+ * Elemento de subtítulo
+ */
+export interface ArticleSubtitleElement extends BaseArticleElement {
+    type: 'subtitle';
+    props: TitleMetadata;
+}
+/**
+ * Elemento de texto/párrafo
+ */
+export interface ArticleTextElement extends BaseArticleElement {
+    type: 'text' | 'paragraph';
+    props: TextMetadata;
+}
+/**
+ * Elemento de cita
+ */
+export interface ArticleQuoteElement extends BaseArticleElement {
+    type: 'quote';
+    props: TextMetadata & {
+        /** Autor de la cita */
+        author?: string;
+        /** Fuente de la cita */
+        source?: string;
+        /** Color del nombre del autor */
+        authorColor?: Color;
+        /** Alineación del texto */
+        alignment?: 'left' | 'center' | 'right';
+        /** Mostrar comillas decorativas */
+        showQuoteMark?: boolean;
+    };
+}
+/**
+ * Elemento de texto destacado
+ */
+export interface ArticleHighlightElement extends BaseArticleElement {
+    type: 'highlight';
+    props: TextMetadata & {
+        /** Color de fondo del highlight */
+        backgroundColor?: Color;
+        /** Esquinas redondeadas */
+        rounded?: boolean;
+    };
+}
+/**
+ * Elemento de código
+ */
+export interface ArticleCodeElement extends BaseArticleElement {
+    type: 'code';
+    props: {
+        /** Código a mostrar */
+        code: string;
+        /** Lenguaje de programación */
+        language?: string;
+        /** Mostrar números de línea */
+        showLineNumbers?: boolean;
+        /** Tema del código */
+        theme?: 'light' | 'dark';
+    };
+}
+/**
+ * Elemento de nota destacada
+ */
+export interface ArticleNoteElement extends BaseArticleElement {
+    type: 'note';
+    props: {
+        /** Texto principal de la nota */
+        text: string;
+        /** Prefijo en negrita (ej: "Nota:") */
+        prefix?: string;
+        /** Color de fondo */
+        color?: Color;
+        /** Color del texto */
+        textColor?: Color;
+        /** Tamaño del texto */
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+        /** Esquinas redondeadas */
+        rounded?: boolean;
+        /** Padding personalizado */
+        padding?: string;
+    };
+}
+/**
+ * Elemento de comando de terminal
+ */
+export interface ArticleCommandElement extends BaseArticleElement {
+    type: 'command';
+    props: {
+        /** Líneas de comando */
+        lines: Array<{
+            /** Texto del comando */
+            text: string;
+            /** Tipo de línea */
+            type?: 'normal' | 'command' | 'success' | 'error';
+        }>;
+        /** Mostrar botón de copiar */
+        showCopyButton?: boolean;
+        /** Lenguaje (opcional) */
+        language?: string;
+    };
+}
+/**
+ * Elemento de lista
+ */
+export interface ArticleListElement extends BaseArticleElement {
+    type: 'list';
+    props: {
+        /** Elementos de la lista */
+        items: Array<{
+            /** Texto del elemento */
+            text: string;
+            /** Configuración de contenido reactivo */
+            contentKey?: string;
+            contentClass?: string;
+            contentFallback?: string;
+            contentInterpolation?: Record<string, string | number>;
+        }>;
+        /** Tipo de lista */
+        listType?: 'unordered' | 'ordered' | 'checklist';
+        /** Color de los elementos */
+        color?: Color;
+    };
+}
+/**
+ * Elemento de botón
+ */
+export interface ArticleButtonElement extends BaseArticleElement {
+    type: 'button';
+    props: ButtonMetadata & {
+        /** Alineación del botón */
+        alignment?: 'left' | 'center' | 'right';
+    };
+}
+/**
+ * Elemento separador
+ */
+export interface ArticleSeparatorElement extends BaseArticleElement {
+    type: 'separator';
+    props: {
+        /** Tipo de separador */
+        style?: 'line' | 'dots' | 'space';
+        /** Color del separador */
+        color?: Color;
+        /** Grosor del separador */
+        thickness?: 'thin' | 'medium' | 'thick';
+    };
+}
+/**
+ * Elemento de imagen
+ */
+export interface ArticleImageElement extends BaseArticleElement {
+    type: 'image';
+    props: {
+        /** URL de la imagen */
+        src: string;
+        /** Texto alternativo */
+        alt: string;
+        /** Título de la imagen */
+        title?: string;
+        /** Leyenda de la imagen */
+        caption?: string;
+        /** Configuración de contenido reactivo para caption */
+        captionContentKey?: string;
+        captionContentClass?: string;
+        captionContentFallback?: string;
+        /** Alineación de la imagen */
+        alignment?: 'left' | 'center' | 'right';
+        /** Ancho máximo */
+        maxWidth?: string;
+        /** Imagen con bordes redondeados */
+        rounded?: boolean;
+        /** Tamaño de la imagen */
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+        /** Modo preview (click para ampliar) */
+        preview?: boolean;
+    };
+}
+/**
+ * Elemento de video
+ */
+export interface ArticleVideoElement extends BaseArticleElement {
+    type: 'video';
+    props: {
+        /** URL del video */
+        src: string;
+        /** Imagen de poster */
+        poster?: string;
+        /** Título del video */
+        title?: string;
+        /** Controles visibles */
+        controls?: boolean;
+        /** Reproducción automática */
+        autoplay?: boolean;
+        /** Silenciado por defecto */
+        muted?: boolean;
+        /** Ancho máximo */
+        maxWidth?: string;
+    };
+}
+/**
+ * Elemento personalizado
+ */
+export interface ArticleCustomElement extends BaseArticleElement {
+    type: 'custom';
+    props: {
+        /** Contenido HTML personalizado */
+        htmlContent?: string;
+        /** Clase de componente personalizado */
+        componentClass?: any;
+        /** Props para el componente personalizado */
+        componentProps?: any;
+    };
+}
+/**
+ * Unión de todos los tipos de elementos posibles
+ */
+export type ArticleElement = ArticleTitleElement | ArticleSubtitleElement | ArticleTextElement | ArticleQuoteElement | ArticleHighlightElement | ArticleCodeElement | ArticleNoteElement | ArticleCommandElement | ArticleListElement | ArticleButtonElement | ArticleSeparatorElement | ArticleImageElement | ArticleVideoElement | ArticleCustomElement;
+/**
+ * Configuración del artículo completo
+ */
+export interface ArticleMetadata {
+    /** Elementos del artículo */
+    elements: ArticleElement[];
+    /** Padding interno del contenedor article */
+    containerSpacing?: ArticleSpacing;
+    /** Override global de spacing para elementos (prioridad sobre spacing por tipo) */
+    elementSpacing?: ArticleSpacing;
+    /** @deprecated Usar elementSpacing en su lugar */
+    defaultSpacing?: ArticleSpacing;
+    /** Ancho máximo del artículo */
+    maxWidth?: string;
+    /** Centrar el artículo */
+    centered?: boolean;
+    /** Tema del artículo */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Clases CSS adicionales */
+    cssClass?: string;
+}
+/**
+ * Configuración de espaciado predefinida
+ */
+export declare const ARTICLE_SPACING: {
+    readonly NONE: ArticleSpacing;
+    readonly SMALL: ArticleSpacing;
+    readonly MEDIUM: ArticleSpacing;
+    readonly LARGE: ArticleSpacing;
+    readonly XLARGE: ArticleSpacing;
+    readonly TITLE: ArticleSpacing;
+    readonly SUBTITLE: ArticleSpacing;
+    readonly PARAGRAPH: ArticleSpacing;
+    readonly QUOTE: ArticleSpacing;
+    readonly CODE: ArticleSpacing;
+    readonly NOTE: ArticleSpacing;
+    readonly COMMAND: ArticleSpacing;
+    readonly LIST: ArticleSpacing;
+    readonly BUTTON: ArticleSpacing;
+    readonly IMAGE: ArticleSpacing;
+    readonly SEPARATOR: ArticleSpacing;
+};
+/**
+ * Función helper para crear elementos de artículo de forma fácil
+ */
+export declare class ArticleBuilder {
+    private elements;
+    /**
+     * Añade un título al artículo
+     */
+    title(props: TitleMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un subtítulo al artículo
+     */
+    subtitle(props: TitleMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un párrafo al artículo
+     */
+    paragraph(props: TextMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una cita al artículo
+     */
+    quote(props: ArticleQuoteElement['props'], options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade código al artículo
+     */
+    code(code: string, language?: string, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una lista al artículo
+     */
+    list(items: ArticleListElement['props']['items'], listType?: ArticleListElement['props']['listType'], options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un botón al artículo
+     */
+    button(props: ButtonMetadata, alignment?: 'left' | 'center' | 'right', options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un separador al artículo
+     */
+    separator(style?: 'line' | 'dots' | 'space', options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una imagen al artículo
+     */
+    image(src: string, alt: string, caption?: string, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una nota destacada al artículo
+     */
+    note(text: string, prefix?: string, color?: Color, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un comando de terminal al artículo
+     * Acepta un string simple o un array de comandos
+     */
+    command(command: string | string[], options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Construye el artículo final
+     */
+    build(config?: Partial<ArticleMetadata>): ArticleMetadata;
+    /**
+     * Resetea el builder para crear un nuevo artículo
+     */
+    clear(): ArticleBuilder;
+}