@pecb-ui/components 1.1.2

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

@@ -0,0 +1,215 @@
+import { EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+export type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * A professional input component with floating label and multiple types.
+ * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
+ *
+ * @example
+ * ```html
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email"
+ * ></pecb-input>
+ *
+ * <!-- With predefined icon -->
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   icon="email"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With custom SVG icon -->
+ * <pecb-input
+ *   label="Phone"
+ *   type="tel"
+ *   [icon]="'<svg>...</svg>'"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With error state -->
+ * <pecb-input
+ *   label="Password"
+ *   type="password"
+ *   [error]="true"
+ *   errorMessage="Password is required"
+ * ></pecb-input>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class InputComponent implements ControlValueAccessor {
+    private cdr;
+    private sanitizer;
+    inputElement?: ElementRef<HTMLInputElement>;
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Input type
+     */
+    type: InputType;
+    /**
+     * Label text to display
+     */
+    label?: string;
+    /**
+     * Placeholder text (shown when label is not present)
+     */
+    placeholder: string;
+    /**
+     * The size of the input
+     */
+    size: InputSize;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether to show error state
+     */
+    error: boolean;
+    /**
+     * Error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Helper text to display below input
+     */
+    helperText?: string;
+    /**
+     * Icon to display - can be a predefined name ('email', 'search', 'user') or custom SVG string
+     */
+    icon?: string;
+    /**
+     * Icon position (left or right)
+     */
+    iconPosition: 'left' | 'right';
+    /**
+     * Left icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    leftIcon?: string;
+    /**
+     * Right icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    rightIcon?: string;
+    /**
+     * Whether to show clear button
+     */
+    clearable: boolean;
+    /**
+     * Maximum length of input
+     */
+    maxLength?: number;
+    /**
+     * Minimum value (for number type)
+     */
+    min?: number;
+    /**
+     * Maximum value (for number type)
+     */
+    max?: number;
+    /**
+     * Step value (for number type)
+     */
+    step?: number;
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete?: string;
+    /**
+     * Event emitted when value changes
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Event emitted on blur
+     */
+    blurred: EventEmitter<void>;
+    /**
+     * Event emitted on focus
+     */
+    focused: EventEmitter<void>;
+    /**
+     * Event emitted when clear button is clicked
+     */
+    cleared: EventEmitter<void>;
+    value: string;
+    isFocused: boolean;
+    showPassword: boolean;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef, sanitizer: DomSanitizer);
+    /**
+     * Get CSS classes for the input wrapper
+     */
+    get wrapperClasses(): string[];
+    /**
+     * Get the actual input type (handles password visibility toggle)
+     */
+    get inputType(): string;
+    /**
+     * Check if clear button should be shown
+     */
+    get showClearButton(): boolean;
+    /**
+     * Check if password toggle should be shown
+     */
+    get showPasswordToggle(): boolean;
+    /**
+     * Get computed left icon
+     */
+    get computedLeftIcon(): string | undefined;
+    /**
+     * Get computed right icon
+     */
+    get computedRightIcon(): string | undefined;
+    /**
+     * Handle input change
+     */
+    onInput(event: Event): void;
+    /**
+     * Handle focus event
+     */
+    onFocus(): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    /**
+     * Clear input value
+     */
+    clearValue(event: MouseEvent): void;
+    /**
+     * Toggle password visibility
+     */
+    togglePasswordVisibility(event: MouseEvent): void;
+    /**
+     * Focus the input
+     */
+    focus(): void;
+    /**
+     * Sanitize custom icon HTML/SVG
+     */
+    sanitizeIcon(icon: string | undefined): SafeHtml;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "pecb-input", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; }, { "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "cleared": "cleared"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,53 @@
+import { EventEmitter, OnChanges, SimpleChanges, ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export type PaginationSize = 'sm' | 'md' | 'lg';
+export type PaginationVariant = 'full' | 'compact' | 'minimal' | 'centered';
+export interface PageChangeEvent {
+    page: number;
+    pageSize: number;
+    startIndex: number;
+    endIndex: number;
+}
+export declare class PaginationComponent implements OnChanges {
+    private elementRef;
+    totalItems: number;
+    pageSize: number;
+    currentPage: number;
+    pageSizeOptions: number[];
+    size: PaginationSize;
+    variant: PaginationVariant;
+    showPageSizeSelector: boolean;
+    showItemsInfo: boolean;
+    maxVisiblePages: number;
+    disabled: boolean;
+    ariaLabel: string;
+    pageChange: EventEmitter<PageChangeEvent>;
+    pageSizeChange: EventEmitter<number>;
+    totalPages: number;
+    visiblePages: (number | string)[];
+    isDropdownOpen: boolean;
+    constructor(elementRef: ElementRef);
+    onDocumentClick(event: MouseEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    get containerClasses(): string[];
+    get showPages(): boolean;
+    get showPageSize(): boolean;
+    get itemsInfoText(): string;
+    get startIndex(): number;
+    get endIndex(): number;
+    get canGoPrevious(): boolean;
+    get canGoNext(): boolean;
+    private calculateTotalPages;
+    private updateVisiblePages;
+    goToPage(page: number): void;
+    goToPrevious(): void;
+    goToNext(): void;
+    onPageSizeChange(newSize: number): void;
+    toggleDropdown(): void;
+    closeDropdown(): void;
+    private emitPageChange;
+    isNumber(value: number | string): boolean;
+    trackByPage(index: number, page: number | string): number | string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "pecb-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; }; "showItemsInfo": { "alias": "showItemsInfo"; "required": false; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,93 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export type RadioVariant = 'dot' | 'filled';
+export type RadioLabelPosition = 'right' | 'left';
+/**
+ * A professional radio button component with label and description support.
+ * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
+ *
+ * @example
+ * ```html
+ * <!-- Default variant with inner dot -->
+ * <pecb-radio
+ *   label="Option 1"
+ *   description="This is a description"
+ *   [(ngModel)]="selectedValue"
+ *   value="option1"
+ * ></pecb-radio>
+ *
+ * <!-- Filled variant -->
+ * <pecb-radio
+ *   label="Option 1"
+ *   variant="filled"
+ *   [(ngModel)]="selectedValue"
+ *   value="option1"
+ * ></pecb-radio>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class RadioComponent implements ControlValueAccessor {
+    private cdr;
+    /**
+     * Unique ID for the radio element
+     */
+    id: string;
+    /**
+     * Name attribute for the radio group
+     */
+    name?: string;
+    /**
+     * Value of this radio button
+     */
+    value: unknown;
+    /**
+     * Visual variant of the radio button
+     */
+    variant: RadioVariant;
+    /**
+     * Label text to display
+     */
+    label?: string;
+    /**
+     * Description text to display below label
+     */
+    description?: string;
+    /**
+     * Position of the label relative to the radio control.
+     * 'right' (default): [radio] Title Description
+     * 'left': Title Description [radio]
+     */
+    labelPosition: RadioLabelPosition;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when selection changes
+     */
+    selectionChange: EventEmitter<unknown>;
+    checked: boolean;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef);
+    /**
+     * Get CSS classes for the radio wrapper
+     */
+    get wrapperClasses(): string[];
+    /**
+     * Handle radio selection
+     */
+    onRadioChange(event: Event): void;
+    /**
+     * Handle blur event
+     */
+    onBlur(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "pecb-radio", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}

package/lib/components/right-modal/right-modal.component.d.ts

@@ -0,0 +1,137 @@
+import { EventEmitter, OnInit, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export type RightModalSize = 'sm' | 'md' | 'lg';
+/**
+ * A right-side sliding modal/drawer component.
+ * Slides in from the right edge of the screen with backdrop overlay.
+ * Fully accessible with WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```html
+ * <pecb-right-modal
+ *   [isOpen]="isModalOpen"
+ *   (closed)="onModalClose()"
+ *   ariaLabel="Exam Details"
+ * >
+ *   <div pecbRightModalHeader>
+ *     <h2>Exam Details</h2>
+ *   </div>
+ *   <div pecbRightModalContent>
+ *     <p>Modal content goes here</p>
+ *   </div>
+ *   <div pecbRightModalFooter>
+ *     <button>Action</button>
+ *   </div>
+ * </pecb-right-modal>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class RightModalComponent implements OnInit, OnDestroy, AfterViewInit {
+    /**
+     * Unique ID for the modal element
+     */
+    id: string;
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Size of the modal panel
+     */
+    size: RightModalSize;
+    /**
+     * Whether clicking the backdrop closes the modal
+     */
+    closeOnBackdropClick: boolean;
+    /**
+     * Whether pressing Escape closes the modal
+     */
+    closeOnEscape: boolean;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton: boolean;
+    /**
+     * Accessible label for the modal
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that labels this modal
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID of element that describes this modal
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Emitted when the modal is closed
+     */
+    closed: EventEmitter<void>;
+    /**
+     * Emitted when the modal is opened
+     */
+    opened: EventEmitter<void>;
+    modalPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Get CSS classes for the modal container
+     */
+    get modalClasses(): string[];
+    /**
+     * Get CSS classes for the modal panel
+     */
+    get panelClasses(): string[];
+    /**
+     * Handle backdrop click
+     */
+    onBackdropClick(event: MouseEvent): void;
+    /**
+     * Handle keyboard events
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Close the modal
+     */
+    close(): void;
+    /**
+     * Called when modal opens
+     */
+    private onOpen;
+    /**
+     * Setup focus trap after view is ready
+     */
+    private setupFocusTrap;
+    /**
+     * Cleanup resources
+     */
+    private cleanup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RightModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "size": { "alias": "size"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
+}
+/**
+ * Header directive for right modal
+ */
+export declare class RightModalHeaderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RightModalHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalHeaderDirective, "[pecbRightModalHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Content directive for right modal
+ */
+export declare class RightModalContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RightModalContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalContentDirective, "[pecbRightModalContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Footer directive for right modal
+ */
+export declare class RightModalFooterDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RightModalFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalFooterDirective, "[pecbRightModalFooter]", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,97 @@
+import { EventEmitter } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export interface SidebarMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    active?: boolean;
+    children?: SidebarMenuItem[];
+    expanded?: boolean;
+}
+export interface SidebarSection {
+    id: string;
+    title?: string;
+    items: SidebarMenuItem[];
+}
+/**
+ * A professional sidebar navigation component with collapsible sections and nested items.
+ * Perfect for application navigation with hierarchical menu structures.
+ *
+ * @example
+ * ```html
+ * <!-- Basic sidebar -->
+ * <pecb-sidebar
+ *   [sections]="menuSections"
+ *   (itemClick)="onMenuItemClick($event)"
+ * ></pecb-sidebar>
+ *
+ * <!-- With logo header -->
+ * <pecb-sidebar
+ *   [sections]="menuSections"
+ *   [showHeader]="true"
+ *   [sidebarLogo]="logoSvg"
+ * ></pecb-sidebar>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class SidebarComponent {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    /**
+     * Array of sidebar sections with menu items
+     */
+    sections: SidebarSection[];
+    /**
+     * Whether to show the header section
+     */
+    showHeader: boolean;
+    /**
+     * Sidebar logo as an SVG string. Rendered in the header area.
+     */
+    sidebarLogo?: string;
+    /**
+     * Whether to show the footer section
+     */
+    showFooter: boolean;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    itemClick: EventEmitter<SidebarMenuItem>;
+    /**
+     * Event emitted when the sidebar collapse state changes
+     */
+    collapseChange: EventEmitter<boolean>;
+    /**
+     * Handle menu item click
+     */
+    onItemClick(item: SidebarMenuItem, event: Event): void;
+    /**
+     * Toggle sidebar collapse state
+     */
+    toggleCollapse(): void;
+    /**
+     * Sanitize icon SVG HTML to prevent Angular from stripping SVG elements
+     */
+    getSafeIcon(icon: string): SafeHtml;
+    /**
+     * TrackBy for sections
+     */
+    trackBySection(_index: number, section: SidebarSection): string;
+    /**
+     * TrackBy for menu items
+     */
+    trackByItem(_index: number, item: SidebarMenuItem): string;
+    /**
+     * Get CSS classes for a menu item
+     */
+    getItemClasses(item: SidebarMenuItem, isChild?: boolean, isNested?: boolean): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "pecb-sidebar", never, { "sections": { "alias": "sections"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "itemClick": "itemClick"; "collapseChange": "collapseChange"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+}

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

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export type StatusType = 'warning' | 'action' | 'success' | 'error' | 'different' | 'disabled' | 'neutral';
+export type StatusVariant = 'accent' | 'filled' | 'outline' | 'custom';
+export type StatusSize = 'sm' | 'md' | 'lg';
+export declare class StatusComponent {
+    private _id;
+    type: StatusType;
+    variant: StatusVariant;
+    size: StatusSize;
+    ariaLabel?: string;
+    /** Text content to display (alternative to ng-content, useful for dynamic components) */
+    text?: string;
+    /** Custom CSS class(es) to add to the status element */
+    customClass?: string;
+    get id(): string;
+    get statusClasses(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusComponent, "pecb-status", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "text": { "alias": "text"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}