ngxsmk-datepicker 2.3.0 → 2.3.1

package/README.md

@@ -25,15 +25,15 @@
 
 ---
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ### **Overview**
 
 **ngxsmk-datepicker** is a high-performance, enterprise-ready date and range picker engineered for the modern Angular ecosystem (v17+). Built from the ground up with **Angular Signals**, it delivers a seamless, zoneless-ready experience for both desktop and mobile (Ionic) applications.
 
-> **Stable Release**: `v2.2.15` is the current stable release with compiled `fesm2022` output and type declarations.
+> **Stable Release**: `v2.3.1` is the current stable release with compiled `fesm2022` output and type declarations.
 >
-> **Stable line**: v2.2.x includes **`allowSameDay`**, **IANA timezone** support, validation fixes, and strict TypeScript improvements. Versions **2.0.10** and **2.0.11** were **unpublished**; use **v2.1.1+** or **v2.2.15** on npm.
+> **Stable line**: v2.3.x includes side-by-side **`calendars`**, **natural language input**, searchable **timezone selection dropdown UI**, dynamic range presets, and warning range highlighting. Versions **2.0.10** and **2.0.11** were broken and have been **unpublished**; use **v2.1.1+** or current **v2.3.1** on npm.
 
 ---
 
@@ -518,6 +518,10 @@ By default, the datepicker input is `readonly` to prevent invalid date strings a
 | classes            | object | undefined | Tailwind-friendly class overrides (wrapper, input, popover, etc.). |
 | enableGoogleCalendar| boolean | false | Enable seamless Google Calendar integration and sync. |
 | googleClientId     | string \| null | null | Google API OAuth 2.0 Web Client ID for authentication. |
+| calendars          | number | 1 | Multi-calendar display layout (supports 1, 2, or 3 side-by-side calendars). |
+| rangePresetFactory | (today: Date) => DatePreset[] | null | Callback function supplying dynamic rolling range presets. |
+| showTimezoneSelector | boolean | false | Enables searchable IANA timezone selection dropdown UI. |
+| enableNaturalLanguage | boolean | false | Enables manual relative keyboard typing input (e.g. "today", "in 3 days"). |
 
 ### **Outputs**
 
@@ -526,6 +530,9 @@ By default, the datepicker input is `readonly` to prevent invalid date strings a
 | valueChange | DatepickerValue                 | Emits the newly selected date, range, or array of dates.      |
 | action      | { type: string; payload?: any } | Emits various events like `dateSelected`, `timeChanged`, etc. |
 | googleSyncClick | void                          | Emitted when the user clicks the Google Calendar sync button. |
+| invalidRange | { start: Date; end: Date; disabledDatesInside: Date[] } | Emitted when selected date range contains disabled dates. |
+| naturalLanguageResolved | Date \| { start: Date; end: Date } | Emitted when user types relative natural language date input. |
+| timezoneChange | string | Emitted when timezone selection is changed. |
 
 ## **🎨 Theming**
 
@@ -850,7 +857,7 @@ We welcome and appreciate contributions from the community! Whether it's reporti
 
 For a full list of changes, please refer to the [CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md) file.
 
-### **v2.2.15** (Current Stable)`r`n`r`n- **npm**: Published tarballs include compiled `fesm2022/` output and type declarations.
+### **v2.3.1** (Current Stable)`r`n`r`n- **npm**: Published tarballs include compiled `fesm2022/` output and type declarations.
 
 ### **Earlier Versions**
 

package/docs/API.md

@@ -2,7 +2,7 @@
 
 This document describes the stable public API of ngxsmk-datepicker with comprehensive real-world examples. APIs marked as **stable** are guaranteed to remain backward-compatible within the same major version. APIs marked as **experimental** may change in future releases.
 
-**Version**: 2.2.15+ | **Last updated**: March 21, 2026
+**Version**: 2.3.1+ | **Last updated**: June 3, 2026
 
 ## Stable vs experimental
 
@@ -102,6 +102,10 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `enableHapticFeedback` | `boolean` | `false` | Stable | Trigger haptic feedback on supported devices when selecting/clearing. | `[enableHapticFeedback]="true"` |
 | `enablePullToRefresh` | `boolean` | `false` | Experimental | Reserve for future pull-to-refresh on mobile. | — |
 | `enableVoiceInput` | `boolean` | `false` | Experimental | Reserve for future voice input. | — |
