valtech-components 2.0.821 → 2.0.824

package/lib/components/organisms/data-table/types.d.ts

@@ -0,0 +1,219 @@
+import { Color } from '@ionic/core';
+import { TemplateRef } from '@angular/core';
+/**
+ * Column definition for the data table.
+ */
+export interface DataTableColumn<T = any> {
+    /** Unique identifier for the column */
+    key: string;
+    /** Header label */
+    label: string;
+    /** Property path in the data object (supports dot notation) */
+    field?: string;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum width */
+    minWidth?: string;
+    /** Maximum width */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom sort function */
+    sortFn?: (a: T, b: T) => number;
+    /** Whether the column is visible */
+    visible?: boolean;
+    /** Custom cell template */
+    cellTemplate?: TemplateRef<any>;
+    /** Custom header template */
+    headerTemplate?: TemplateRef<any>;
+    /** Format function for cell value */
+    format?: (value: any, row: T) => string;
+    /** CSS class for the column */
+    cssClass?: string;
+    /** Whether this is a sticky column */
+    sticky?: 'start' | 'end';
+}
+/**
+ * Sort configuration.
+ */
+export interface DataTableSort {
+    /** Column key to sort by */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc';
+}
+/**
+ * Pagination configuration.
+ */
+export interface DataTablePagination {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Items per page */
+    pageSize: number;
+    /** Total number of items */
+    total: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+}
+/**
+ * Selection configuration.
+ */
+export interface DataTableSelection<T = any> {
+    /** Selection mode */
+    mode: 'none' | 'single' | 'multiple';
+    /** Currently selected items */
+    selected: T[];
+    /** Function to get unique ID from row */
+    trackBy?: (row: T) => any;
+}
+/**
+ * Row click event.
+ */
+export interface DataTableRowClickEvent<T = any> {
+    /** The row data */
+    row: T;
+    /** Row index */
+    index: number;
+    /** Original mouse event */
+    event: MouseEvent;
+}
+/**
+ * Selection change event.
+ */
+export interface DataTableSelectionChangeEvent<T = any> {
+    /** Selected rows */
+    selected: T[];
+    /** Row that was changed (if single change) */
+    changedRow?: T;
+    /** Action performed */
+    action: 'select' | 'deselect' | 'selectAll' | 'deselectAll';
+}
+/**
+ * Sort change event.
+ */
+export interface DataTableSortChangeEvent {
+    /** Column key */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc' | null;
+}
+/**
+ * Page change event.
+ */
+export interface DataTablePageChangeEvent {
+    /** New page number */
+    page: number;
+    /** Page size */
+    pageSize: number;
+    /** Previous page */
+    previousPage: number;
+}
+/**
+ * Empty state configuration.
+ */
+export interface DataTableEmptyState {
+    /** Icon to display */
+    icon?: string;
+    /** Title text */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Custom template */
+    template?: TemplateRef<any>;
+}
+/**
+ * Loading state configuration.
+ */
+export interface DataTableLoadingState {
+    /** Whether data is loading */
+    loading: boolean;
+    /** Number of skeleton rows to show */
+    skeletonRows?: number;
+    /** Loading message */
+    message?: string;
+}
+/**
+ * Metadata for the data table component.
+ */
+export interface DataTableMetadata<T = any> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Data rows */
+    data: T[];
+    /** Current sort configuration */
+    sort?: DataTableSort;
+    /** Enable client-side sorting */
+    clientSort?: boolean;
+    /** Pagination configuration */
+    pagination?: DataTablePagination;
+    /** Enable client-side pagination */
+    clientPagination?: boolean;
+    /** Show pagination controls */
+    showPagination?: boolean;
+    /** Selection configuration */
+    selection?: DataTableSelection<T>;
+    /** Show selection column */
+    showSelectionColumn?: boolean;
+    /** Table size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show borders */
+    bordered?: boolean;
+    /** Striped rows */
+    striped?: boolean;
+    /** Hoverable rows */
+    hoverable?: boolean;
+    /** Fixed header */
+    stickyHeader?: boolean;
+    /** Table max height (enables scrolling) */
+    maxHeight?: string;
+    /** Show row numbers */
+    showRowNumbers?: boolean;
+    /** Row number start */
+    rowNumberStart?: number;
+    /** Empty state configuration */
+    emptyState?: DataTableEmptyState;
+    /** Loading state */
+    loadingState?: DataTableLoadingState;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Header color */
+    headerColor?: Color;
+    /** Row click enabled */
+    rowClickable?: boolean;
+    /** Elevation level for box shadow */
+    elevation?: 'none' | 'low' | 'medium' | 'high';
+    /** Show gradient accent on top border */
+    headerGradient?: boolean;
+    /** Checkbox style variant */
+    checkboxStyle?: 'default' | 'circular';
+    /** Row selection highlight style */
+    rowHighlightStyle?: 'background' | 'border-left' | 'both';
+    /** Row actions template */
+    actionsTemplate?: TemplateRef<any>;
+    /** Actions column width */
+    actionsWidth?: string;
+    /** Actions column label */
+    actionsLabel?: string;
+    /** Table caption for screen readers */
+    caption?: string;
+    /** ARIA label */
+    ariaLabel?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Responsive mode: 'scroll' (default) or 'cards' for mobile card view */
+    responsiveMode?: 'scroll' | 'cards';
+    /** Breakpoint for card view in pixels. Default: 768 */
+    responsiveBreakpoint?: number;
+    /** Custom template for mobile card view */
+    mobileCardTemplate?: TemplateRef<any>;
+}
+/**
+ * Default pagination options.
+ */
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+/**
+ * Default empty state.
+ */
+export declare const DEFAULT_EMPTY_STATE: DataTableEmptyState;

