@pecb-ui/components 1.1.2

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@pecb-ui/components" />
+export * from './public-api';

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

@@ -0,0 +1,130 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export type ButtonVariant = 'primary' | 'primary-outline' | 'primary-2' | 'primary-2-outline' | 'neutral' | 'neutral-outline' | 'secondary' | 'text' | 'destructive' | 'destructive-outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonIconStyle = 'none' | 'leading' | 'trailing' | 'icon-only';
+/**
+ * A professional button component with multiple variants and sizes.
+ * Fully accessible with WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```html
+ * <pecb-button variant="primary" size="md" (clicked)="handleClick()">
+ *   Click me
+ * </pecb-button>
+ *
+ * <!-- With leading icon -->
+ * <pecb-button variant="primary" iconStyle="leading" icon="+">
+ *   Add Item
+ * </pecb-button>
+ *
+ * <!-- Icon only button -->
+ * <pecb-button variant="secondary" iconStyle="icon-only" icon="+" ariaLabel="Add item"></pecb-button>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class ButtonComponent {
+    /**
+     * Unique ID for the button element
+     */
+    id: string;
+    /**
+     * The visual style variant of the button
+     */
+    variant: ButtonVariant;
+    /**
+     * The size of the button
+     */
+    size: ButtonSize;
+    /**
+     * Icon placement style
+     */
+    iconStyle: ButtonIconStyle;
+    /**
+     * Icon to display (used with iconStyle)
+     */
+    icon?: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the button should take full width
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the button is in loading state
+     */
+    loading: boolean;
+    /**
+     * Button type attribute
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Accessible label for the button (required for icon-only buttons)
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that labels this button
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID of element that describes this button
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Indicates the button controls an expandable element
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Indicates the pressed state for toggle buttons
+     */
+    ariaPressed?: boolean;
+    /**
+     * Indicates the button opens a popup (menu, listbox, dialog, etc.)
+     */
+    ariaHasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /**
+     * ID of the element controlled by this button
+     */
+    ariaControls?: string;
+    /**
+     * Event emitted when the button is clicked
+     */
+    clicked: EventEmitter<MouseEvent>;
+    /**
+     * Host binding for the component's ID
+     */
+    get hostId(): null;
+    /**
+     * Get CSS classes for the button
+     */
+    get buttonClasses(): string[];
+    /**
+     * Check if we should show leading icon
+     */
+    get showLeadingIcon(): boolean;
+    /**
+     * Check if we should show trailing icon
+     */
+    get showTrailingIcon(): boolean;
+    /**
+     * Check if this is icon-only button
+     */
+    get isIconOnly(): boolean;
+    /**
+     * Get the loading announcement text for screen readers
+     */
+    get loadingText(): string;
+    /**
+     * Handle button click
+     */
+    onClick(event: MouseEvent): void;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "pecb-button", never, { "id": { "alias": "id"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "iconStyle": { "alias": "iconStyle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,140 @@
+import * as i0 from "@angular/core";
+export type CardElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Semantic role for the card component
+ */
+export type CardRole = 'article' | 'region' | 'group' | 'listitem' | 'none';
+/**
+ * A professional card component for displaying content in a contained format.
+ * Fully accessible with WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```html
+ * <!-- Basic card -->
+ * <pecb-card elevation="md">
+ *   <pecb-card-header>
+ *     <h3>Card Title</h3>
+ *   </pecb-card-header>
+ *   <pecb-card-body>
+ *     <p>Card content goes here</p>
+ *   </pecb-card-body>
+ * </pecb-card>
+ *
+ * <!-- Accessible card with region role -->
+ * <pecb-card role="region" ariaLabel="Product Information">
+ *   <pecb-card-body>
+ *     <p>Product details...</p>
+ *   </pecb-card-body>
+ * </pecb-card>
+ *
+ * <!-- Card as article -->
+ * <pecb-card role="article" ariaLabelledBy="article-title">
+ *   <pecb-card-header>
+ *     <h2 id="article-title">Article Headline</h2>
+ *   </pecb-card-header>
+ *   <pecb-card-body>
+ *     <p>Article content...</p>
+ *   </pecb-card-body>
+ * </pecb-card>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class CardComponent {
+    /**
+     * Unique ID for the card element
+     */
+    id: string;
+    /**
+     * The elevation level (shadow depth) of the card
+     */
+    elevation: CardElevation;
+    /**
+     * Whether the card should be hoverable with elevation change
+     */
+    hoverable: boolean;
+    /**
+     * Whether to add padding to the card
+     */
+    noPadding: boolean;
+    /**
+     * Semantic role for the card (article, region, group, listitem, or none)
+     * Use 'article' for self-contained content, 'region' for significant sections
+     */
+    role: CardRole;
+    /**
+     * Accessible label for the card
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element that labels this card
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID of element that describes this card
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Get CSS classes for the card
+     */
+    get cardClasses(): string[];
+    /**
+     * Get the role attribute value
+     */
+    get roleAttribute(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "pecb-card", never, { "id": { "alias": "id"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "noPadding": { "alias": "noPadding"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Card header component for displaying title and actions.
+ *
+ * @example
+ * ```html
+ * <pecb-card-header>
+ *   <h3>Card Title</h3>
+ * </pecb-card-header>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class CardHeaderComponent {
+    /**
+     * Heading level for accessibility (1-6)
+     * Only used if the header content doesn't contain a heading element
+     */
+    headingLevel: number | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardHeaderComponent, "pecb-card-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Card body component for main content.
+ *
+ * @example
+ * ```html
+ * <pecb-card-body>
+ *   <p>Card content goes here</p>
+ * </pecb-card-body>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class CardBodyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardBodyComponent, "pecb-card-body", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Card footer component for actions and additional information.
+ *
+ * @example
+ * ```html
+ * <pecb-card-footer>
+ *   <button>Action</button>
+ * </pecb-card-footer>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class CardFooterComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardFooterComponent, "pecb-card-footer", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/checkbox/checkbox.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 CheckboxLabelPosition = 'right' | 'left';
+/**
+ * A professional checkbox component with label and description support.
+ * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
+ *
+ * @example
+ * ```html
+ * <pecb-checkbox
+ *   label="Accept terms"
+ *   description="I agree to the terms and conditions"
+ *   [(ngModel)]="accepted"
+ * ></pecb-checkbox>
+ * ```
+ *
+ * @publicApi
+ */
+export declare class CheckboxComponent implements ControlValueAccessor {
+    private cdr;
+    /**
+     * Unique ID for the checkbox element
+     */
+    id: string;
+    /**
+     * Name attribute for the checkbox
+     */
+    name?: string;
+    /**
+     * Label text to display
+     */
+    label?: string;
+    /**
+     * Description text to display below label
+     */
+    description?: string;
+    /**
+     * Position of the label relative to the checkbox control.
+     * 'right' (default): [checkbox] Title Description
+     * 'left': Title Description [checkbox]
+     */
+    labelPosition: CheckboxLabelPosition;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when checked state changes
+     */
+    checkedChange: EventEmitter<boolean>;
+    checked: boolean;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef);
+    /**
+     * Get CSS classes for the checkbox wrapper
+     */
+    get wrapperClasses(): string[];
+    /**
+     * Handle checkbox change
+     */
+    onCheckboxChange(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<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "pecb-checkbox", 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; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}

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

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

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