# Changelog

All notable changes to this project will be documented in this file.  
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),  
and this project adheres to [Semantic Versioning](https://semver.org/).

---

## [Unreleased]

---

## [0.0.3] - 2025-01-27

### 🐛 Bug Fixes
- **Naked Theme Button Visibility**: Fixed invisible buttons in naked theme
  - Added missing `--color-primary-default`, `--color-secondary-default`, and `--color-error-default` CSS variables
  - Added missing `--typography-font-family-default` and `--typography-font-size-default` variables
  - Primary buttons now display with blue background (`#0055ff`) and white text
  - Secondary buttons now display with orange background (`#ff6600`) and white text
  - Tertiary buttons now display with blue text (`#0055ff`) and transparent background with blue border
  - Destructive buttons now display with red background (`#d32f2f`) and white text
  - All button variants now have proper contrast ratios for accessibility
  - Updated `naked.theme.json` configuration and regenerated CSS tokens

---

## [0.0.2] - 2025-09-27

### 🆕 New Components
- **Badge Component** (`ccl-badge`) - Versatile status indicator and tag component
  - Multiple variants: default, success, error, warning, info, custom
  - Flexible sizing: small, medium, large
  - Interactive states: clickable and dismissible options
  - Count support with automatic overflow handling (999+)
  - Full accessibility with ARIA support and keyboard navigation
  - Design token integration for consistent theming
  - Responsive design with mobile optimization
  - Comprehensive test coverage (60+ test cases)

### 🆕 New Components
- **FormFieldWrapper Component** (`ccl-form-field-wrapper`) - Universal form control wrapper
  - Consistent labeling, hints, error states, and accessibility features
  - State management: default, error, success, disabled
  - Full ARIA support with proper label association and error announcements
  - Required field indicators with visual asterisk and ARIA attributes
  - Works with any form control (input, select, textarea, etc.)
  - Design token integration for consistent theming
  - Comprehensive test coverage (50 test cases)

- **Select Component** (`ccl-select`) - Dropdown select with single and multiple selection
  - Single and multiple selection support with typed events
  - Custom dropdown styling with SVG arrow
  - Option management with disabled states
  - Placeholder support for single selection
  - Size control for multiple selection
  - Full accessibility with keyboard navigation
  - Comprehensive test coverage (50 test cases)

- **Textarea Component** (`ccl-textarea`) - Multi-line text input with advanced features
  - Resize control: none, both, horizontal, vertical
  - Length constraints with min/max length validation
  - Real-time value change events
  - Readonly and disabled states
  - Custom styling with design token integration

- **Loading Component** (`ccl-loading`) - Versatile loading indicator with multiple variants
  - Three visual variants: spinner, progress bar, and pulse
  - Size options: small, medium, and large
  - Animation control with disable option for static states
  - Full accessibility with ARIA roles and screen reader support
  - Design token integration for consistent theming
  - Modern Angular control flow syntax (@if/@for)
  - Comprehensive test coverage (41 test cases)
  - Responsive design with reduced motion support

- **Date Field Component** (`ccl-datefield`) - Native HTML5 date input with form control support
  - Full ControlValueAccessor implementation for reactive forms integration
  - Date range validation with min/max date constraints
  - **Native HTML5 Date Picker** with built-in calendar interface
  - **Click-anywhere-to-open** calendar functionality
  - Input validation with error message display
  - Clear functionality with visual feedback
  - Modern Angular `@if` control flow syntax
  - Comprehensive test coverage (20 test cases)
  - Cross-browser native date picker support

### 🐛 Bug Fixes
- **Form Components Integration**: Fixed reactive forms integration for Select and Textarea components
  - **Select Component**: Implemented `ControlValueAccessor` for proper reactive forms integration
    - Added `NG_VALUE_ACCESSOR` provider for form control binding
    - Implemented `writeValue()`, `registerOnChange()`, `registerOnTouched()`, and `setDisabledState()` methods
    - Fixed `formControlName` binding to properly sync with FormControl state
    - Resolved form reset issues - `this.contactForm.reset()` now works correctly
    - Maintains backward compatibility with existing event-based usage
  - **Textarea Component**: Implemented `ControlValueAccessor` for proper reactive forms integration
    - Added `NG_VALUE_ACCESSOR` provider for form control binding
    - Implemented `writeValue()`, `registerOnChange()`, `registerOnTouched()`, and `setDisabledState()` methods
    - Fixed `formControlName` binding to properly sync with FormControl state
    - Resolved form reset issues - `this.contactForm.reset()` now works correctly
    - Maintains backward compatibility with existing event-based usage
  - **Input Component**: Implemented `ControlValueAccessor` for proper reactive forms integration
    - Added `NG_VALUE_ACCESSOR` provider for form control binding
    - Implemented `writeValue()`, `registerOnChange()`, `registerOnTouched()`, and `setDisabledState()` methods
    - Fixed `formControlName` binding to properly sync with FormControl state
    - Added `valueChange` event emitter for backward compatibility
    - Updated template to use `[value]` binding and `(input)` event handler
    - Added comprehensive test coverage for ControlValueAccessor functionality (40 test cases)
    - Resolves form validation not working with reactive forms
  - **Form Reset Enhancement**: Updated documentation with proper form reset implementation
    - Added `markAsUntouched()` and `markAsPristine()` calls for complete form state reset
    - Ensures form validation states are properly cleared after reset
    - Fixed validation error messages not clearing after form reset
    - Added comprehensive form control state reset with `setErrors(null)`
    - Added `updateValueAndValidity()` call to force change detection
    - **CRITICAL FIX**: Added `patchValue()` call to explicitly reset form control values
    - This ensures `ControlValueAccessor.writeValue()` is called on custom components
    - Resolves issue where `form.reset()` alone doesn't properly reset custom components
    - Form reset now works correctly with all form components (Input, Select, Textarea, Date Field)

- **Date Field Component**: Fixed template file name mismatches and deprecated syntax
  - Updated component to reference correct file names (`date-field.html` and `date-field.css`)
  - Fixed deprecated `*ngIf` usage, replaced with modern `@if` control flow
  - Added missing CommonModule import for proper Angular functionality
  - Made private methods public for proper test access
  - Added missing public API export for library consumption
  - Fixed template compilation error with `new Date()` in template
  - Added `selectToday()` method to properly handle today button click

### 📚 Documentation
- **Form Components Documentation**: Added comprehensive usage guides
  - **FormFieldWrapper**: Complete API reference with accessibility features
  - **Select Component**: Usage examples for single/multiple selection, form integration
  - **Textarea Component**: Resize control, length constraints, and validation examples
  - **Complete Form Example**: Real-world contact form showcasing all components together
  - Integration examples with Angular reactive forms
  - Accessibility guidance and best practices
  - Migration guides from HTML elements to components
  - Comprehensive testing examples with proper Angular testing patterns

- **Date Field Documentation**: Added comprehensive usage guide
  - Complete API reference with all inputs/outputs
  - Form integration examples with reactive forms
  - Integration examples with DataTable and Searchbar components
  - Comprehensive testing examples with proper Angular testing patterns
  - Theming and styling guidance
  - Browser support information and polyfill recommendations

### 🆕 New Components
- **Searchbar Component** (`ccl-searchbar`) - Search input with debouncing and clear functionality
  - Configurable debounce delay (default: 300ms)
  - Optional clear button with keyboard support (Escape key)
  - Keyboard navigation (Enter for immediate search)
  - Accessibility features with proper ARIA labels
  - Modern Angular `@if` control flow syntax
  - Comprehensive test coverage (12 test cases)

### 🐛 Bug Fixes
- **Searchbar Component**: Fixed template file name mismatches
  - Updated component to reference correct file names (`searchbar.html` and `searchbar.css`)
  - Fixed deprecated `*ngIf` usage, replaced with modern `@if` control flow
  - Added proper Angular TestBed setup for comprehensive testing
  - Added missing public API export for library consumption
- **Documentation**: Fixed deprecated Angular control flow usage
  - Updated all `*ngFor` examples to use modern `@for` control flow
  - Updated all `*ngIf` examples to use modern `@if` control flow
  - Ensures documentation examples use current Angular best practices

### 📚 Documentation
- **Searchbar Documentation**: Added comprehensive usage guide
  - Complete API reference with all inputs/outputs
  - Integration examples with DataTable and Pagination components
  - Keyboard navigation and accessibility guidance
  - Theming and styling examples
  - Comprehensive testing examples with proper Angular testing patterns
  - Real-world usage patterns and best practices

- **Toast Component**: Fixed DOM blocking issue during transitions
  - Added `pointer-events: none` to toasts during exit animations
  - Prevents toasts from blocking clicks on underlying elements (like pagination buttons)
  - Added `isExiting` state to properly handle transition states
  - Ensures smooth user interaction even when toasts are animating out
  - Fixed CSS linting warning for empty ruleset

### ✅ Completed Features
- **Pagination Component**: Fully completed and production-ready
  - Added comprehensive documentation with DataTable integration examples
  - Complete testing examples for all variants and integration scenarios
  - Added to public API exports for library consumption
  - Ready for immediate use in consumer applications

### 🐛 Bug Fixes
- **Toast Component**: Fixed DOM blocking issue during transitions
  - Added `pointer-events: none` to toasts during exit animations
  - Prevents toasts from blocking clicks on underlying elements (like pagination buttons)
  - Added `isExiting` state to properly handle transition states
  - Ensures smooth user interaction even when toasts are animating out

### 📚 Documentation
- **Pagination Documentation**: Added comprehensive usage guide
  - Complete API reference with all inputs/outputs
  - Three integration examples: basic, DataTable with numbered pagination, DataTable with load-more
  - Comprehensive testing examples with mocking and spy patterns
  - Accessibility and theming guidance
  - Real-world usage patterns with mock data generation

### 🆕 New Components
- **Pagination Component** (`ccl-pagination`) - Flexible pagination component
  - Three variants: numbers, load-more, infinite-scroll
  - Configurable page size and total pages
  - Optional first/last page buttons
  - Built-in infinite scroll detection
  - Accessible keyboard navigation

### 🐛 Bug Fixes
- **Modal Component**: Fixed accessibility issues
  - Added keyboard event handlers (Enter, Space, Escape)
  - Made interactive elements focusable with proper tabindex
  - Added ARIA attributes for screen readers
  - Improved keyboard navigation support
- **Pagination Component**: Fixed output binding naming
  - Renamed `onPageChange` to `pageChange` to follow Angular naming conventions
  - Updated event emission to use correct property name

### 📚 Documentation
- Added pagination component to public API exports
- Updated component documentation with accessibility improvements

### 🐛 Bug Fixes
- **Toast Component**: Fixed exit animations - toasts now properly slide/fade out when closed
  - Added CSS exit animations for slide and fade variants
  - Fixed issue where toasts remained visible on screen after closing
  - Improved close logic with proper animation timing

### 📚 Documentation
- Fixed all duration property binding examples in documentation
- Updated examples to use `[duration]="value"` instead of `duration="value"`
- Added proper TypeScript property binding guidance

### New Components
- **Alert Component** (`ccl-alert`) - Inline notification component
  - Variants: info, success, warning, error with color-coded styling
  - Optional title and icon support with automatic default icons
  - Dismissible option with close button
  - Full accessibility support with proper ARIA roles
  - Modern `@if` control flow syntax

- **Toast Component** (`ccl-toast`) - Overlay notification component
  - Auto-dismiss with configurable duration (0 = no auto-dismiss)
  - 4 positioning options: top-right, top-left, bottom-right, bottom-left
  - Animation support: slide, fade, or none
  - Progress bar visualization for countdown
  - Pause on hover functionality
  - Optional title and icon support
  - Dismissible option with manual close
  - Modern `@if` control flow syntax

### Technical Improvements
- **Modern Angular Control Flow**: Updated all components to use `@if` and `@for` instead of deprecated `*ngIf` and `*ngFor`
  - Button, Input, DataTable, Modal, Alert, and Toast components
  - Better performance and future-proof syntax
  - Consistent codebase with latest Angular best practices

### Documentation
- Updated component count from 4 to 6 components
- Enhanced component library with notification system
- All components now use modern Angular control flow syntax

---

## [0.0.1] - 2025-09-22

### Initial Release
- **Complete Angular UI Component Library** with modern design system
- **Design Tokens System** with comprehensive theming support
- **Component Library** with 4 production-ready components
- **Documentation** with comprehensive usage guides

### Design System
- **Design Tokens**: Complete token system with color, typography, spacing, radius, motion, and shadows
- **Theme Support**: Naked theme (default) and BrandA theme with orange-based primary palette
- **CSS Variables**: All tokens available as CSS custom properties with `:host` selector for Angular compatibility
- **SCSS Support**: Generated SCSS maps for advanced styling workflows

### Components
- **Button Component** (`ccl-button`)
  - Variants: primary, secondary, tertiary, destructive
  - Sizes: sm, md, lg
  - States: normal, disabled, loading
  - Full accessibility support

- **Input Component** (`ccl-input`)
  - Label, helper text, error states
  - Disabled and readonly support
  - Accessibility attributes (ARIA)
  - Modern Angular `@if` control flow

- **DataTable Component** (`ccl-datatable`)
  - Configurable columns with width support
  - Row data with type safety (`Record<string, unknown>[]`)
  - Variants: striped, bordered, compact
  - Empty state handling
  - Modern `@if` and `@for` control flow

- **Modal Component** (`ccl-modal`)
  - Overlay with click-outside-to-close
  - Focus management and keyboard navigation (ESC key)
  - Size variants: sm (300px), md (500px), lg (800px)
  - Content projection with custom footer support
  - Accessibility features and ARIA compliance
  - Modern `@if` control flow

### Theming
- **Naked Theme**: Clean, unbranded baseline design
- **BrandA Theme**: Orange-based primary palette with modern color system
- **Token Override**: Easy customization through CSS variable overrides
- **Theme Switching**: Seamless theme application in consumer applications

### Documentation
- **Comprehensive Guides**: Installation, theming, component usage
- **Code Examples**: Copy-paste ready examples for all components
- **API Reference**: Complete input/output documentation
- **Best Practices**: Accessibility, theming, and integration guidelines

### Technical Features
- **Angular 20+ Support**: Built for latest Angular with standalone components
- **TypeScript**: Full type safety with proper interfaces
- **Modern Angular**: Uses latest features like `@if` control flow
- **Build System**: Automated token generation with Style Dictionary
- **Package Management**: Published to GitHub Packages with proper scoping

### Getting Started
- **Easy Installation**: `npm install <<scope/organisaion>>/ccl-ui-components`
- **Quick Setup**: Simple `.npmrc` configuration for GitHub Packages
- **Theme Integration**: Import CSS files for immediate theming
- **Component Usage**: Standalone components ready for immediate use

### Package Structure
```
@Crystal-Code-Labs/ccl-ui-components/
├── Components (Button, Input, DataTable, Modal)
├── Styles (tokens.css, naked.css, brandA.css)
├── SCSS (tokens.scss, naked.scss, brandA.scss)
└── TypeScript definitions
```

### Security & Quality
- **No Hardcoded Values**: All styling through design tokens
- **Accessibility First**: WCAG compliant components
- **Type Safety**: Full TypeScript support
- **Linting**: ESLint configuration for code quality
- **Testing**: Comprehensive test coverage

---

*For detailed component documentation, see the `docs/` folder.*
*For legacy changelog (pre-organization), see `CHANGELOG-LEGACY.md`.*