package/lib/components/organisms/docs-sidebar/docs-sidebar.component.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { DocsSidebarMetadata, DocsSidebarSection, DocsSidebarLink } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-sidebar
+ *
+ * A hierarchical navigation sidebar for documentation sites.
+ * Supports collapsible sections, active route highlighting, and badges.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-sidebar
+ *   [props]="{
+ *     logo: { src: '/assets/logo.svg', alt: 'Docs', title: 'DOCS' },
+ *     sections: [
+ *       { title: 'Getting Started', route: ['/docs', 'getting-started'] },
+ *       {
+ *         title: 'Components',
+ *         expanded: true,
+ *         children: [
+ *           { label: 'Button', route: ['/docs', 'components', 'button'] },
+ *           { label: 'Card', route: ['/docs', 'components', 'card'], badge: 'New' }
+ *         ]
+ *       }
+ *     ]
+ *   }"
+ *   (navigate)="onNavigate($event)"
+ * ></val-docs-sidebar>
+ * ```
+ */
+export declare class DocsSidebarComponent implements OnInit, OnChanges {
+    private router;
+    props: DocsSidebarMetadata;
+    navigate: EventEmitter<string[]>;
+    expandedSections: Record<string, boolean>;
+    private currentRoute;
+    constructor(router: Router);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initializeExpandedSections;
+    private updateCurrentRoute;
+    private autoExpandActiveSection;
+    onSectionClick(section: DocsSidebarSection): void;
+    onNavigate(route: string[]): void;
+    isSectionActive(section: DocsSidebarSection): boolean;
+    isLinkActive(link: DocsSidebarLink): boolean;
+    private routesMatch;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsSidebarComponent, "val-docs-sidebar", never, { "props": { "alias": "props"; "required": false; }; }, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/organisms/docs-sidebar/types.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Configuration for the docs-sidebar component.
+ */
+export interface DocsSidebarMetadata {
+    /**
+     * Navigation sections to display.
+     */
+    sections: DocsSidebarSection[];
+    /**
+     * Currently active route for highlighting.
+     */
+    activeRoute?: string[];
+    /**
+     * Logo configuration for the sidebar header.
+     */
+    logo?: DocsSidebarLogo;
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+    /**
+     * Background color override.
+     */
+    backgroundColor?: string;
+}
+export interface DocsSidebarLogo {
+    /**
+     * Logo image source.
+     */
+    src: string;
+    /**
+     * Alt text for accessibility.
+     */
+    alt: string;
+    /**
+     * Optional title/text next to logo.
+     */
+    title?: string;
+    /**
+     * Route to navigate when logo is clicked.
+     */
+    route?: string[];
+    /**
+     * Logo height (width auto-calculated).
+     * @default '32px'
+     */
+    height?: string;
+}
+export interface DocsSidebarSection {
+    /**
+     * Section title displayed in the sidebar.
+     */
+    title: string;
+    /**
+     * Route for direct navigation (if no children).
+     */
+    route?: string[];
+    /**
+     * Child links under this section.
+     */
+    children?: DocsSidebarLink[];
+    /**
+     * Whether the section is expanded by default.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Optional icon name (Ionicons).
+     */
+    icon?: string;
+    /**
+     * Badge text (e.g., "New", "Beta").
+     */
+    badge?: string;
+}
+export interface DocsSidebarLink {
+    /**
+     * Link display text.
+     */
+    label: string;
+    /**
+     * Route to navigate to.
+     */
+    route: string[];
+    /**
+     * Badge text (e.g., "New", "Deprecated").
+     */
+    badge?: string;
+    /**
+     * Badge color variant.
+     */
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+}

package/lib/components/organisms/docs-toc/docs-toc.component.d.ts

@@ -0,0 +1,62 @@
+import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, AfterViewInit, NgZone } from '@angular/core';
+import { DocsTocMetadata, DocsTocItem } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-toc
+ *
+ * A table of contents component with scroll spy functionality.
+ * Automatically highlights the current section based on scroll position.
+ *
+ * @example Manual items
+ * ```html
+ * <val-docs-toc
+ *   [props]="{
+ *     title: 'On this page',
+ *     items: [
+ *       { id: 'overview', label: 'Overview', level: 1 },
+ *       { id: 'installation', label: 'Installation', level: 1 },
+ *       { id: 'npm', label: 'Using npm', level: 2 },
+ *       { id: 'yarn', label: 'Using yarn', level: 2 }
+ *     ]
+ *   }"
+ * ></val-docs-toc>
+ * ```
+ *
+ * @example Auto-generated from headings
+ * ```html
+ * <val-docs-toc
+ *   [props]="{
+ *     autoGenerate: true,
+ *     containerSelector: '.article-content',
+ *     headingLevels: [2, 3]
+ *   }"
+ * ></val-docs-toc>
+ * ```
+ */
+export declare class DocsTocComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+    private ngZone;
+    props: DocsTocMetadata;
+    sectionChange: EventEmitter<string>;
+    protected activeId: import("@angular/core").WritableSignal<string>;
+    protected flatItems: import("@angular/core").WritableSignal<DocsTocItem[]>;
+    private headingElements;
+    private scrollHandler;
+    private rafId;
+    constructor(ngZone: NgZone);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private updateFlatItems;
+    private flattenItems;
+    private generateTocFromHeadings;
+    private generateId;
+    private scrollContainer;
+    private setupScrollSpy;
+    private findScrollContainer;
+    private updateActiveHeading;
+    private destroyScrollSpy;
+    scrollToSection(event: Event, id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsTocComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsTocComponent, "val-docs-toc", never, { "props": { "alias": "props"; "required": false; }; }, { "sectionChange": "sectionChange"; }, never, never, true, never>;
+}

package/lib/components/organisms/docs-toc/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Configuration for the docs-toc component.
+ */
+export interface DocsTocMetadata {
+    /**
+     * Manual TOC items (used when autoGenerate is false).
+     */
+    items?: DocsTocItem[];
+    /**
+     * Automatically generate TOC from headings in the content.
+     * @default false
+     */
+    autoGenerate?: boolean;
+    /**
+     * CSS selector for the content container to scan for headings.
+     * Required when autoGenerate is true.
+     * @default '.docs-layout__content'
+     */
+    containerSelector?: string;
+    /**
+     * Heading levels to include in auto-generated TOC.
+     * @default [2, 3]
+     */
+    headingLevels?: number[];
+    /**
+     * Title displayed above the TOC.
+     * @default 'Contents'
+     */
+    title?: string;
+    /**
+     * Offset from top for scroll spy calculations (e.g., for sticky headers).
+     * @default 100
+     */
+    offsetTop?: number;
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+    /**
+     * Hide the title.
+     * @default false
+     */
+    hideTitle?: boolean;
+}
+export interface DocsTocItem {
+    /**
+     * ID of the DOM element (without #).
+     */
+    id: string;
+    /**
+     * Label to display in the TOC.
+     */
+    label: string;
+    /**
+     * Heading level for indentation (1, 2, 3).
+     */
+    level: number;
+    /**
+     * Nested children items.
+     */
+    children?: DocsTocItem[];
+}

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

@@ -0,0 +1,46 @@
+import { ArticleMetadata } from '../article/types';
+import { FaqCategory, FaqItem, FaqMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-faq`
+ *
+ * Organism de preguntas frecuentes. Q&A categorizado con accordion colapsable
+ * y buscador en vivo. Pensado para vistas FAQ públicas — el caller puede
+ * reusar la misma data (`FaqMetadata.categories`) para emitir el structured
+ * data `FAQPage` (JSON-LD) y ganar rich results en buscadores.
+ *
+ * Las respuestas (`FaqItem.answer`) son **Markdown** — se parsean con
+ * `parseMarkdownArticle` y se renderizan vía `val-article`. Soportan links,
+ * listas, negritas, tablas, etc.
+ *
+ * @example
+ * ```html
+ * <val-faq [props]="{ categories: faqCategories, searchable: true }" />
+ * ```
+ */
+export declare class FaqComponent {
+    private readonly props_;
+    set props(value: FaqMetadata | undefined);
+    get props(): FaqMetadata;
+    /** Término de búsqueda actual. */
+    private readonly query;
+    /**
+     * Cache de respuestas parseadas (Markdown → ArticleMetadata). Se reconstruye
+     * solo cuando cambian las categorías — el parseo NO corre por keystroke.
+     * Keyed por id de item (los ids son únicos en toda la FAQ).
+     */
+    private readonly parsedAnswers;
+    /** Respuesta parseada de un item — desde el cache. */
+    answerOf(item: FaqItem): ArticleMetadata;
+    /**
+     * Categorías visibles tras el filtro. Una categoría desaparece si ninguna
+     * de sus preguntas matchea. Match sobre pregunta + respuesta (raw markdown),
+     * case-insensitive.
+     */
+    readonly visibleCategories: import("@angular/core").Signal<FaqCategory[]>;
+    /** `true` si se debe mostrar el label de cada categoría. */
+    readonly showCategoryLabel: import("@angular/core").Signal<boolean>;
+    onSearch(term: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FaqComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FaqComponent, "val-faq", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Tipos del organism `val-faq`.
+ *
+ * Modelo Q&A categorizado. Pensado para vistas FAQ públicas (sitio corporativo)
+ * — el caller también puede usar la misma data para emitir structured data
+ * `FAQPage` (JSON-LD) y ganar rich results en buscadores.
+ */
+/** Una pregunta-respuesta. */
+export interface FaqItem {
+    /** Identificador único dentro de la FAQ — usado como track + accordion value. */
+    id: string;
+    /** La pregunta. */
+    question: string;
+    /** La respuesta. Texto plano (los saltos de línea se respetan). */
+    answer: string;
+}
+/** Grupo de preguntas bajo un tema. */
+export interface FaqCategory {
+    /** Identificador único de la categoría. */
+    id: string;
+    /** Etiqueta visible del grupo. */
+    label: string;
+    /** Preguntas del grupo. */
+    items: FaqItem[];
+}
+/**
+ * Configuración del organism `val-faq`.
+ *
+ * @example
+ * ```html
+ * <val-faq
+ *   [props]="{
+ *     categories: faqCategories,
+ *     searchable: true,
+ *     searchPlaceholder: 'Buscar...',
+ *   }"
+ * />
+ * ```
+ */
+export interface FaqMetadata {
+    /** Categorías con sus preguntas, en orden de aparición. */
+    categories: FaqCategory[];
+    /** Muestra el buscador que filtra preguntas en vivo. Default `true`. */
+    searchable?: boolean;
+    /** Placeholder del buscador. */
+    searchPlaceholder?: string;
+    /** Permite varias preguntas abiertas a la vez. Default `false`. */
+    multiple?: boolean;
+    /** Texto cuando la búsqueda no arroja resultados. */
+    noResultsText?: string;
+    /** Oculta el label de categoría cuando solo hay una. Default `true`. */
+    hideSingleCategoryLabel?: boolean;
+}

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

@@ -0,0 +1,36 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { FooterMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * FooterComponent
+ *
+ * Componente de pie de página reutilizable para aplicaciones Ionic/Angular.
+ * Permite mostrar una barra de herramientas (toolbar) y contenido adicional.
+ *
+ * @example
+ * <val-footer [props]="footerProps" (onClick)="handleFooterAction($event)">
+ *   <div extra>Contenido extra</div>
+ * </val-footer>
+ *
+ * @input props {FooterMetadata} - Metadatos del pie de página y su toolbar.
+ * @output onClick - Emite el token de la acción clicada en la toolbar.
+ */
+export declare class FooterComponent implements OnInit {
+    /**
+     * Metadatos del pie de página y su toolbar.
+     */
+    props: FooterMetadata;
+    /**
+     * Evento emitido al hacer click en una acción de la toolbar.
+     */
+    onClick: EventEmitter<string>;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Emite el token de la acción clicada en la toolbar.
+     * @param token Token de la acción
+     */
+    clickHandler(token?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "val-footer", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, ["[extra]"], true, never>;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Tipos y metadatos para el componente FooterComponent.
+ * Permiten definir la configuración del pie de página y su barra de herramientas.
+ */
+import { ToolbarMetadata } from '../toolbar/types';
+/**
+ * Metadatos para el pie de página.
+ * @property translucent (opcional) Si el pie es translúcido.
+ * @property bordered (opcional) Si el pie tiene borde.
+ * @property toolbar Metadatos de la barra de herramientas a mostrar en el pie.
+ */
+export type FooterMetadata = {
+    translucent?: boolean;
+    bordered?: boolean;
+    toolbar: ToolbarMetadata;
+};

package/lib/components/organisms/form/factory.d.ts

@@ -0,0 +1,17 @@
+import { ValidatorFn } from '@angular/forms';
+import { InputMetadata } from '../../types';
+export declare const maxLength: (field: string, max: number) => {
+    validator: ValidatorFn;
+    error: string;
+};
+export declare const createNumberFromToField: (name: string, label: string, fromLabel: string, toLabel: string, options?: {
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
+    hint?: string;
+    range?: {
+        min: number;
+        max: number;
+    };
+    validators?: ValidatorFn[];
+    order?: number;
+}) => InputMetadata;

package/lib/components/organisms/form/form-footer/form-footer.component.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ButtonMetadata, FormMetadata, FormSubmit } from '../../../types';
+import * as i0 from "@angular/core";
+export declare class FormFooterComponent implements OnInit {
+    props: {
+        form: FormGroup;
+        data: FormMetadata;
+    };
+    onSubmit: EventEmitter<FormSubmit>;
+    constructor();
+    ngOnInit(): void;
+    submitHandler(token?: string): Promise<void>;
+    get actions(): ButtonMetadata[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFooterComponent, "val-form-footer", never, { "props": { "alias": "props"; "required": false; }; }, { "onSubmit": "onSubmit"; }, never, never, true, never>;
+}