valtech-components 2.0.821 → 2.0.824

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

@@ -0,0 +1,367 @@
+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. Puede contener `<strong>`/`<b>` si `allowPartialBold` está activo. */
+        text: string;
+        /** Prefijo en negrita (ej: "Nota:"). Pasa `''` (string vacío) para suprimir el prefijo. */
+        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;
+        /** Renderiza `<strong>`/`<b>` inline en `text` via innerHTML. Default `false`. */
+        allowPartialBold?: boolean;
+        /** Procesa URLs y `[text](url)` en `text`. Default `false`. */
+        processLinks?: boolean;
+        /** Compact mode — inline-block fit-content, padding reducido, sin left-border. */
+        compact?: boolean;
+        /** Alineación del texto. Default `'left'`. */
+        align?: 'left' | 'center' | 'right';
+    };
+}
+/**
+ * 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;
+}

package/lib/components/organisms/avatar-upload/avatar-upload.component.d.ts

@@ -0,0 +1,84 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { AvatarUploadError, AvatarUploadMetadata, AvatarUploadResult } from './types';
+import * as i0 from "@angular/core";
+/**
+ * AvatarUploadComponent
+ *
+ * A complete avatar upload solution with:
+ * - Image selection from device
+ * - Crop modal with round preview
+ * - Automatic compression and thumbnail generation
+ * - Upload to Firebase Storage
+ * - Backend sync via AuthService
+ *
+ * @example Basic usage
+ * ```html
+ * <val-avatar-upload
+ *   [props]="{
+ *     currentUrl: user()?.avatarUrl,
+ *     initials: 'JD',
+ *     size: 120
+ *   }"
+ *   (uploaded)="onAvatarUploaded($event)"
+ *   (error)="onError($event)"
+ * />
+ * ```
+ */
+export declare class AvatarUploadComponent {
+    private imageService;
+    private storageService;
+    private authService;
+    private i18n;
+    fileInput: ElementRef<HTMLInputElement>;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<AvatarUploadMetadata>;
+    /** Emitted after successful upload and backend sync */
+    uploaded: EventEmitter<AvatarUploadResult>;
+    /** Emitted on any error during the process */
+    error: EventEmitter<AvatarUploadError>;
+    /** Emitted when upload starts */
+    uploadStart: EventEmitter<void>;
+    protected loading: import("@angular/core").WritableSignal<boolean>;
+    protected showCropModal: import("@angular/core").WritableSignal<boolean>;
+    protected selectedFile: import("@angular/core").WritableSignal<File>;
+    protected previewUrl: import("@angular/core").WritableSignal<string>;
+    protected imageLoadError: import("@angular/core").WritableSignal<boolean>;
+    /** Merged config with defaults */
+    protected config: import("@angular/core").Signal<{
+        currentUrl?: string;
+        initials?: string;
+        backgroundColor: string;
+        size: number;
+        editable: boolean;
+        storagePath: string;
+        i18nNamespace: string;
+        maxFileSize: number;
+        compressQuality: number;
+        maxWidth: number;
+        thumbnailSize: number;
+    }>;
+    /** URL to display (preview takes priority over current) */
+    protected displayUrl: import("@angular/core").Signal<string>;
+    /** Aria label for edit button */
+    protected editButtonLabel: import("@angular/core").Signal<string>;
+    /** Open file picker dialog */
+    openFilePicker(): void;
+    /** Handle file selection */
+    onFileSelected(event: Event): void;
+    /** Handle crop completion */
+    onCropComplete(croppedBlob: Blob): Promise<void>;
+    /** Handle crop cancel */
+    onCropCancel(): void;
+    /** Handle crop load failure */
+    onCropLoadFailed(): void;
+    /** Handle image load error */
+    onImageError(): void;
+    /** Timeout for upload operations (30 seconds) */
+    private static readonly UPLOAD_TIMEOUT_MS;
+    /** Process cropped image and upload */
+    private processAndUpload;
+    /** Emit error event */
+    private emitError;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarUploadComponent, "val-avatar-upload", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "uploaded": "uploaded"; "error": "error"; "uploadStart": "uploadStart"; }, never, never, true, never>;
+}

package/lib/components/organisms/avatar-upload/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Configuration for AvatarUploadComponent
+ */
+export interface AvatarUploadMetadata {
+    /** Current avatar URL */
+    currentUrl?: string;
+    /** Initials to show when no avatar (e.g., "JD" for John Doe) */
+    initials?: string;
+    /** Background color for initials avatar */
+    backgroundColor?: string;
+    /** Avatar size in pixels (default: 100) */
+    size?: number;
+    /** Show edit button (default: true) */
+    editable?: boolean;
+    /** Storage path prefix without userId (default: 'avatars') */
+    storagePath?: string;
+    /** i18n namespace for labels (default: 'AvatarUpload') */
+    i18nNamespace?: string;
+    /** Max file size in bytes (default: 10MB) */
+    maxFileSize?: number;
+    /** Quality for compressed image 0-1 (default: 0.8) */
+    compressQuality?: number;
+    /** Max width for avatar (default: 800) */
+    maxWidth?: number;
+    /** Thumbnail size (default: 150) */
+    thumbnailSize?: number;
+}
+/**
+ * Result emitted after successful upload
+ */
+export interface AvatarUploadResult {
+    /** Full-size avatar URL */
+    avatarUrl: string;
+    /** Thumbnail URL */
+    thumbnailUrl: string;
+}
+/**
+ * Error types that can occur during upload
+ */
+export type AvatarUploadErrorType = 'invalidType' | 'fileTooLarge' | 'uploadFailed' | 'backendFailed' | 'cancelled';
+/**
+ * Error object emitted on failure
+ */
+export interface AvatarUploadError {
+    type: AvatarUploadErrorType;
+    message: string;
+    originalError?: unknown;
+}
+/**
+ * Default values
+ */
+export declare const AVATAR_UPLOAD_DEFAULTS: {
+    size: number;
+    editable: boolean;
+    storagePath: string;
+    i18nNamespace: string;
+    maxFileSize: number;
+    compressQuality: number;
+    maxWidth: number;
+    thumbnailSize: number;
+    backgroundColor: string;
+};

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

