valtech-components 2.0.795 → 2.0.796

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

@@ -0,0 +1,74 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the textarea input component.
+ */
+export interface TextareaInputMetadata {
+    /** Associated form control */
+    control: FormControl<string>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Initial value for the field */
+    value?: string;
+    /** Default value configuration */
+    withDefault?: string | boolean;
+    /** Number of visible rows */
+    rows?: number;
+    /** Minimum number of rows (for autoGrow) */
+    minRows?: number;
+    /** Maximum number of rows (for autoGrow) */
+    maxRows?: number;
+    /** Auto grow textarea based on content */
+    autoGrow?: boolean;
+    /** Maximum character count */
+    maxLength?: number;
+    /** Minimum character count */
+    minLength?: number;
+    /** Show character counter */
+    showCounter?: boolean;
+    /** Counter format: 'remaining' shows remaining chars, 'current' shows current/max */
+    counterFormat?: 'remaining' | 'current';
+    /** Disable resize */
+    disableResize?: boolean;
+    /** Input mode for virtual keyboard */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Autocapitalize behavior */
+    autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    /** Enable spellcheck */
+    spellcheck?: boolean;
+    /** Wrap mode */
+    wrap?: 'hard' | 'soft' | 'off';
+    /** Component color */
+    color?: Color;
+    /** Fill style */
+    fill?: 'outline' | 'solid';
+    /** Label placement */
+    labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
+    /** Show clear button */
+    clearOnEdit?: boolean;
+    /** 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;
+}

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

@@ -0,0 +1,14 @@
+import { EventEmitter } from '@angular/core';
+import { TimelineMetadata, TimelineItemMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TimelineComponent {
+    props: TimelineMetadata;
+    itemClick: EventEmitter<{
+        item: TimelineItemMetadata;
+        index: number;
+    }>;
+    getItemColor(item: TimelineItemMetadata): string;
+    onItemClick(item: TimelineItemMetadata, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "val-timeline", never, { "props": { "alias": "props"; "required": false; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,39 @@
+import { Color } from '@ionic/core';
+/**
+ * Timeline item configuration.
+ */
+export interface TimelineItemMetadata {
+    /** Item title */
+    title: string;
+    /** Item content/description */
+    content?: string;
+    /** Date or time label */
+    date?: string;
+    /** Item icon */
+    icon?: string;
+    /** Item color */
+    color?: Color;
+    /** Whether item is active/current */
+    active?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Metadata for the timeline component.
+ */
+export interface TimelineMetadata {
+    /** Timeline items */
+    items: TimelineItemMetadata[];
+    /** Timeline orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Alternate items on both sides (vertical only) */
+    alternate?: boolean;
+    /** Show connector lines */
+    showConnectors?: boolean;
+    /** Default color for all items */
+    color?: Color;
+    /** Connector style */
+    connectorStyle?: 'solid' | 'dashed';
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/molecules/title-block/title-block.component.d.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectorRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { TitleBlockMetada } from './types';
+import * as i0 from "@angular/core";
+export declare class TitleBlockComponent implements OnInit, OnChanges {
+    private cdr;
+    props: TitleBlockMetada;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TitleBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TitleBlockComponent, "val-title-block", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/title-block/types.d.ts

@@ -0,0 +1,15 @@
+import { TitleMetadata } from '../../atoms/title/types';
+/**
+ * Title block configuration object.
+ * @type {TitleBlockMetada}
+ * @property title - Main title display configuration.
+ * @property aboveTitle - Title above the main title (optional).
+ * @property bellowTitle - Title below the main title (optional).
+ * @property position - Position of the block ('center', etc.).
+ */
+export type TitleBlockMetada = {
+    position: 'center' | 'left' | 'right' | 'leftocenter';
+    title?: TitleMetadata;
+    aboveTitle?: TitleMetadata;
+    bellowTitle?: TitleMetadata;
+};

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

@@ -0,0 +1,39 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ToggleInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class ToggleInputComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable toggle input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-toggle-input preset="form-field" [props]="{ control: ctrl }"></val-toggle-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {ToggleInputMetadata}
+     */
+    props: Partial<ToggleInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: ToggleInputMetadata;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    getDisplayLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToggleInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "val-toggle-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,30 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the toggle input component.
+ */
+export interface ToggleInputMetadata {
+    /** Associated form control */
+    control: FormControl<boolean>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Label position relative to toggle */
+    labelPosition?: 'start' | 'end';
+    /** Toggle color */
+    color?: Color;
+    /** Component state */
+    state?: ComponentState;
+    /** Justify content alignment */
+    justify?: 'start' | 'end' | 'space-between';
+    /** Enable/disable toggle */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+}

package/lib/components/molecules/update-banner/update-banner.component.d.ts

@@ -0,0 +1,42 @@
+import { BannerMetadata } from '../../organisms/banner/types';
+import * as i0 from "@angular/core";
+/**
+ * val-update-banner
+ *
+ * Banner de actualización que aparece cuando hay una nueva versión disponible.
+ * Se cierra automáticamente cuando el usuario hace clic en "Actualizar" o en cerrar.
+ *
+ * @example
+ * ```html
+ * <!-- Uso básico -->
+ * <val-update-banner />
+ *
+ * <!-- El banner solo aparece si hay actualización disponible -->
+ * ```
+ */
+export declare class UpdateBannerComponent {
+    private appConfig;
+    private i18n;
+    /**
+     * Signal para controlar si el banner fue descartado por el usuario.
+     */
+    private dismissed;
+    /**
+     * Indica si el banner debe mostrarse.
+     */
+    readonly show: import("@angular/core").Signal<boolean>;
+    /**
+     * Props del banner calculadas reactivamente.
+     */
+    readonly bannerProps: import("@angular/core").Signal<BannerMetadata>;
+    /**
+     * Maneja el clic en acciones del banner.
+     */
+    onAction(token: string): void;
+    /**
+     * Descarta el banner temporalmente (hasta que se recargue la página).
+     */
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdateBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpdateBannerComponent, "val-update-banner", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,36 @@
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for UsernameInputComponent.
+ */
+export interface UsernameInputMetadata {
+    /** FormControl para el valor del username */
+    control: FormControl<string>;
+    /** Label del campo */
+    label?: string;
+    /** Texto explicativo debajo del input (estilo consistente con phone-input). */
+    hint?: string;
+    /** Placeholder del input */
+    placeholder?: string;
+    /** Prefijo visual (default: '@') */
+    prefix?: string;
+    /** Longitud mínima permitida (default: 3) */
+    minLength?: number;
+    /** Longitud máxima permitida (default: 30) */
+    maxLength?: number;
+    /** Función para verificar disponibilidad del username */
+    checkAvailability?: (handle: string) => Observable<boolean>;
+    /** Mensajes de error personalizados */
+    errors?: Record<string, string>;
+    /** Estado del componente */
+    state?: ComponentState;
+    /** Mostrar indicador de disponibilidad (default: true) */
+    showAvailability?: boolean;
+    /** Debounce en ms para check de disponibilidad (default: 500) */
+    debounceTime?: number;
+}
+/**
+ * Estado de disponibilidad del username.
+ */
+export type UsernameAvailabilityStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';

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

@@ -0,0 +1,58 @@
+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;
+    /**
+     * AuthService optional — si está inyectado y `props.checkAvailability` no se provee,
+     * el component cae automáticamente a `AuthService.checkHandleAvailability` (backend
+     * de Valtech). Consumers que quieran otro endpoint pasan su propio callback.
+     */
+    private authService;
+    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;
+    /**
+     * Resolve la fn de check de disponibilidad:
+     * 1. Si el caller pasa `props.checkAvailability` → usar esa
+     * 2. Si AuthService está inyectado → caer a `checkHandleAvailability` (backend Valtech)
+     * 3. Sino → undefined (no se muestra status indicator)
+     */
+    private resolveCheckFn;
+    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/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>;
+}