@pecb-ui/components 1.1.2

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

@@ -0,0 +1,102 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export type TabStyle = 'rounded' | 'line';
+export type TabSize = 'sm' | 'md';
+/**
+ * A professional tab component with multiple styles and sizes.
+ * Fully accessible with WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```html
+ * <pecb-tab
+ *   label="Tab Name"
+ *   [active]="true"
+ *   style="rounded"
+ *   size="md"
+ *   (clicked)="handleClick()"
+ * ></pecb-tab>
+ *
+ * <!-- With badge number and close button -->
+ * <pecb-tab
+ *   label="Tab Name"
+ *   [icon]="10"
+ *   [closable]="true"
+ *   [active]="true"
+ *   (closed)="handleClose()"
+ * ></pecb-tab>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class TabComponent {
+    /**
+     * Unique ID for the tab element
+     */
+    id: string;
+    /**
+     * The visual style of the tab
+     */
+    style: TabStyle;
+    /**
+     * The size of the tab
+     */
+    size: TabSize;
+    /**
+     * Label text to display
+     */
+    label: string;
+    /**
+     * Optional badge number to display after the label
+     */
+    icon?: number;
+    /**
+     * Whether the tab is in active state
+     */
+    active: boolean;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show close button
+     */
+    closable: boolean;
+    /**
+     * Accessible label for the tab
+     */
+    ariaLabel?: string;
+    /**
+     * ID of the tab panel this tab controls
+     */
+    ariaControls?: string;
+    /**
+     * Indicates if the tab panel is selected
+     */
+    ariaSelected?: boolean;
+    /**
+     * Event emitted when the tab is clicked
+     */
+    clicked: EventEmitter<string>;
+    /**
+     * Event emitted when the close button is clicked
+     */
+    closed: EventEmitter<string>;
+    /**
+     * Get CSS classes for the tab
+     */
+    get tabClasses(): string[];
+    /**
+     * Handle tab click
+     */
+    onClick(event: MouseEvent): void;
+    /**
+     * Handle close button click
+     */
+    onClose(event: MouseEvent): void;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "pecb-tab", never, { "id": { "alias": "id"; "required": false; }; "style": { "alias": "style"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "ariaSelected": { "alias": "ariaSelected"; "required": false; }; }, { "clicked": "clicked"; "closed": "closed"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,403 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,37 @@
+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>;
+}