+| `calendars` | `number` | `1` | Stable | Multi-calendar display layout (1, 2, or 3 months side-by-side) | `[calendars]="2"` |
+| `rangePresetFactory` | `(today: Date) => DatePreset[]` | `null` | Stable | Callback function supplying dynamic range presets | `[rangePresetFactory]="myPresetFactory"` |
+| `showTimezoneSelector` | `boolean` | `false` | Stable | Enables searchable timezone selection dropdown UI | `[showTimezoneSelector]="true"` |
+| `enableNaturalLanguage` | `boolean` | `false` | Stable | Enables relative natural language input parsing (e.g. "today", "tomorrow") | `[enableNaturalLanguage]="true"` |
 
 ##### Outputs
 
@@ -111,6 +115,9 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `action` | `EventEmitter<{ type: string; payload?: any }>` | Stable | Emitted on user actions (dateSelected, timeChanged, etc.) | `(action)="handleAction($event)"` |
 | `googleSyncClick` | `EventEmitter<void>` | Stable | Emitted when the user clicks the Google Calendar sync button. | `(googleSyncClick)="onSyncClick()"` |
 | `validationError` | `EventEmitter<{ code: string; message: string }>` | Stable | Emitted when validation fails (e.g. invalid typed date, date before min, after max). Message is translated. | `(validationError)="onValidationError($event)"` |
+| `invalidRange` | `EventEmitter<{ start: Date; end: Date; disabledDatesInside: Date[] }>` | Stable | Emitted when selected date range contains disabled dates | `(invalidRange)="onInvalidRange($event)"` |
+| `naturalLanguageResolved` | `EventEmitter<Date \| { start: Date; end: Date }>` | Stable | Emitted when natural language input is parsed successfully | `(naturalLanguageResolved)="onResolved($event)"` |
+| `timezoneChange` | `EventEmitter<string>` | Stable | Emitted when timezone is changed via selector UI | `(timezoneChange)="onTimezoneChange($event)"` |
 
 #### Methods
 

package/docs/COMPATIBILITY.md

@@ -1,6 +1,6 @@
 # Version Compatibility Matrix
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This document provides comprehensive compatibility information for `ngxsmk-datepicker` across different Angular versions, Zone.js configurations, and SSR/CSR setups.
 
@@ -468,3 +468,4 @@ Recommended validation before tagging a release:
 **Ionic/Capacitor sample**: The `examples/ionic-test-app` project may require `npm install --legacy-peer-deps` when Ionic’s peers lag Angular—see [examples/ionic-test-app/README.md](../../../examples/ionic-test-app/README.md).
 
 
+

package/docs/INTEGRATION.md

@@ -1,6 +1,6 @@
 # Integration Guides
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This document provides integration examples for using ngxsmk-datepicker with popular frameworks and libraries.
 
@@ -700,3 +700,4 @@ See the demo app **Integrations** page for a full "Datepicker in a modal" exampl
 - [Locale Guide](./LOCALE-GUIDE.md)
 
 
+

package/docs/IONIC_INTEGRATION.md

@@ -1,6 +1,6 @@
 # Ionic Framework Integration Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This guide provides step-by-step instructions for integrating ngxsmk-datepicker with Ionic Angular applications.
 
