valtech-components 2.0.691 → 2.0.692

package/lib/components/molecules/docs-code-example/types.d.ts

@@ -0,0 +1,63 @@
+import { TemplateRef } from '@angular/core';
+/**
+ * Configuration for the docs-code-example component.
+ */
+export interface DocsCodeExampleMetadata {
+    /**
+     * Example title.
+     */
+    title?: string;
+    /**
+     * Example description.
+     */
+    description?: string;
+    /**
+     * Code tabs to display.
+     */
+    tabs: DocsCodeTab[];
+    /**
+     * Template for live preview.
+     * Use ng-template with #preview reference.
+     */
+    previewTemplate?: TemplateRef<any>;
+    /**
+     * External link (e.g., StackBlitz, CodeSandbox).
+     */
+    externalLink?: {
+        url: string;
+        label?: string;
+    };
+    /**
+     * Show copy button on code blocks.
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /**
+     * Show line numbers in code.
+     * @default false
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+    /**
+     * Default active tab index.
+     * @default 0
+     */
+    defaultTab?: number;
+}
+export interface DocsCodeTab {
+    /**
+     * Tab label (e.g., "HTML", "TypeScript", "SCSS").
+     */
+    label: string;
+    /**
+     * Code content.
+     */
+    code: string;
+    /**
+     * Language for syntax highlighting.
+     */
+    language: 'html' | 'typescript' | 'scss' | 'css' | 'json' | 'bash' | 'text' | 'go';
+}

