@pecb-ui/components 1.1.2 → 2.0.0

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

@@ -1,155 +0,0 @@
-import { EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import * as i0 from "@angular/core";
-export type DatepickerSize = 'sm' | 'md' | 'lg';
-interface CalendarDay {
-    date: Date;
-    day: number;
-    isCurrentMonth: boolean;
-    isSelected: boolean;
-    isToday: boolean;
-}
-/**
- * A professional datepicker component with calendar dropdown.
- * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
- *
- * @example
- * ```html
- * <pecb-datepicker
- *   label="Date"
- *   placeholder="Choose Date"
- *   [(ngModel)]="selectedDate"
- * ></pecb-datepicker>
- *
- * <!-- With custom configuration -->
- * <pecb-datepicker
- *   label="Birth Date"
- *   [required]="true"
- *   size="lg"
- *   (dateChange)="handleDateChange($event)"
- * ></pecb-datepicker>
- * ```
- *
- * @publicApi
- */
-export declare class DatepickerComponent implements ControlValueAccessor {
-    private elementRef;
-    private cdr;
-    inputElement?: ElementRef<HTMLInputElement>;
-    /**
-     * Unique ID for the datepicker element
-     */
-    id: string;
-    /**
-     * Label text to display above the input
-     */
-    label?: string;
-    /**
-     * Placeholder text for the input
-     */
-    placeholder: string;
-    /**
-     * The size of the datepicker
-     */
-    size: DatepickerSize;
-    /**
-     * Whether the field is required
-     */
-    required: boolean;
-    /**
-     * Whether the datepicker is disabled
-     */
-    disabled: boolean;
-    /**
-     * Date format for display (default: MM/DD/YYYY)
-     */
-    dateFormat: string;
-    /**
-     * Minimum selectable date
-     */
-    minDate?: Date;
-    /**
-     * Maximum selectable date
-     */
-    maxDate?: Date;
-    /**
-     * Event emitted when date is selected
-     */
-    dateChange: EventEmitter<Date | null>;
-    /**
-     * Event emitted when calendar is opened
-     */
-    opened: EventEmitter<void>;
-    /**
-     * Event emitted when calendar is closed
-     */
-    closed: EventEmitter<void>;
-    selectedDate: Date | null;
-    isCalendarOpen: boolean;
-    currentMonth: Date;
-    calendarDays: CalendarDay[];
-    weekDays: string[];
-    monthNames: string[];
-    private onChange;
-    private onTouched;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
-    /**
-     * Get CSS classes for the datepicker wrapper
-     */
-    get wrapperClasses(): string[];
-    /**
-     * Get formatted display value
-     */
-    get displayValue(): string;
-    /**
-     * Get current month and year display
-     */
-    get monthYearDisplay(): string;
-    /**
-     * Toggle calendar dropdown
-     */
-    toggleCalendar(): void;
-    /**
-     * Close calendar
-     */
-    closeCalendar(): void;
-    /**
-     * Navigate to previous month
-     */
-    previousMonth(): void;
-    /**
-     * Navigate to next month
-     */
-    nextMonth(): void;
-    /**
-     * Select a date
-     */
-    selectDate(day: CalendarDay): void;
-    /**
-     * Generate calendar days
-     */
-    private generateCalendar;
-    /**
-     * Format date for display
-     */
-    private formatDate;
-    /**
-     * Listen for clicks outside to close calendar
-     */
-    onDocumentClick(event: MouseEvent): void;
-    /**
-     * Handle keyboard navigation
-     */
-    onKeyDown(event: KeyboardEvent): void;
-    /**
-     * Clear selected date
-     */
-    clearDate(event: MouseEvent): void;
-    writeValue(value: Date | null): void;
-    registerOnChange(fn: (value: Date | null) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "pecb-datepicker", never, { "id": { "alias": "id"; "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; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
-}
-export {};

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

@@ -1,144 +0,0 @@
-import { EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import * as i0 from "@angular/core";
-export interface DropdownOption {
-    label: string;
-    value: unknown;
-    disabled?: boolean;
-}
-export type DropdownSize = 'sm' | 'md' | 'lg';
-/**
- * A professional dropdown/select component with multi-select and search support.
- * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
- *
- * @example
- * ```html
- * <!-- Single select -->
- * <pecb-dropdown
- *   label="Select option"
- *   [options]="options"
- *   [(ngModel)]="selectedValue"
- * ></pecb-dropdown>
- *
- * <!-- Multi-select with search -->
- * <pecb-dropdown
- *   label="Select multiple"
- *   [options]="options"
- *   [multiple]="true"
- *   [searchable]="true"
- *   [(ngModel)]="selectedValues"
- * ></pecb-dropdown>
- * ```
- *
- * @publicApi
- */
-export declare class DropdownComponent implements ControlValueAccessor {
-    private cdr;
-    private elementRef;
-    searchInput?: ElementRef<HTMLInputElement>;
-    /**
-     * Unique ID for the dropdown element
-     */
-    id: string;
-    /**
-     * Label text to display
-     */
-    label?: string;
-    /**
-     * The size of the dropdown
-     */
-    size: DropdownSize;
-    /**
-     * List of options
-     */
-    options: DropdownOption[];
-    /**
-     * Whether multiple selection is enabled
-     */
-    multiple: boolean;
-    /**
-     * Whether search is enabled
-     */
-    searchable: boolean;
-    /**
-     * Maximum height for dropdown panel (in pixels)
-     */
-    maxHeight: number;
-    /**
-     * Whether the dropdown is disabled
-     */
-    disabled: boolean;
-    /**
-     * Whether the field is required
-     */
-    required: boolean;
-    /**
-     * Whether to show error state
-     */
-    error: boolean;
-    /**
-     * Error message to display
-     */
-    errorMessage?: string;
-    /**
-     * Helper text to display below dropdown
-     */
-    helperText?: string;
-    /**
-     * Event emitted when selection changes
-     */
-    selectionChange: EventEmitter<unknown>;
-    isOpen: boolean;
-    searchQuery: string;
-    selectedValues: unknown[];
-    focusedIndex: number;
-    private onChange;
-    private onTouched;
-    constructor(cdr: ChangeDetectorRef, elementRef: ElementRef);
-    /**
-     * Get CSS classes for the dropdown wrapper
-     */
-    get wrapperClasses(): string[];
-    /**
-     * Check if dropdown has value
-     */
-    get hasValue(): boolean;
-    /**
-     * Get filtered options based on search query
-     */
-    get filteredOptions(): DropdownOption[];
-    /**
-     * Get display text for selected value(s)
-     */
-    get displayText(): string;
-    /**
-     * Toggle dropdown open/close
-     */
-    toggleDropdown(): void;
-    /**
-     * Select an option
-     */
-    selectOption(option: DropdownOption): void;
-    /**
-     * Check if option is selected
-     */
-    isSelected(option: DropdownOption): boolean;
-    /**
-     * Handle search input
-     */
-    onSearchInput(event: Event): void;
-    /**
-     * Handle keyboard navigation
-     */
-    onKeyDown(event: KeyboardEvent): void;
-    /**
-     * Close dropdown when clicking outside
-     */
-    onDocumentClick(event: MouseEvent): void;
-    writeValue(value: unknown): void;
-    registerOnChange(fn: (value: unknown) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "pecb-dropdown", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
-}

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

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

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

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