@pecb-ui/components 1.1.2 → 2.0.0

package/lib/components/table/table.component.d.ts

@@ -1,403 +0,0 @@
-import { EventEmitter, TemplateRef, Type } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { PageChangeEvent } from '../pagination/pagination.component';
-import * as i0 from "@angular/core";
-/**
- * Defines the available table sizes
- */
-export type TableSize = 'sm' | 'md' | 'lg';
-/**
- * Defines the available table variants
- */
-export type TableVariant = 'default' | 'striped' | 'bordered';
-/**
- * Defines built-in column types
- */
-export type PecbTableColumnType = 'text' | 'status' | 'action' | 'user' | 'custom';
-/**
- * Defines built-in component names for columns
- */
-export type PecbTableColumnComponent = 'status' | 'action' | 'user';
-/**
- * Action button definition for action columns
- */
-export interface TableAction {
-    /** Unique identifier for the action */
-    id: string;
-    /** Icon name or type */
-    icon: 'view' | 'edit' | 'delete' | 'download' | 'copy' | 'custom';
-    /** Tooltip/title text */
-    tooltip?: string;
-    /** Custom icon SVG (when icon is 'custom') */
-    customIcon?: string;
-    /** Whether the action is disabled */
-    disabled?: boolean;
-    /** Variant for styling (e.g., 'danger' for delete) */
-    variant?: 'default' | 'danger';
-    /** Click handler for this specific action */
-    action?: (row: any, index: number) => void;
-}
-/**
- * Status mapping configuration
- */
-export interface TableStatusConfig {
-    /** Map of value to status type */
-    typeMap?: Record<string, string>;
-    /** Status variant */
-    variant?: 'accent' | 'filled' | 'outline';
-    /** Status size */
-    size?: 'sm' | 'md' | 'lg';
-}
-/**
- * User cell configuration
- */
-export interface TableUserConfig {
-    /** Key for the avatar/image URL */
-    avatarKey?: string;
-    /** Key for the name */
-    nameKey?: string;
-    /** Key for the secondary text (e.g., email) */
-    secondaryKey?: string;
-}
-/**
- * Column definition for the table
- */
-export interface PecbTableColumn {
-    /** Unique key for the column, used to access data */
-    key: string;
-    /** Display label for the column header */
-    label: string;
-    /** Width of the column (e.g., '200px', '20%', 'auto') */
-    width?: string;
-    /** Alignment of the column content */
-    align?: 'left' | 'center' | 'right';
-    /** Whether the column is sortable */
-    sortable?: boolean;
-    /** Custom template reference for cell content */
-    cellTemplate?: TemplateRef<any>;
-    /** Custom template reference for header content */
-    headerTemplate?: TemplateRef<any>;
-    /** CSS class to apply to the column */
-    cssClass?: string;
-    /** Built-in column type (deprecated, use 'component' instead) */
-    type?: PecbTableColumnType;
-    /** Built-in component to render: 'status', 'action', 'user' */
-    component?: PecbTableColumnComponent;
-    /** Dynamic component class to render in the cell (e.g., StatusComponent) */
-    dynamicComponent?: Type<any>;
-    /** Inputs to pass to the dynamic component */
-    componentInputs?: Record<string, any>;
-    /** Function to generate dynamic inputs based on row data */
-    componentInputsFn?: (row: any, value: any, index: number) => Record<string, any>;
-    /** Action buttons configuration (when component is 'action') */
-    actions?: TableAction[];
-    /** Status configuration (when component is 'status') */
-    statusConfig?: TableStatusConfig;
-    /** User cell configuration (when component is 'user') */
-    userConfig?: TableUserConfig;
-}
-/**
- * Sort event emitted when a sortable column is clicked
- */
-export interface TableSortEvent {
-    /** Column key that was sorted */
-    column: string;
-    /** Sort direction */
-    direction: 'asc' | 'desc' | null;
-}
-/**
- * Row action event emitted when an action button is clicked
- */
-export interface TableRowActionEvent {
-    /** Type of action performed */
-    action: string;
-    /** Row data for the action */
-    row: any;
-    /** Row index */
-    index: number;
-}
-/**
- * Row selection event emitted when rows are selected/deselected
- */
-export interface TableSelectionEvent {
-    /** Selected rows data */
-    selectedRows: any[];
-    /** Selected row indices */
-    selectedIndices: number[];
-}
-/**
- * Table component for displaying tabular data with pagination support.
- *
- * @example
- * ```html
- * <pecb-table
- *   [columns]="columns"
- *   [data]="tableData"
- *   [showPagination]="true"
- *   [totalItems]="500"
- *   [pageSize]="15"
- *   (pageChange)="onPageChange($event)"
- *   (rowAction)="onRowAction($event)">
- * </pecb-table>
- * ```
- */
-export declare class TableComponent {
-    private sanitizer;
-    constructor(sanitizer: DomSanitizer);
-    /**
-     * Column definitions for the table
-     */
-    columns: PecbTableColumn[];
-    /**
-     * Data array to display in the table
-     */
-    data: any[];
-    /**
-     * Size variant of the table
-     * @default 'md'
-     */
-    size: TableSize;
-    /**
-     * Visual variant of the table
-     * @default 'default'
-     */
-    variant: TableVariant;
-    /**
-     * Whether to show the table header
-     * @default true
-     */
-    showHeader: boolean;
-    /**
-     * Whether to enable row hover effect
-     * @default true
-     */
-    hoverable: boolean;
-    /**
-     * Whether to show pagination
-     * @default true
-     */
-    showPagination: boolean;
-    /**
-     * Total number of items for pagination
-     */
-    totalItems: number;
-    /**
-     * Current page number (1-based)
-     * @default 1
-     */
-    currentPage: number;
-    /**
-     * Number of items per page
-     * @default 15
-     */
-    pageSize: number;
-    /**
-     * Available page size options
-     */
-    pageSizeOptions: number[];
-    /**
-     * Whether to show page size selector in pagination
-     * @default true
-     */
-    showPageSizeSelector: boolean;
-    /**
-     * Pagination variant
-     * @default 'full'
-     */
-    paginationVariant: 'full' | 'compact' | 'minimal' | 'centered';
-    /**
-     * Message to display when there is no data
-     */
-    emptyMessage: string;
-    /**
-     * Whether to show loading state
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * Whether to enable row selection
-     * @default false
-     */
-    selectable: boolean;
-    /**
-     * Currently selected row indices
-     */
-    selectedIndices: number[];
-    /**
-     * Whether the table has a fixed header
-     * @default false
-     */
-    stickyHeader: boolean;
-    /**
-     * Maximum height of the table body (enables scrolling)
-     */
-    maxHeight?: string;
-    /**
-     * Column key currently being sorted
-     */
-    sortColumn?: string;
-    /**
-     * Current sort direction
-     */
-    sortDirection: 'asc' | 'desc' | null;
-    /**
-     * ARIA label for the table
-     */
-    ariaLabel: string;
-    /**
-     * Emitted when a page change occurs
-     */
-    pageChange: EventEmitter<PageChangeEvent>;
-    /**
-     * Emitted when page size changes
-     */
-    pageSizeChange: EventEmitter<number>;
-    /**
-     * Emitted when a row is clicked
-     */
-    rowClick: EventEmitter<{
-        row: any;
-        index: number;
-    }>;
-    /**
-     * Emitted when a row action is triggered
-     */
-    rowAction: EventEmitter<TableRowActionEvent>;
-    /**
-     * Emitted when sorting changes
-     */
-    sortChange: EventEmitter<TableSortEvent>;
-    /**
-     * Emitted when row selection changes
-     */
-    selectionChange: EventEmitter<TableSelectionEvent>;
-    /**
-     * Custom template for empty state
-     */
-    emptyTemplate?: TemplateRef<any>;
-    /**
-     * Custom template for loading state
-     */
-    loadingTemplate?: TemplateRef<any>;
-    /**
-     * Gets the CSS classes for the table container
-     */
-    get containerClasses(): string;
-    /**
-     * Gets the CSS classes for the pagination container
-     */
-    get paginationClasses(): string;
-    /**
-     * Gets the CSS classes for the table element
-     */
-    get tableClasses(): string;
-    /**
-     * Gets the value from a row for a given column key
-     * Supports nested keys like 'user.name'
-     */
-    getCellValue(row: any, key: string): any;
-    /**
-     * Gets the alignment class for a column
-     */
-    getAlignmentClass(column: PecbTableColumn): string;
-    /**
-     * Handles row click events
-     */
-    onRowClick(row: any, index: number): void;
-    /**
-     * Handles row action button clicks
-     */
-    onRowAction(action: string, row: any, index: number, event: Event): void;
-    /**
-     * Handles column header click for sorting
-     */
-    onHeaderClick(column: PecbTableColumn): void;
-    /**
-     * Toggles row selection
-     */
-    toggleRowSelection(index: number): void;
-    /**
-     * Toggles all rows selection
-     */
-    toggleAllSelection(): void;
-    /**
-     * Checks if a row is selected
-     */
-    isRowSelected(index: number): boolean;
-    /**
-     * Checks if all rows are selected
-     */
-    isAllSelected(): boolean;
-    /**
-     * Checks if some rows are selected (for indeterminate state)
-     */
-    isSomeSelected(): boolean;
-    /**
-     * Handles page change from pagination component
-     */
-    onPageChange(event: PageChangeEvent): void;
-    /**
-     * Handles page size change from pagination component
-     */
-    onPageSizeChange(newSize: number): void;
-    /**
-     * Gets the sort icon state for a column
-     */
-    getSortState(column: PecbTableColumn): 'asc' | 'desc' | 'none';
-    /**
-     * Tracks rows by index for ngFor performance
-     */
-    trackByIndex(index: number): number;
-    /**
-     * Tracks columns by key for ngFor performance
-     */
-    trackByKey(_: number, column: PecbTableColumn): string;
-    /**
-     * Gets the effective column type (supports both 'type' and 'component' properties)
-     */
-    getColumnType(column: PecbTableColumn): string;
-    /**
-     * Gets the status type for a value based on column config
-     */
-    getStatusType(value: any, column: PecbTableColumn): any;
-    /**
-     * Gets the status variant for a column
-     */
-    getStatusVariant(column: PecbTableColumn): any;
-    /**
-     * Gets the status size for a column
-     */
-    getStatusSize(column: PecbTableColumn): any;
-    /**
-     * Gets user display data from row
-     */
-    getUserData(row: any, column: PecbTableColumn): {
-        avatar: string;
-        name: string;
-        secondary: string;
-    };
-    /**
-     * Gets default actions if none specified
-     */
-    getActions(column: PecbTableColumn): TableAction[];
-    /**
-     * Handles action button click
-     */
-    onActionClick(action: TableAction, row: any, index: number, event: Event): void;
-    /**
-     * Gets the inputs for a dynamic component
-     * Combines static componentInputs with row-specific data from componentInputsFn
-     */
-    getDynamicComponentInputs(row: any, column: PecbTableColumn, index: number): Record<string, any>;
-    /**
-     * Checks if column has a dynamic component
-     */
-    hasDynamicComponent(column: PecbTableColumn): boolean;
-    /**
-     * Sanitizes custom icon SVG for safe rendering
-     */
-    getSafeIcon(iconSvg: string | undefined): SafeHtml;
-    private emitSelectionChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "pecb-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; }; "paginationVariant": { "alias": "paginationVariant"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectedIndices": { "alias": "selectedIndices"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "sortColumn": { "alias": "sortColumn"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "rowAction": "rowAction"; "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["emptyTemplate", "loadingTemplate"], never, true, never>;
-}

package/lib/components/toggle/toggle.component.d.ts

@@ -1,74 +0,0 @@
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import * as i0 from "@angular/core";
-export type ToggleLabelPosition = 'right' | 'left';
-/**
- * A professional toggle/switch component with label and description support.
- * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
- *
- * @example
- * ```html
- * <pecb-toggle
- *   label="Enable notifications"
- *   description="Receive email notifications"
- *   [(ngModel)]="notificationsEnabled"
- * ></pecb-toggle>
- * ```
- *
- * @publicApi
- */
-export declare class ToggleComponent implements ControlValueAccessor {
-    private cdr;
-    /**
-     * Unique ID for the toggle element
-     */
-    id: string;
-    /**
-     * Name attribute for the toggle
-     */
-    name?: string;
-    /**
-     * Label text to display
-     */
-    label?: string;
-    /**
-     * Description text to display below label
-     */
-    description?: string;
-    /**
-     * Position of the label relative to the toggle control.
-     * 'right' (default): [toggle] Title Description
-     * 'left': Title Description [toggle]
-     */
-    labelPosition: ToggleLabelPosition;
-    /**
-     * Whether the toggle is disabled
-     */
-    disabled: boolean;
-    /**
-     * Event emitted when toggle state changes
-     */
-    toggleChange: EventEmitter<boolean>;
-    checked: boolean;
-    private onChange;
-    private onTouched;
-    constructor(cdr: ChangeDetectorRef);
-    /**
-     * Get CSS classes for the toggle wrapper
-     */
-    get wrapperClasses(): string[];
-    /**
-     * Handle toggle change
-     */
-    onToggleChange(event: Event): void;
-    /**
-     * Handle blur event
-     */
-    onBlur(): void;
-    writeValue(value: boolean): void;
-    registerOnChange(fn: (value: boolean) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "pecb-toggle", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "toggleChange": "toggleChange"; }, never, never, true, never>;
-}

package/lib/pecb-components.module.d.ts

@@ -1,37 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./components/button/button.component";
-import * as i3 from "./components/card/card.component";
-import * as i4 from "./components/status/status.component";
-import * as i5 from "./components/pagination/pagination.component";
-import * as i6 from "./components/table/table.component";
-import * as i7 from "./components/tab/tab.component";
-import * as i8 from "./components/datepicker/datepicker.component";
-import * as i9 from "./components/input/input.component";
-import * as i10 from "./components/radio/radio.component";
-import * as i11 from "./components/checkbox/checkbox.component";
-import * as i12 from "./components/toggle/toggle.component";
-import * as i13 from "./components/dropdown/dropdown.component";
-import * as i14 from "./components/right-modal/right-modal.component";
-import * as i15 from "./components/sidebar/sidebar.component";
-/**
- * PECB UI Components Module
- *
- * A professional Angular components library with TypeScript and SCSS.
- * Import this module to use all PECB UI components in your application.
- *
- * @example
- * ```typescript
- * import { PecbComponentsModule } from '@pecb-ui/components';
- *
- * @NgModule({
- *   imports: [PecbComponentsModule]
- * })
- * export class AppModule { }
- * ```
- */
-export declare class PecbComponentsModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PecbComponentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PecbComponentsModule, never, [typeof i1.CommonModule, typeof i2.ButtonComponent, typeof i3.CardComponent, typeof i3.CardHeaderComponent, typeof i3.CardBodyComponent, typeof i3.CardFooterComponent, typeof i4.StatusComponent, typeof i5.PaginationComponent, typeof i6.TableComponent, typeof i7.TabComponent, typeof i8.DatepickerComponent, typeof i9.InputComponent, typeof i10.RadioComponent, typeof i11.CheckboxComponent, typeof i12.ToggleComponent, typeof i13.DropdownComponent, typeof i14.RightModalComponent, typeof i14.RightModalHeaderDirective, typeof i14.RightModalContentDirective, typeof i14.RightModalFooterDirective, typeof i15.SidebarComponent], [typeof i2.ButtonComponent, typeof i3.CardComponent, typeof i3.CardHeaderComponent, typeof i3.CardBodyComponent, typeof i3.CardFooterComponent, typeof i4.StatusComponent, typeof i5.PaginationComponent, typeof i6.TableComponent, typeof i7.TabComponent, typeof i8.DatepickerComponent, typeof i9.InputComponent, typeof i10.RadioComponent, typeof i11.CheckboxComponent, typeof i12.ToggleComponent, typeof i13.DropdownComponent, typeof i14.RightModalComponent, typeof i14.RightModalHeaderDirective, typeof i14.RightModalContentDirective, typeof i14.RightModalFooterDirective, typeof i15.SidebarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PecbComponentsModule>;
-}

package/lib/services/loading.service.d.ts

@@ -1,129 +0,0 @@
-import { Observable } from 'rxjs';
-import * as i0 from "@angular/core";
-/**
- * Loading state for a specific operation
- */
-export interface LoadingState {
-    /** Unique identifier for the loading operation */
-    id: string;
-    /** Whether this operation is currently loading */
-    isLoading: boolean;
-    /** Optional message to display */
-    message?: string;
-    /** Optional progress percentage (0-100) */
-    progress?: number;
-}
-/**
- * A stateless, injectable loading service for managing loading states.
- *
- * This service provides a centralized way to track loading states across
- * the application, supporting multiple concurrent loading operations with
- * individual tracking capabilities.
- *
- * @example
- * ```typescript
- * import { LoadingService } from '@pecb-ui/components';
- *
- * @Component({...})
- * export class MyComponent {
- *   isLoading$ = this.loadingService.isLoading$('my-operation');
- *
- *   constructor(private loadingService: LoadingService) {}
- *
- *   async loadData(): Promise<void> {
- *     this.loadingService.start('my-operation', 'Loading data...');
- *     try {
- *       await this.fetchData();
- *     } finally {
- *       this.loadingService.stop('my-operation');
- *     }
- *   }
- * }
- * ```
- *
- * @publicApi
- */
-export declare class LoadingService {
-    private readonly loadingStates;
-    private readonly statesSubject;
-    /** Default loading operation ID */
-    private readonly defaultId;
-    /**
-     * Observable of all loading states
-     */
-    get states$(): Observable<Map<string, LoadingState>>;
-    /**
-     * Observable that emits true when any loading operation is active
-     */
-    get isAnyLoading$(): Observable<boolean>;
-    /**
-     * Get observable for a specific loading operation
-     * @param id - The loading operation identifier
-     */
-    isLoading$(id?: string): Observable<boolean>;
-    /**
-     * Get observable for loading state with message
-     * @param id - The loading operation identifier
-     */
-    getState$(id?: string): Observable<LoadingState | undefined>;
-    /**
-     * Check if a specific operation is currently loading (synchronous)
-     * @param id - The loading operation identifier
-     */
-    isLoading(id?: string): boolean;
-    /**
-     * Check if any operation is currently loading (synchronous)
-     */
-    isAnyLoading(): boolean;
-    /**
-     * Start a loading operation
-     * @param id - The loading operation identifier
-     * @param message - Optional message to display
-     */
-    start(id?: string, message?: string): void;
-    /**
-     * Stop a loading operation
-     * @param id - The loading operation identifier
-     */
-    stop(id?: string): void;
-    /**
-     * Update progress for a loading operation
-     * @param id - The loading operation identifier
-     * @param progress - Progress percentage (0-100)
-     * @param message - Optional updated message
-     */
-    setProgress(id: string, progress: number, message?: string): void;
-    /**
-     * Update the message for a loading operation
-     * @param id - The loading operation identifier
-     * @param message - New message to display
-     */
-    setMessage(id: string, message: string): void;
-    /**
-     * Stop all loading operations
-     */
-    stopAll(): void;
-    /**
-     * Remove a loading state completely
-     * @param id - The loading operation identifier
-     */
-    remove(id: string): void;
-    /**
-     * Execute an async operation with automatic loading state management
-     * @param id - The loading operation identifier
-     * @param operation - The async operation to execute
-     * @param message - Optional loading message
-     * @returns The result of the operation
-     */
-    withLoading<T>(id: string, operation: () => Promise<T>, message?: string): Promise<T>;
-    /**
-     * Update a loading state
-     */
-    private updateState;
-    /**
-     * Emit current states to subscribers
-     */
-    private emitStates;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LoadingService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<LoadingService>;
-}