valtech-components 2.0.691 → 2.0.692

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

@@ -0,0 +1,15 @@
+import { FooterLinksMetadata } from '../../molecules/footer-links/types';
+import { RightsFooterMetadata } from '../../atoms/rights-footer/types';
+/**
+ * Configuration for the company footer component.
+ */
+export interface CompanyFooterMetadata {
+    /** Footer links configuration */
+    links: FooterLinksMetadata;
+    /** Rights footer configuration */
+    rights?: RightsFooterMetadata;
+    /** Add padding around the footer */
+    withPadding?: boolean;
+    /** Add background color to the footer */
+    withBackground?: boolean;
+}

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

@@ -0,0 +1,63 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { DataTableMetadata, DataTableColumn, DataTableSort, DataTableRowClickEvent, DataTableSelectionChangeEvent, DataTableSortChangeEvent, DataTablePageChangeEvent, DataTableEmptyState } from './types';
+import * as i0 from "@angular/core";
+export declare class DataTableComponent<T = any> implements OnInit, OnChanges {
+    props: DataTableMetadata<T>;
+    rowClick: EventEmitter<DataTableRowClickEvent<T>>;
+    selectionChange: EventEmitter<DataTableSelectionChangeEvent<T>>;
+    sortChange: EventEmitter<DataTableSortChangeEvent>;
+    pageChange: EventEmitter<DataTablePageChangeEvent>;
+    displayedData: T[];
+    currentSort: DataTableSort | null;
+    selectedRows: Set<any>;
+    /** Cached visible columns for performance */
+    private _visibleColumns;
+    private cdr;
+    private i18n;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initializeState;
+    private updateDisplayedData;
+    private sortData;
+    get visibleColumns(): DataTableColumn<T>[];
+    get totalColumns(): number;
+    get emptyState(): DataTableEmptyState;
+    /** Get actions column label */
+    getActionsLabel(): string;
+    /** Get pagination info text */
+    getPaginationInfoText(): string;
+    /** Get per page text */
+    getPerPageText(size: number): string;
+    /** Get first page aria label */
+    getFirstPageLabel(): string;
+    /** Get previous page aria label */
+    getPreviousPageLabel(): string;
+    /** Get next page aria label */
+    getNextPageLabel(): string;
+    /** Get last page aria label */
+    getLastPageLabel(): string;
+    get pageSizeOptions(): number[];
+    get totalPages(): number;
+    get paginationStart(): number;
+    get paginationEnd(): number;
+    get isAllSelected(): boolean;
+    get isIndeterminate(): boolean;
+    getCellValue(row: T, column: DataTableColumn<T>): any;
+    getFormattedValue(row: T, column: DataTableColumn<T>): string;
+    getColumnClass(column: DataTableColumn<T>): string;
+    getAriaSort(column: DataTableColumn<T>): string | null;
+    getRowNumber(index: number): number;
+    getRowId(row: T): any;
+    trackByFn(row: T): any;
+    isRowSelected(row: T): boolean;
+    onSort(column: DataTableColumn<T>): void;
+    onRowClick(row: T, index: number, event: MouseEvent): void;
+    toggleSelectAll(event: CustomEvent): void;
+    toggleRowSelection(row: T, event: CustomEvent): void;
+    selectSingleRow(row: T): void;
+    private emitSelectionChange;
+    goToPage(page: number): void;
+    onPageSizeChange(event: CustomEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableComponent<any>, "val-data-table", never, { "props": { "alias": "props"; "required": false; }; }, { "rowClick": "rowClick"; "selectionChange": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; }, never, ["[toolbar]"], true, never>;
+}

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/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>;
+}