@@ -0,0 +1,16 @@
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { BannerMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class BannerComponent implements OnInit, OnChanges {
+    private cdr;
+    props: BannerMetadata;
+    onClick: EventEmitter<string>;
+    onClose: EventEmitter<any>;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    clickHandler(token?: string): void;
+    closeHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "val-banner", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; "onClose": "onClose"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,29 @@
+import { Color } from '@ionic/core';
+import { ButtonGroupMetadata } from '../../molecules/button-group/types';
+import { TitleBlockMetada } from '../../molecules/title-block/types';
+/**
+ * Props for val-banner component.
+ *
+ * @property token - Optional identifier for the banner.
+ * @property image - Optional image for the banner.
+ * @property color - The background color of the banner.
+ * @property bordered - Whether the banner has a border.
+ * @property closable - Whether the banner can be closed.
+ * @property mode - Banner display mode ('row' | 'column' | 'hybrid' | 'center').
+ * @property alignment - Content alignment ('center' | 'middle' | 'bottom').
+ * @property actions - Button group configuration (optional).
+ * @property content - Title block content configuration.
+ * @property padding - Custom padding for the banner (optional).
+ */
+export type BannerMetadata = {
+    token?: string;
+    image?: string;
+    color: Color;
+    bordered: boolean;
+    closable: boolean;
+    mode: 'row' | 'column' | 'hybrid' | 'center';
+    alignment: 'center' | 'middle' | 'bottom';
+    actions?: ButtonGroupMetadata;
+    content: TitleBlockMetada;
+    padding?: string;
+};

package/lib/components/organisms/bottom-nav/bottom-nav.component.d.ts

@@ -0,0 +1,91 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { BottomNavMetadata, BottomNavTab, BottomNavClickEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-bottom-nav
+ *
+ * A modern bottom navigation bar component with support for tabs,
+ * optional central FAB button, badges, and route-based active state detection.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-bottom-nav
+ *   [props]="{
+ *     tabs: [
+ *       { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
+ *       { token: 'settings', icon: { default: 'settings-outline', active: 'settings' }, label: 'Settings', route: '/app/settings' }
+ *     ]
+ *   }"
+ *   (tabClick)="onTabClick($event)"
+ * />
+ * ```
+ *
+ * @example With i18n and translucent theme
+ * ```html
+ * <val-bottom-nav
+ *   [props]="{
+ *     tabs: [
+ *       { token: 'home', icon: { default: 'home-outline' }, labelKey: 'menuHome', route: '/app/home' },
+ *       { token: 'settings', icon: { default: 'settings-outline' }, labelKey: 'menuSettings', route: '/app/settings' }
+ *     ],
+ *     i18nNamespace: 'Menu',
+ *     theme: { translucent: true }
+ *   }"
+ * />
+ * ```
+ */
+export declare class BottomNavComponent implements OnInit, OnDestroy {
+    private router;
+    private navigation;
+    private i18n;
+    private routerSubscription?;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<BottomNavMetadata>;
+    /** Event emitted when a tab is clicked */
+    tabClick: EventEmitter<BottomNavClickEvent>;
+    /** Event emitted when the FAB button is clicked */
+    fabClick: EventEmitter<void>;
+    /** Current active route signal for reactive updates */
+    private currentRoute;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<{
+        theme: {
+            background: string;
+            activeColor: string | (string & Record<never, never>);
+            inactiveColor: string | (string & Record<never, never>);
+            borderRadius: string;
+            elevated: boolean;
+            translucent: boolean;
+            floating: boolean;
+        };
+        tabs: BottomNavTab[];
+        fab?: import("./types").BottomNavFab;
+        i18nNamespace?: string;
+        hideLabels: boolean;
+        safeArea: boolean;
+        animation: "none" | "slide" | "fade" | "scale";
+        maxWidth: string;
+    }>;
+    /** Computed tabs with FAB inserted if present */
+    displayTabs: import("@angular/core").Signal<BottomNavTab[]>;
+    /** Check if a tab is currently active */
+    isActive(tab: BottomNavTab): boolean;
+    /** Get the appropriate icon for a tab based on active state */
+    getIcon(tab: BottomNavTab): string;
+    /** Get translated label for a tab */
+    getLabel(tab: BottomNavTab): string;
+    /** Get CSS variables for theming */
+    getThemeStyles(): Record<string, string>;
+    /** Resolve maxWidth token (sm|md|lg|xl|full) to CSS var or raw value */
+    resolveMaxWidth(v?: string): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Handle tab click */
+    onTabClick(tab: BottomNavTab): void;
+    /** Handle FAB click */
+    onFabClick(): void;
+    /** Resolve Ionic color name to CSS variable */
+    resolveColor(color?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BottomNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BottomNavComponent, "val-bottom-nav", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "tabClick": "tabClick"; "fabClick": "fabClick"; }, never, never, true, never>;
+}