package/lib/components/molecules/docs-nav-links/docs-nav-links.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '@angular/core';
+import { DocsNavLinksMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-nav-links
+ *
+ * Navigation links for previous/next page navigation in documentation.
+ *
+ * @example
+ * ```html
+ * <val-docs-nav-links
+ *   [props]="{
+ *     previous: { label: 'Previous', title: 'Getting Started', route: ['/docs', 'getting-started'] },
+ *     next: { label: 'Next', title: 'Components', route: ['/docs', 'components'] }
+ *   }"
+ * ></val-docs-nav-links>
+ * ```
+ */
+export declare class DocsNavLinksComponent {
+    props: DocsNavLinksMetadata;
+    navigate: EventEmitter<string[]>;
+    private docsNav;
+    private i18n;
+    previousLabel: import("@angular/core").Signal<string>;
+    nextLabel: import("@angular/core").Signal<string>;
+    getHref(route: string[]): string;
+    onNavigate(event: Event, route: string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsNavLinksComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsNavLinksComponent, "val-docs-nav-links", never, { "props": { "alias": "props"; "required": false; }; }, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/molecules/docs-nav-links/types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Configuration for the docs-nav-links component.
+ */
+export interface DocsNavLinksMetadata {
+    /**
+     * Previous page link.
+     */
+    previous?: DocsNavLink;
+    /**
+     * Next page link.
+     */
+    next?: DocsNavLink;
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+}
+export interface DocsNavLink {
+    /**
+     * Label (small text, e.g., "Previous", "Next").
+     */
+    label?: string;
+    /**
+     * Title (main text, page name).
+     */
+    title: string;
+    /**
+     * Route to navigate to.
+     */
+    route: string[];
+}

package/lib/components/molecules/docs-search/docs-search.component.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter, ElementRef, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { DocsSearchMetadata, DocsSearchResult } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-search
+ *
+ * A search component for documentation with keyboard navigation support.
+ * Supports Cmd+K / Ctrl+K shortcut to open.
+ *
+ * @example
+ * ```html
+ * <val-docs-search
+ *   [props]="{
+ *     placeholder: 'Search docs...',
+ *     sections: sidebarSections,
+ *     showShortcut: true
+ *   }"
+ *   (navigate)="onNavigate($event)"
+ * ></val-docs-search>
+ * ```
+ */
+export declare class DocsSearchComponent implements OnDestroy {
+    private router;
+    props: DocsSearchMetadata;
+    navigate: EventEmitter<string[]>;
+    search: EventEmitter<string>;
+    searchInputEl?: ElementRef<HTMLInputElement>;
+    protected searchQuery: import("@angular/core").WritableSignal<string>;
+    protected showResults: import("@angular/core").WritableSignal<boolean>;
+    protected selectedIndex: import("@angular/core").WritableSignal<number>;
+    private searchSubject;
+    private destroy$;
+    readonly isMac: boolean;
+    protected results: import("@angular/core").Signal<DocsSearchResult[]>;
+    constructor(router: Router);
+    ngOnDestroy(): void;
+    onGlobalKeydown(event: KeyboardEvent): void;
+    onQueryChange(query: string): void;
+    onFocus(): void;
+    onBlur(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    selectResult(result: DocsSearchResult): void;
+    clearSearch(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsSearchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsSearchComponent, "val-docs-search", never, { "props": { "alias": "props"; "required": false; }; }, { "navigate": "navigate"; "search": "search"; }, never, never, true, never>;
+}

package/lib/components/molecules/docs-search/types.d.ts

@@ -0,0 +1,27 @@
+export interface DocsSearchMetadata {
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Sections to search through */
+    sections?: DocsSearchSection[];
+    /** Debounce time in milliseconds */
+    debounceMs?: number;
+    /** Show keyboard shortcut hint (Cmd+K / Ctrl+K) */
+    showShortcut?: boolean;
+    /** Custom CSS class */
+    cssClass?: string;
+}
+export interface DocsSearchSection {
+    title: string;
+    items: DocsSearchItem[];
+}
+export interface DocsSearchItem {
+    label: string;
+    route: string[];
+    description?: string;
+    keywords?: string[];
+}
+export interface DocsSearchResult {
+    section: string;
+    item: DocsSearchItem;
+    matchType: 'label' | 'description' | 'keyword';
+}

package/lib/components/molecules/docs-section/docs-section.component.d.ts

@@ -0,0 +1,29 @@
+import { DocsSectionMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-section
+ *
+ * A semantic section wrapper for documentation pages.
+ * Automatically creates headings with IDs for TOC linking.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-section [props]="{ id: 'installation', title: 'Installation' }">
+ *   <p>Install the package using npm...</p>
+ *   <val-docs-code-example [props]="codeExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ *
+ * @example With level 3 heading
+ * ```html
+ * <val-docs-section [props]="{ id: 'npm', title: 'Using npm', level: 3 }">
+ *   <val-docs-code-example [props]="npmExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ */
+export declare class DocsSectionComponent {
+    props: DocsSectionMetadata;
+    get level(): 2 | 3;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsSectionComponent, "val-docs-section", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/molecules/docs-section/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Configuration for the docs-section component.
+ */
+export interface DocsSectionMetadata {
+    /**
+     * Unique ID for the section (used for TOC linking).
+     * Will be applied to the section element for anchor navigation.
+     */
+    id: string;
+    /**
+     * Section title displayed as heading.
+     */
+    title: string;
+    /**
+     * Heading level for the section.
+     * @default 2
+     */
+    level?: 2 | 3;
+    /**
+     * Optional description below the title.
+     */
+    description?: string;
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+}

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

@@ -0,0 +1,34 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class EmailInputComponent 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-email-input preset="form-field" [props]="{ control: ctrl }"></val-email-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;
+    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<EmailInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmailInputComponent, "val-email-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/expandable-text/expandable-text.component.d.ts

@@ -0,0 +1,23 @@
+import { ExpandableTextInput } from './types';
+import * as i0 from "@angular/core";
+export declare class ExpandableTextComponent {
+    /**
+     * Expandable text configuration object.
+     * @type {ExpandableTextInput}
+     * @property content - The text content to display.
+     * @property limit - The character limit before truncation.
+     * @property color - The color for the "see more" link.
+     * @property expandText - The text for the expand link (optional).
+     */
+    props: ExpandableTextInput;
+    expanded: boolean;
+    defaultColor: string;
+    private i18n;
+    get truncatedText(): string;
+    get isTruncated(): boolean;
+    getExpandText(): string;
+    toggleExpand(): void;
+    color(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpandableTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpandableTextComponent, "val-expandable-text", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/expandable-text/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Expandable text configuration object.
+ * @type {ExpandableTextInput}
+ * @property content - The text content to display.
+ * @property limit - The character limit before truncation.
+ * @property color - The color for the "see more" link.
+ * @property expandText - The text for the expand link (optional).
+ */
+export interface ExpandableTextInput {
+    limit: number;
+    content: string;
+    color?: string;
+    expandText?: string;
+}

package/lib/components/molecules/features-list/features-list.component.d.ts

@@ -0,0 +1,66 @@
+import { FeatureItem, FeaturesListMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-features-list
+ *
+ * A component to display a list of features with icons, titles, and descriptions.
+ * Supports i18n for all text content.
+ *
+ * @example
+ * ```html
+ * <val-features-list
+ *   [props]="{
+ *     features: [
+ *       { icon: 'flash-outline', titleKey: 'feature1Title', descriptionKey: 'feature1Desc' },
+ *       { icon: 'color-palette-outline', titleKey: 'feature2Title', descriptionKey: 'feature2Desc' }
+ *     ],
+ *     i18nNamespace: 'Features',
+ *     iconColor: 'primary',
+ *     mode: 'vertical'
+ *   }"
+ * />
+ * ```
+ *
+ * @example With custom SVG icons
+ * ```html
+ * <val-features-list
+ *   [props]="{
+ *     features: [
+ *       {
+ *         icon: 'custom',
+ *         svgPath: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+ *         titleKey: 'Fast & Secure',
+ *         descriptionKey: 'Modern authentication with OAuth and MFA'
+ *       }
+ *     ]
+ *   }"
+ * />
+ * ```
+ */
+export declare class FeaturesListComponent {
+    private i18n;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<FeaturesListMetadata>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<{
+        features: FeatureItem[];
+        i18nNamespace?: string;
+        iconColor: string;
+        iconSize: number;
+        mode: "horizontal" | "vertical";
+        gap: "small" | "medium" | "large";
+        alignment: "center" | "start";
+    }>;
+    /** Resolved icon color (handles Ionic colors and CSS colors) */
+    iconColorStyle: import("@angular/core").Signal<string>;
+    /**
+     * Get translated title or return direct text
+     */
+    getTitle(feature: FeatureItem): string;
+    /**
+     * Get translated description or return direct text
+     */
+    getDescription(feature: FeatureItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FeaturesListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FeaturesListComponent, "val-features-list", never, { "props": { "alias": "props"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/features-list/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Feature item configuration
+ */
+export interface FeatureItem {
+    /** Ionicon name or 'custom' for SVG path */
+    icon: string;
+    /** SVG path data (only used when icon is 'custom') */
+    svgPath?: string;
+    /** Title i18n key or direct text */
+    titleKey: string;
+    /** Description i18n key or direct text */
+    descriptionKey: string;
+}
+/**
+ * Features list component configuration
+ */
+export interface FeaturesListMetadata {
+    /** Array of features to display */
+    features: FeatureItem[];
+    /** i18n namespace for translations (if using keys) */
+    i18nNamespace?: string;
+    /** Icon color (Ionic color or CSS color) */
+    iconColor?: string;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Layout mode: 'vertical' stacks features, 'horizontal' displays them in a row */
+    mode?: 'vertical' | 'horizontal';
+    /** Gap between features */
+    gap?: 'small' | 'medium' | 'large';
+    /** Alignment of features */
+    alignment?: 'start' | 'center';
+}
+/**
+ * Default values for FeaturesListMetadata
+ */
+export declare const FEATURES_LIST_DEFAULTS: Required<Omit<FeaturesListMetadata, 'features' | 'i18nNamespace'>>;

package/lib/components/molecules/feedback-form/feedback-form.component.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { I18nService } from '../../../services/i18n';
+import { FormGroup } from '@angular/forms';
+import { FeedbackFormMetadata, FeedbackSubmitEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-feedback-form
+ *
+ * Formulario reutilizable para enviar feedback desde cualquier parte de la aplicación.
+ *
+ * @example
+ * ```html
+ * <!-- Feedback general -->
+ * <val-feedback-form
+ *   [props]="{ defaultType: 'feedback', showTypeSelector: true }"
+ *   (onSubmit)="handleSuccess($event)"
+ *   (onCancel)="closeModal()"
+ * />
+ *
+ * <!-- Reportar contenido incorrecto -->
+ * <val-feedback-form
+ *   [props]="{
+ *     defaultType: 'poor-content',
+ *     showTypeSelector: false,
+ *     contentRef: { contentId: article.id, contentType: 'article' },
+ *     submitButtonText: 'Reportar contenido'
+ *   }"
+ * />
+ * ```
+ */
+export declare class FeedbackFormComponent implements OnInit {
+    /**
+     * Configuración del formulario.
+     */
+    props: FeedbackFormMetadata;
+    /**
+     * Evento emitido cuando el feedback se envía exitosamente.
+     */
+    onSubmit: EventEmitter<FeedbackSubmitEvent>;
+    /**
+     * Evento emitido cuando el usuario cancela.
+     */
+    onCancel: EventEmitter<void>;
+    private fb;
+    private feedbackService;
+    protected i18n: I18nService;
+    form: FormGroup;
+    typeOptions: import("../../../services/feedback").FeedbackTypeOption[];
+    isSubmitting: import("@angular/core").WritableSignal<boolean>;
+    isSuccess: import("@angular/core").WritableSignal<boolean>;
+    error: import("@angular/core").WritableSignal<string>;
+    constructor();
+    ngOnInit(): void;
+    handleSubmit(): Promise<void>;
+    onCancelClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FeedbackFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FeedbackFormComponent, "val-feedback-form", never, { "props": { "alias": "props"; "required": false; }; }, { "onSubmit": "onSubmit"; "onCancel": "onCancel"; }, never, never, true, never>;
+}

package/lib/components/molecules/feedback-form/types.d.ts

@@ -0,0 +1,54 @@
+import { FeedbackType, ContentRef, CreateFeedbackResponse, FeedbackTypeOption } from '../../../services/feedback/types';
+/**
+ * Metadata para el componente FeedbackForm.
+ */
+export interface FeedbackFormMetadata {
+    /** Tipo de feedback preseleccionado */
+    defaultType?: FeedbackType;
+    /** Referencia a contenido (si aplica) */
+    contentRef?: ContentRef;
+    /** Mostrar selector de tipo (default: true) */
+    showTypeSelector?: boolean;
+    /** Tipos de feedback habilitados (por defecto todos) */
+    enabledTypes?: FeedbackType[];
+    /** Opciones personalizadas para tipos de feedback */
+    typeOptions?: FeedbackTypeOption[];
+    /** Placeholder para título */
+    titlePlaceholder?: string;
+    /** Placeholder para descripción */
+    descriptionPlaceholder?: string;
+    /** Label para campo de título */
+    titleLabel?: string;
+    /** Label para campo de descripción */
+    descriptionLabel?: string;
+    /** Texto del botón de envío */
+    submitButtonText?: string;
+    /** Texto del botón cancelar (si no se proporciona, no se muestra) */
+    cancelButtonText?: string;
+    /** Mostrar campo de adjuntos (default: true) */
+    showAttachments?: boolean;
+    /** Label para campo de adjuntos */
+    attachmentsLabel?: string;
+    /** Mensaje de éxito personalizado */
+    successMessage?: string;
+    /** CSS class adicional para el contenedor */
+    cssClass?: string;
+    /** Modo compacto (menos espaciado) */
+    compact?: boolean;
+}
+/**
+ * Evento emitido cuando el feedback se envía exitosamente.
+ */
+export interface FeedbackSubmitEvent {
+    response: CreateFeedbackResponse;
+    type: FeedbackType;
+    title: string;
+}
+/**
+ * Estado del formulario.
+ */
+export interface FeedbackFormState {
+    isSubmitting: boolean;
+    isSuccess: boolean;
+    error: string | null;
+}

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

@@ -0,0 +1,25 @@
+import { OnInit } from '@angular/core';
+import { ButtonMetadata } from '../../types';
+import { FileInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class FileInputComponent implements OnInit {
+    /**
+     * Input configuration object.
+     * @type {FileInputMetadata}
+     * @property control - The Angular FormControl for the file input.
+     * @property accept - Accepted file types (e.g., 'image/*', '.pdf').
+     */
+    props: FileInputMetadata;
+    fileInput: any;
+    private i18n;
+    contrastButton: ButtonMetadata;
+    selectedFile: File;
+    constructor();
+    ngOnInit(): void;
+    /** Get display text for file status */
+    getFileDisplayText(): string;
+    onFileSelected(event: any): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FileInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FileInputComponent, "val-file-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,72 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the file input component.
+ */
+export interface FileInputMetadata {
+    /** Form control for the file (stores File object, optional when used in val-form) */
+    control?: FormControl<File | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Accepted file types (e.g., 'image/*', '.pdf,.doc') */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files (when multiple is true) */
+    maxFiles?: number;
+    /** Button text for selecting file */
+    buttonText?: string;
+    /** Text shown when no file is selected */
+    noFileText?: string;
+    /** Component color */
+    color?: Color;
+    /** Button color */
+    buttonColor?: Color;
+    /** Custom CSS class */
+    cssClass?: 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 file is selected.
+ */
+export interface FileInputChangeEvent {
+    /** Selected file */
+    file: File | null;
+    /** File name */
+    fileName: string | null;
+    /** File size in bytes */
+    fileSize: number | null;
+    /** File type/MIME */
+    fileType: string | null;
+}
+/**
+ * Event emitted when multiple files are selected.
+ */
+export interface FilesInputChangeEvent {
+    /** Selected files */
+    files: File[];
+    /** Total count */
+    count: number;
+    /** Total size in bytes */
+    totalSize: number;
+}