juvo-rafa-library/lib/juvo-list/juvo-list.component.d.ts

A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.

import { EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * List column configuration interface
 * @interface ListColumn
 * @since 2.1.0
 */
export interface ListColumn {
    key: string;
    label: string;
    sortable?: boolean;
    width?: string;
    type?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
}
/**
 * List Component
 *
 * @description
 * A simple list component for displaying tabular data with basic functionality.
 * Originally designed for backoffice applications requiring data presentation.
 * Supports sorting, custom columns, and item selection.
 *
 * @example
 * ```html
 * <!-- Basic list -->
 * <juvo-list
 *   [data$]="listData$"
 *   [columns]="[
 *     { key: 'name', label: 'Name', sortable: true },
 *     { key: 'email', label: 'Email' },
 *     { key: 'status', label: 'Status', type: 'boolean' }
 *   ]"
 *   (itemSelected)="onItemSelected($event)">
 * </juvo-list>
 *
 * <!-- List with loading state -->
 * <juvo-list
 *   [data$]="userData$"
 *   [columns]="userColumns"
 *   [loading$]="userLoading$"
 *   [selectable]="true"
 *   (itemSelected)="handleSelection($event)">
 * </juvo-list>
 * ```
 *
 * @selector juvo-list
 * @since 2.1.0
 * @author Juvo Rafa Team
 */
export declare class JuvoListComponent {
    /** Observable data source */
    data$: Observable<any[]>;
    /** Column configuration */
    columns: ListColumn[];
    /** Loading state observable */
    loading$: Observable<boolean>;
    /** Whether items are selectable @default false */
    selectable: boolean;
    /** Whether to show header @default true */
    showHeader: boolean;
    /** Empty state message */
    emptyMessage: string;
    /** Loading message */
    loadingMessage: string;
    /** List size variant @default "medium" */
    size: 'small' | 'medium' | 'large';
    /** Whether to show borders @default true */
    bordered: boolean;
    /** Whether to show striped rows @default true */
    striped: boolean;
    /** Emitted when an item is selected */
    itemSelected: EventEmitter<any>;
    /** Emitted when an item is clicked */
    itemClicked: EventEmitter<any>;
    /** Emitted when column header is clicked for sorting */
    columnSort: EventEmitter<{
        column: ListColumn;
        direction: 'asc' | 'desc';
    }>;
    selectedItems: any[];
    sortColumn?: string;
    sortDirection: 'asc' | 'desc';
    /**
     * Gets CSS classes for the list container
     * @returns Combined CSS classes
     */
    get containerClasses(): string;
    /**
     * Handles item selection
     */
    onItemSelect(item: any): void;
    /**
     * Handles item click
     */
    onItemClick(item: any): void;
    /**
     * Handles column header click for sorting
     */
    onColumnHeaderClick(column: ListColumn): void;
    /**
     * Checks if an item is selected
     */
    isSelected(item: any): boolean;
    /**
     * Gets the display value for a cell
     */
    getCellValue(item: any, column: ListColumn): string;
    /**
     * Gets CSS classes for column header
     */
    getHeaderClasses(column: ListColumn): string;
    /**
     * Track by function for ngFor performance
     */
    trackByFn(index: number, item: any): any;
    static ɵfac: i0.ɵɵFactoryDeclaration<JuvoListComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<JuvoListComponent, "juvo-list", never, { "data$": { "alias": "data$"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "loading$": { "alias": "loading$"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; }, { "itemSelected": "itemSelected"; "itemClicked": "itemClicked"; "columnSort": "columnSort"; }, never, never, true, never>;
}