valtech-components 2.0.795 → 2.0.796

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

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

@@ -0,0 +1,72 @@
+import { DoCheck, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { TextareaInputMetadata } from '../../molecules/textarea-input/types';
+import { UsernameInputMetadata } from '../../molecules/username-input/types';
+import { ButtonMetadata, FormMetadata, FormSubmit, InputMetadata, InputType } from '../../types';
+import * as i0 from "@angular/core";
+export declare class FormComponent implements OnInit, OnChanges, DoCheck {
+    private fb;
+    private elementRef;
+    props: FormMetadata;
+    onSubmit: EventEmitter<FormSubmit>;
+    onInvalid: EventEmitter<any>;
+    onSelectChange: EventEmitter<{
+        field: string;
+        value: any;
+    }>;
+    form: FormGroup;
+    types: typeof InputType;
+    private subscriptions;
+    private actionsCache;
+    private fieldPropMemo;
+    private usernamePropMemo;
+    private textareaPropMemo;
+    private selectPropMemo;
+    private previousState;
+    constructor(fb: FormBuilder, elementRef: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngDoCheck(): void;
+    /**
+     * Synchronizes form control disabled/enabled state with field metadata.
+     */
+    private syncFieldControlStates;
+    /**
+     * Actualiza el cache de actions basado en el estado actual del form.
+     */
+    private updateActionsCache;
+    ngOnDestroy(): void;
+    trackSelectChanges(fieldName: string): void;
+    submitHandler(token?: string): Promise<void>;
+    getControl(field: string): FormControl;
+    getFieldProp(field: InputMetadata): InputMetadata;
+    /**
+     * Adapter para SELECT — igual que `getFieldProp` pero limpia `label`.
+     * val-form ya renderiza el título del campo con `<val-title>` arriba del input;
+     * si además pasáramos `label` al `<ion-select>`, este lo pinta DENTRO del pill
+     * → redundancia visual ("Tipo" dos veces). Reusa el mismo memo (con la entrada
+     * ya label-stripped) para no romper la identidad de referencia.
+     */
+    getSelectProp(field: InputMetadata): InputMetadata;
+    /**
+     * Adapter — convierte un `InputMetadata` (con type=HANDLE) a `UsernameInputMetadata`.
+     * El check de disponibilidad se resuelve dentro del component (AuthService inyectado);
+     * el caller puede sobrescribirlo pasando `field.errors` o un `UsernameInputMetadata`
+     * custom usando type=TEXT si necesita otra fuente de truth.
+     */
+    getUsernameProp(field: InputMetadata): UsernameInputMetadata;
+    /**
+     * Adapter — convierte un `InputMetadata` (con type=TEXTAREA) a `TextareaInputMetadata`.
+     * Defaults sensatos: autoGrow + counter habilitado, 4-12 rows.
+     */
+    getTextareaProp(field: InputMetadata): TextareaInputMetadata;
+    get isAtEndOfForm(): boolean;
+    get Form(): FormGroup;
+    get FormState(): {
+        form: FormGroup;
+        data: FormMetadata;
+    };
+    get actions(): ButtonMetadata[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "val-form", never, { "props": { "alias": "props"; "required": false; }; }, { "onSubmit": "onSubmit"; "onInvalid": "onInvalid"; "onSelectChange": "onSelectChange"; }, never, ["*"], true, never>;
+}