@@ -225,3 +225,4 @@ export class DatepickerPage {
 - [Capacitor Keyboard Plugin](https://capacitorjs.com/docs/apis/keyboard)
 
 
+

package/docs/IONIC_TESTING.md

@@ -1,6 +1,6 @@
 # Ionic Integration Testing Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This document provides comprehensive testing instructions for verifying ngxsmk-datepicker compatibility with Ionic Framework.
 
@@ -145,3 +145,4 @@ jobs:
 4. **Report issues** with detailed information
 
 
+

package/docs/LOCALE-GUIDE.md

@@ -1,6 +1,6 @@
 # Locale Packs & i18n Contributor Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 Guide for adding locale support and contributing translations to ngxsmk-datepicker.
 
@@ -297,3 +297,4 @@ If you encounter issues with a specific locale or want to contribute improvement
 **Thank you for contributing to ngxsmk-datepicker's internationalization!**
 
 
+

package/docs/PLUGIN-ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # Plugin Architecture
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ngxsmk-datepicker features a powerful **plugin architecture** that allows you to extend and customize the component's behavior without modifying its core code. This architecture is built on a **hook-based system** that provides extension points throughout the component's lifecycle.
 
@@ -927,3 +927,4 @@ The plugin architecture in ngxsmk-datepicker provides:
 For more examples and detailed hook documentation, see [Extension Points Guide](./extension-points.md).
 
 
+

package/docs/SEO.md

@@ -1,6 +1,6 @@
 # SEO Optimization Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This document outlines the SEO optimizations implemented for ngxsmk-datepicker to improve search engine visibility and discoverability.
 
@@ -211,3 +211,4 @@ ngxsmk-datepicker has been optimized for search engines with comprehensive meta
 - [Web.dev SEO Guide](https://web.dev/learn/seo/)
 
 
+

package/docs/SSR-EXAMPLE.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Example
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 Complete example demonstrating ngxsmk-datepicker with Angular Universal (SSR).
 
@@ -424,3 +424,4 @@ test('datepicker works after SSR hydration', async ({ page }) => {
 - [Platform Detection](https://angular.io/api/common/isPlatformBrowser)
 
 
+

package/docs/THEME-TOKENS.md

@@ -1,6 +1,6 @@
 # Theme Tokens & CSS Custom Properties
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 Complete reference for all CSS custom properties (CSS variables) available in ngxsmk-datepicker.
 
@@ -321,3 +321,4 @@ CSS custom properties are supported in all modern browsers:
 For older browsers, consider using a CSS custom properties polyfill or provide fallback values.
 
 
+

package/docs/TIMEZONE.md

@@ -1,6 +1,6 @@
 # Timezone Support
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ## Overview
 
@@ -258,6 +258,19 @@ const date = new Date(serverResponse.dateString.replace('Z', '')); // Don't remo
 - **Description**: IANA timezone name for date formatting
 - **Example**: `'America/New_York'`, `'UTC'`, `'Europe/London'`
 
+### Input: `showTimezoneSelector`
+
+- **Type**: `boolean`
+- **Default**: `false`
+- **Description**: Enables a searchable timezone selection dropdown UI in the datepicker header.
+- **Example**: `[showTimezoneSelector]="true"`
+
+### Output: `timezoneChange`
+
+- **Type**: `EventEmitter<string>`
+- **Description**: Emitted when the user changes the active timezone via the selector UI.
+- **Example**: `(timezoneChange)="onTimezoneChange($event)"`
+
 ### Utility Functions
 
 The library exports timezone utility functions:

package/docs/extension-points.md

@@ -1,6 +1,6 @@
 # Extension Points and Hooks
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ngxsmk-datepicker provides comprehensive extension points through the `hooks` input, allowing you to customize rendering, validation, keyboard shortcuts, formatting, and event handling.
 
@@ -416,3 +416,4 @@ import {
 ```
 
 
+

package/docs/signal-forms.md

@@ -1,6 +1,6 @@
 # Signal Forms Integration
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 This guide covers using ngxsmk-datepicker with Angular 21+ Signal Forms API.
 
@@ -597,3 +597,4 @@ If `form().dirty()` returns `false` after selecting a date:
 4. **Check dev console warnings**: In development mode, the datepicker logs warnings if it falls back to direct signal mutation, which may not track dirty state correctly.
 
 
+

package/docs/signals.md

@@ -1,6 +1,6 @@
 # Signals Integration Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ngxsmk-datepicker is fully compatible with Angular Signals, providing seamless integration with both traditional reactive forms and modern signal-based patterns.
 
@@ -263,3 +263,4 @@ dateSignal = signal<DatepickerValue>(null);
 The datepicker supports both patterns simultaneously, so you can migrate gradually.
 
 
+

package/docs/ssr.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Guide
 
-**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
+**Last updated:** June 3, 2026 - **Current stable:** v2.3.1
 
 ngxsmk-datepicker is fully compatible with Angular Universal and server-side rendering. This guide covers SSR setup, best practices, and troubleshooting.
 
@@ -302,3 +302,4 @@ export class SSRExampleComponent {
 - [Platform Detection](https://angular.dev/api/common/isPlatformBrowser)
 
 
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxsmk-datepicker",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Lightweight, accessible date and range picker for Angular 17+. Standalone component, Signals, SSR and zoneless-ready, Luxon-based i18n and timezones.",
   "author": {
     "name": "Sachin Dilshan",