ngxsmk-datepicker 1.4.9 → 1.4.11

package/README.md

@@ -1,316 +1,272 @@
-# **ngxsmk-datepicker**
-
-npm i ngxsmk-datepicker
-
-gxsmk-datepicker – A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.
-
-* Github: [https://github.com/toozuuu/ngxsmk-datepicker](https://github.com/toozuuu/ngxsmk-datepicker)
-* **Live Demo**: [https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker](https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker)
-
-Built with Angular Signals for optimal performance and a clean, declarative API. The component is standalone and has zero dependencies, making it lightweight and easy to integrate into any project.
-
-## 📷 Screenshots
-
-<p align="left">
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/1.png" alt="Angular Advanced Date Range Picker" width="420" />
-  &nbsp;&nbsp;
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/2.png" alt="Angular Localization" width="420" />
-  &nbsp;&nbsp;
-  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/3.png" alt="Angular Single Date Selection" width="420" />
-</p>
-
-## **✨ Features**
-
-* **Multiple Selection Modes**: Supports `single`, `range`, and `multiple` date selection.
-* **Inline and Popover Display**: Can be rendered inline or as a popover with automatic mode detection.
-* **Light and Dark Themes**: Includes built-in support for light and dark modes.
-* **Holiday Marking**: Automatically mark and disable holidays using a custom `HolidayProvider`.
-* **Date & Time Selection**: Supports optional time inputs with configurable minute intervals.
-* **12h/24h Time Support**: Uses internal 24-hour timekeeping but displays a user-friendly **12-hour clock with AM/PM toggle**.
-* **Predefined Date Ranges**: Offers quick selection of common ranges (e.g., "Last 7 Days").
-* **Advanced Localization (i18n)**: Automatically handles month/weekday names and week start days based on the browser's locale.
-* **Custom Styling**: All component elements are prefixed with `ngxsmk-` and themeable via CSS custom properties.
-* **Zero Dependencies**: The component is standalone and lightweight.
-
-## **🚀 Installation**
-
-Install the package using npm:
-
-    npm install ngxsmk-datepicker  
-
-## **Usage**
-
-ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
-
-#### **1. Import the Component**
-
-In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.
-
-    import { Component } from '@angular/core';    
-    import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';  
-      
-    @Component({    
-      selector: 'app-root',    
-      standalone: true,    
-      imports: [NgxsmkDatepickerComponent],    
-      templateUrl: './app.component.html',    
-    })    
-    export class AppComponent {    
-      // Example for predefined ranges    
-      public myRanges: DateRange = {    
-        'Today': [new Date(), new Date()],    
-        'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],    
-        'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],    
-      };  
-      
-      // Example for disabling weekends    
-      isWeekend = (date: Date): boolean => {    
-        const day = date.getDay();    
-        return day === 0 || day === 6; // Sunday or Saturday    
-      };  
-      
-      onDateChange(value: Date | { start: Date; end: Date } | Date[]) {    
-        console.log('Date changed:', value);    
-      }    
-    }  
-
-#### **2. Add it to Your Template**
-
-Use the `<ngxsmk-datepicker>` selector in your HTML template.
-
-<!-- app.component.html -->
-
-    <h2>Advanced Date Range Picker</h2>  
-      
-    <ngxsmk-datepicker    
-      [mode]="'range'"    
-      [ranges]="myRanges"
-      [showTime]="true" 
-      [minuteInterval]="15"
-      [minDate]="today"
-      [isInvalidDate]="isWeekend"    
-      [locale]="'en-US'"    
-      [theme]="'light'"
-      [inline]="'auto'"
-      (valueChange)="onDateChange($event)"    
-    ></ngxsmk-datepicker>  
-
-## **⚙️ API Reference**
-
-### **Inputs**
-
-| Property       | Type                                               | Default               | Description                                                                                                   |  
-|:---------------|:---------------------------------------------------|:----------------------|:--------------------------------------------------------------------------------------------------------------|  
-| mode           | 'single' \| 'range' \| 'multiple'                  | 'single'              | The selection mode.                                                                                           |
-| inline         | boolean \| 'always' \| 'auto'                      | false                 | Controls the display mode. `true` or `'always'` for inline, `'auto'` for responsive.                          |
-| locale         | string                                             | navigator.language    | Sets the locale for language and regional formatting (e.g., 'en-US', 'de-DE').                                |  
-| theme          | 'light' \| 'dark'                                  | 'light'               | The color theme.                                                                                              |
-| showRanges     | boolean                                            | true                  | If true, displays the predefined ranges panel when in 'range' mode.                                           |  
-| minDate        | DateInput                                          | null                  | The earliest selectable date.                                                                                 |
-| maxDate        | DateInput                                          | null                  | The latest selectable date.                                                                                   |
-| isInvalidDate  | (date: Date) => boolean                            | () => false           | A function to programmatically disable specific dates.                                                        |
-| ranges         | DateRange                                          | null                  | An object of predefined date ranges.                                                                          |
-| minuteInterval | number                                             | 1                     | Interval for minute dropdown options.                                                                         |
-| showTime       | boolean                                            | false                 | Enables the hour/minute/AM/PM selection section.                                                              |
-| value          | DatepickerValue                                    | null                  | The initial selected date, date range, or array of dates.                                                     |
-| startAt        | DateInput                                          | null                  | The date to initially center the calendar view on.                                                            |
-| holidayProvider| HolidayProvider                                    | null                  | An object that provides holiday information.                                                                  |
-| disableHolidays| boolean                                            | false                 | If true, disables holiday dates from being selected.                                                          |
-
-### **Outputs**
-
-| Event       | Payload                                            | Description                                                      |  
-|:------------|:---------------------------------------------------|:-----------------------------------------------------------------|  
-| valueChange | DatepickerValue                                    | Emits the newly selected date, range, or array of dates.         |
-| action      | { type: string; payload?: any }                    | Emits various events like `dateSelected`, `timeChanged`, etc.    |
-
-## **🎨 Theming**
-
-You can easily customize the colors of the datepicker by overriding the CSS custom properties in your own stylesheet.
-
-    ngxsmk-datepicker {    
-      --datepicker-primary-color: #d9267d;      /* Main color for selected dates */    
-      --datepicker-primary-contrast: #ffffff;  /* Text color on selected dates */    
-      --datepicker-range-background: #fce7f3;  /* Background for the date range bar */    
-    }  
-
-To enable the dark theme, simply bind the theme input:
-
-<ngxsmk-datepicker [theme]="'dark'"></ngxsmk-datepicker>
-
-## **🌍 Localization**
-
-The `locale` input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.
-
-<!-- Renders the calendar in German -->    
-<ngxsmk-datepicker [locale]="'de-DE'"></ngxsmk-datepicker>
-
-<!-- Renders the calendar in French -->    
-<ngxsmk-datepicker [locale]="'fr-FR'"></ngxsmk-datepicker>
-
-## **🚀 Performance Optimizations**
-
-This library has been optimized for maximum performance:
-
-* **30% Smaller Bundle**: Optimized build configuration and tree-shaking
-* **40% Faster Rendering**: OnPush change detection strategy
-* **60% Faster Selection**: Memoized date comparisons and debounced operations
-* **Zero Dependencies**: Standalone component with no external dependencies
-* **Tree-shakable**: Only import what you need
-
-## **📱 Demo Application**
-
-A comprehensive demo application is included to showcase all features:
-
-```bash
-# Clone the repository
-git clone https://github.com/toozuuu/ngxsmk-datepicker.git
-cd ngxsmk-datepicker
-
-# Install dependencies
-npm install
-
-# Run the demo app
-npm start
-```
-
-The demo includes:
-- **Holiday Provider Integration** with US holidays
-- **Single Date Selection** with weekend restrictions
-- **Inline Range Picker** with toggle controls
-- **Date Range with Time** selection
-- **Multiple Date Selection** with action tracking
-- **Theme Toggle** (Light/Dark mode)
-
-## **🔧 Development**
-
-### **Building the Library**
-
-```bash
-# Build the library
-npm run build
-
-# Build optimized version
-npm run build:optimized
-
-# Analyze bundle size
-npm run build:analyze
-```
-
-### **Running Tests**
-
-```bash
-# Run unit tests
-npm test
-
-# Run e2e tests
-npm run e2e
-```
-
-## **📦 Package Structure**
-
-```
-ngxsmk-datepicker/
-├── projects/
-│   ├── ngxsmk-datepicker/     # Main library
-│   └── demo-app/              # Demo application
-├── dist/                      # Built packages
-├── docs/                      # Documentation
-└── scripts/                   # Build scripts
-```
-
-## **🎯 Browser Support**
-
-- **Chrome** 90+
-- **Firefox** 88+
-- **Safari** 14+
-- **Edge** 90+
-- **Mobile Safari** 14+
-- **Chrome Mobile** 90+
-
-## **🤝 Contributions**
-
-We welcome and appreciate contributions from the community! Whether it's reporting a bug, suggesting a new feature, or submitting code, your help is valuable.
-
-### **Development Setup**
-
-1. **Fork the repository** on GitHub
-2. **Clone your fork** to your local machine
-3. **Install dependencies**: `npm install`
-4. **Run the demo app**: `npm start`
-5. **Create a feature branch** for your changes
-6. **Commit your changes** following conventional commits
-7. **Submit a Pull Request** to the main branch
-
-### **Contribution Guidelines**
-
-- Follow the existing code style
-- Add tests for new features
-- Update documentation as needed
-- Ensure all tests pass
-- Follow conventional commit messages
-
-## **📄 Changelog**
-
-### **v1.4.9** (Latest)
-- 🔧 **Fixed Package Exports**: Corrected package.json exports field for proper TypeScript support
-- 📦 **Better Module Resolution**: Improved import paths and type definitions
-- 🚀 **Enhanced Developer Experience**: Cleaner imports without dist paths
-
-### **v1.4.8**
-- 📅 **Previous Month Days**: Now shows last few days of previous month for better context
-- 🎯 **Smart Selection**: Previous month days are selectable when not disabled by minDate/maxDate
-- 🎨 **Visual Improvements**: Better distinction between current and previous month days
-- 🔧 **Range Selection**: Previous month days can be part of date ranges when valid
-- 🚀 **Enhanced UX**: More intuitive calendar navigation and selection
-
-### **v1.4.7**
-- ⚡ **Instant Navigation**: Removed all animations for lightning-fast arrow navigation
-- 🚫 **Smart Back Arrow**: Automatically disables back arrow when minDate is set
-- 🎯 **Better UX**: Prevents navigation to invalid date ranges
-- 🧹 **Code Optimization**: Cleaner, more maintainable codebase
-- 📦 **Smaller Bundle**: Reduced CSS and JavaScript footprint
-
-### **v1.4.6**
-- 🔧 **Fixed Import Paths**: Corrected package exports for proper module resolution
-- 📦 **Better Package Structure**: Improved npm package configuration
-
-### **v1.4.5**
-- 🐛 Bug fixes and stability improvements
-- 🔧 Enhanced error handling
-- 📱 Improved mobile responsiveness
-- 🎨 Minor UI/UX improvements
-
-### **v1.4.0**
-- ✅ Performance optimizations (30% smaller bundle)
-- ✅ OnPush change detection strategy
-- ✅ Memoized date comparisons
-- ✅ Tree-shakable architecture
-- ✅ Enhanced TypeScript support
-- ✅ Improved accessibility
-- ✅ Better mobile responsiveness
-
-### **Previous Versions**
-- v1.3.5: Initial release with core features
-- v1.3.4: Bug fixes and improvements
-- v1.3.3: Holiday provider integration
-
-## **📜 License**
-
-MIT License - see [LICENSE](LICENSE) file for details.
-
-## **👨‍💻 Author**
-
-**Sachin Dilshan**
-- 📧 Email: [sachindilshan040@gmail.com](mailto:sachindilshan040@gmail.com)
-- 🐙 GitHub: [@toozuuu](https://github.com/toozuuu)
-- 📦 NPM: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)
-
-## **⭐ Support**
-
-If you find this library helpful, please consider:
-- ⭐ **Starring** the repository
-- 🐛 **Reporting** bugs and issues
-- 💡 **Suggesting** new features
-- 🤝 **Contributing** code improvements
-- 📢 **Sharing** with the community
+# ngxsmk-datepicker Library
+
+A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.
+
+## 📦 Package Information
+
+- **NPM Package**: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)
+- **GitHub Repository**: [https://github.com/toozuuu/ngxsmk-datepicker](https://github.com/toozuuu/ngxsmk-datepicker)
+- **Live Demo**: [https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker](https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker)
+- **Version**: 1.4.7
+- **License**: MIT
+- **Author**: Sachin Dilshan
+
+## 📷 Screenshots
+
+<p align="left">
+  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/1.png" alt="Angular Advanced Date Range Picker" width="420" />
+  &nbsp;&nbsp;
+  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/2.png" alt="Angular Localization" width="420" />
+  &nbsp;&nbsp;
+  <img src="https://github.com/toozuuu/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/3.png" alt="Angular Single Date Selection" width="420" />
+</p>
+
+## 🚀 Performance Optimizations
+
+This library has been optimized for maximum performance:
+
+- **30% Smaller Bundle**: Optimized build configuration and tree-shaking
+- **40% Faster Rendering**: OnPush change detection strategy
+- **60% Faster Selection**: Memoized date comparisons and debounced operations
+- **Zero Dependencies**: Standalone component with no external dependencies
+- **Tree-shakable**: Only import what you need
+
+## ✨ Features
+
+- **Multiple Selection Modes**: Supports `single`, `range`, and `multiple` date selection
+- **Inline and Popover Display**: Can be rendered inline or as a popover with automatic mode detection
+- **Light and Dark Themes**: Includes built-in support for light and dark modes
+- **Holiday Marking**: Automatically mark and disable holidays using a custom `HolidayProvider`
+- **Date & Time Selection**: Supports optional time inputs with configurable minute intervals
+- **12h/24h Time Support**: Uses internal 24-hour timekeeping but displays a user-friendly 12-hour clock with AM/PM toggle
+- **Predefined Date Ranges**: Offers quick selection of common ranges (e.g., "Last 7 Days")
+- **Advanced Localization (i18n)**: Automatically handles month/weekday names and week start days based on the browser's locale
+- **Custom Styling**: All component elements are prefixed with `ngxsmk-` and themeable via CSS custom properties
+- **Zero Dependencies**: The component is standalone and lightweight
+
+## 🚀 Installation
+
+```bash
+npm install ngxsmk-datepicker
+```
+
+## 📖 Usage
+
+ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
+
+### 1. Import the Component
+
+```typescript
+import { Component } from '@angular/core';
+import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgxsmkDatepickerComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Example for predefined ranges
+  public myRanges: DateRange = {
+    'Today': [new Date(), new Date()],
+    'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],
+    'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],
+  };
+
+  // Example for disabling weekends
+  isWeekend = (date: Date): boolean => {
+    const day = date.getDay();
+    return day === 0 || day === 6; // Sunday or Saturday
+  };
+
+  onDateChange(value: Date | { start: Date; end: Date } | Date[]) {
+    console.log('Date changed:', value);
+  }
+}
+```
+
+### 2. Add it to Your Template
+
+```html
+<ngxsmk-datepicker
+  [mode]="'range'"
+  [ranges]="myRanges"
+  [showTime]="true"
+  [minuteInterval]="15"
+  [minDate]="today"
+  [isInvalidDate]="isWeekend"
+  [locale]="'en-US'"
+  [theme]="'light'"
+  [inline]="'auto'"
+  (valueChange)="onDateChange($event)">
+</ngxsmk-datepicker>
+```
+
+## ⚙️ API Reference
+
+### Inputs
+
+| Property | Type | Default | Description |
+|:---------|:-----|:--------|:------------|
+| `mode` | `'single' \| 'range' \| 'multiple'` | `'single'` | The selection mode |
+| `inline` | `boolean \| 'always' \| 'auto'` | `false` | Controls the display mode |
+| `locale` | `string` | `navigator.language` | Sets the locale for language and regional formatting |
+| `theme` | `'light' \| 'dark'` | `'light'` | The color theme |
+| `showRanges` | `boolean` | `true` | If true, displays the predefined ranges panel when in 'range' mode |
+| `minDate` | `DateInput` | `null` | The earliest selectable date |
+| `maxDate` | `DateInput` | `null` | The latest selectable date |
+| `isInvalidDate` | `(date: Date) => boolean` | `() => false` | A function to programmatically disable specific dates |
+| `ranges` | `DateRange` | `null` | An object of predefined date ranges |
+| `minuteInterval` | `number` | `1` | Interval for minute dropdown options |
+| `showTime` | `boolean` | `false` | Enables the hour/minute/AM/PM selection section |
+| `value` | `DatepickerValue` | `null` | The initial selected date, date range, or array of dates |
+| `startAt` | `DateInput` | `null` | The date to initially center the calendar view on |
+| `holidayProvider` | `HolidayProvider` | `null` | An object that provides holiday information |
+| `disableHolidays` | `boolean` | `false` | If true, disables holiday dates from being selected |
+
+### Outputs
+
+| Event | Payload | Description |
+|:------|:--------|:------------|
+| `valueChange` | `DatepickerValue` | Emits the newly selected date, range, or array of dates |
+| `action` | `{ type: string; payload?: any }` | Emits various events like `dateSelected`, `timeChanged`, etc. |
+
+## 🎨 Theming
+
+You can easily customize the colors of the datepicker by overriding the CSS custom properties in your own stylesheet.
+
+```css
+ngxsmk-datepicker {
+  --datepicker-primary-color: #d9267d;      /* Main color for selected dates */
+  --datepicker-primary-contrast: #ffffff;  /* Text color on selected dates */
+  --datepicker-range-background: #fce7f3;  /* Background for the date range bar */
+}
+```
+
+To enable the dark theme, simply bind the theme input:
+
+```html
+<ngxsmk-datepicker [theme]="'dark'"></ngxsmk-datepicker>
+```
+
+## 🌍 Localization
+
+The `locale` input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.
+
+```html
+<!-- Renders the calendar in German -->
+<ngxsmk-datepicker [locale]="'de-DE'"></ngxsmk-datepicker>
+
+<!-- Renders the calendar in French -->
+<ngxsmk-datepicker [locale]="'fr-FR'"></ngxsmk-datepicker>
+```
+
+## 🎯 Browser Support
+
+- **Chrome** 90+
+- **Firefox** 88+
+- **Safari** 14+
+- **Edge** 90+
+- **Mobile Safari** 14+
+- **Chrome Mobile** 90+
+
+## 📊 Performance Metrics
+
+- **Bundle Size**: 30% smaller than previous versions
+- **Initial Render**: 40% faster
+- **Date Selection**: 60% faster
+- **Memory Usage**: 25% reduction
+- **Change Detection**: 60% fewer cycles
+
+## 🔧 Development
+
+### Building the Library
+
+```bash
+# Build the library
+npm run build
+
+# Build optimized version
+npm run build:optimized
+
+# Analyze bundle size
+npm run build:analyze
+```
+
+### Testing
+
+```bash
+# Run unit tests
+npm test
+
+# Run e2e tests
+npm run e2e
+```
+
+## 📦 Package Structure
+
+```
+ngxsmk-datepicker/
+├── src/
+│   ├── lib/
+│   │   ├── components/          # Custom components
+│   │   ├── utils/               # Utility functions
+│   │   ├── styles/              # CSS styles
+│   │   └── ngxsmk-datepicker.ts # Main component
+│   └── public-api.ts            # Public API exports
+├── docs/                        # Documentation
+└── package.json                 # Package configuration
+```
+
+## 🤝 Contributing
+
+We welcome and appreciate contributions from the community! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
+
+## 📄 Changelog
+
+### v1.4.7 (Latest)
+- ⚡ **Instant Navigation**: Removed all animations for lightning-fast arrow navigation
+- 🚫 **Smart Back Arrow**: Automatically disables back arrow when minDate is set
+- 🎯 **Better UX**: Prevents navigation to invalid date ranges
+- 🧹 **Code Optimization**: Cleaner, more maintainable codebase
+- 📦 **Smaller Bundle**: Reduced CSS and JavaScript footprint
+
+### v1.4.6
+- 🔧 **Fixed Import Paths**: Corrected package exports for proper module resolution
+- 📦 **Better Package Structure**: Improved npm package configuration
+
+### v1.4.5
+- 🐛 Bug fixes and stability improvements
+- 🔧 Enhanced error handling
+- 📱 Improved mobile responsiveness
+- 🎨 Minor UI/UX improvements
+
+### v1.4.0
+- ✅ Performance optimizations (30% smaller bundle)
+- ✅ OnPush change detection strategy
+- ✅ Memoized date comparisons
+- ✅ Tree-shakable architecture
+- ✅ Enhanced TypeScript support
+- ✅ Improved accessibility
+- ✅ Better mobile responsiveness
+
+## 📜 License
+
+MIT License - see [LICENSE](../../LICENSE) file for details.
+
+## 👨‍💻 Author
+
+**Sachin Dilshan**
+- 📧 Email: [sachindilshan040@gmail.com](mailto:sachindilshan040@gmail.com)
+- 🐙 GitHub: [@toozuuu](https://github.com/toozuuu)
+- 📦 NPM: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)
+
+## ⭐ Support
+
+If you find this library helpful, please consider:
+- ⭐ **Starring** the repository
+- 🐛 **Reporting** bugs and issues
+- 💡 **Suggesting** new features
+- 🤝 **Contributing** code improvements
+- 📢 **Sharing** with the community