ngxsmk-datepicker 1.4.5 → 1.4.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sachin Dilshan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,15 +1,13 @@
-# ngxsmk-datepicker Library
+# **ngxsmk-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.
+npm i ngxsmk-datepicker
 
-## 📦 Package Information
+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.
 
-- **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.5
-- **License**: MIT
-- **Author**: Sachin Dilshan
+* 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
 
@@ -21,167 +19,172 @@ A modern, powerful, and fully customizable date and date-range picker component
   <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**
 
-## ✨ 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.
 
-- **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**
 
-## 🚀 Installation
+Install the package using npm:
 
-```bash
-npm install ngxsmk-datepicker
-```
+    npm install ngxsmk-datepicker  
 
-## 📖 Usage
+## **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
+#### **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.
 
-```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 */
-}
-```
+    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
+## **🌍 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 -->
+<!-- Renders the calendar in German -->    
 <ngxsmk-datepicker [locale]="'de-DE'"></ngxsmk-datepicker>
 
-<!-- Renders the calendar in French -->
+<!-- Renders the calendar in French -->    
 <ngxsmk-datepicker [locale]="'fr-FR'"></ngxsmk-datepicker>
-```
 
-## 🎯 Browser Support
+## **🚀 Performance Optimizations**
 
-- **Chrome** 90+
-- **Firefox** 88+
-- **Safari** 14+
-- **Edge** 90+
-- **Mobile Safari** 14+
-- **Chrome Mobile** 90+
+This library has been optimized for maximum performance:
 
-## 📊 Performance Metrics
+* **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
 
-- **Bundle Size**: 30% smaller than previous versions
-- **Initial Render**: 40% faster
-- **Date Selection**: 60% faster
-- **Memory Usage**: 25% reduction
-- **Change Detection**: 60% fewer cycles
+## **📱 Demo Application**
 
-## 🔧 Development
+A comprehensive demo application is included to showcase all features:
 
-### Building the Library
+```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
@@ -194,7 +197,7 @@ npm run build:optimized
 npm run build:analyze
 ```
 
-### Testing
+### **Running Tests**
 
 ```bash
 # Run unit tests
@@ -204,34 +207,65 @@ npm test
 npm run e2e
 ```
 
-## 📦 Package Structure
+## **📦 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
+├── projects/
+│   ├── ngxsmk-datepicker/     # Main library
+│   └── demo-app/              # Demo application
+├── dist/                      # Built packages
+├── docs/                      # Documentation
+└── scripts/                   # Build scripts
 ```
 
-## 🤝 Contributing
+## **🎯 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.
 
-We welcome and appreciate contributions from the community! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
+### **Development Setup**
 
-## 📄 Changelog
+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
 
-### v1.4.5 (Latest)
+### **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.6** (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.5**
 - 🐛 Bug fixes and stability improvements
 - 🔧 Enhanced error handling
 - 📱 Improved mobile responsiveness
 - 🎨 Minor UI/UX improvements
 
-### v1.4.0
+### **v1.4.0**
 - ✅ Performance optimizations (30% smaller bundle)
 - ✅ OnPush change detection strategy
 - ✅ Memoized date comparisons
@@ -240,18 +274,23 @@ We welcome and appreciate contributions from the community! Please see our [Cont
 - ✅ Improved accessibility
 - ✅ Better mobile responsiveness
 
-## 📜 License
+### **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.
+MIT License - see [LICENSE](LICENSE) file for details.
 
-## 👨‍💻 Author
+## **👨‍💻 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
+## **⭐ Support**
 
 If you find this library helpful, please consider:
 - ⭐ **Starring** the repository