ngxsmk-datepicker 2.1.4 → 2.1.6

package/CHANGELOG.md

@@ -2,9 +2,38 @@
 
 All notable changes to this project will be documented in this file.
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 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/spec/v2.0.0.html).
 
+## [2.1.6] - 2026-02-17
+
+### Changed
+
+- **Version**: Bump to 2.1.6 (current stable release).
+
+## [2.1.5] - 2026-02-17
+
+### Added
+
+- **Validation messages (i18n)**: New user-facing validation strings in `DatepickerTranslations`—`invalidDateFormat`, `dateBeforeMin`, `dateAfterMax`, `invalidDate`—with full translation support across all 8 languages. The component shows a translated error message when input is invalid, before min, or after max, and emits `validationError` with `code` and `message`.
+- **Calendar loading state**: Visual loading state (spinner + text) while the calendar is opening or generating. Loading state is announced to screen readers via `AriaLiveService`. A public getter is available for templates to reflect "calendar is loading."
+- **Installation options**: New `docs/INSTALLATION.md` documenting all install methods (npm, Yarn, pnpm, Bun, Git, local path, CDN, tarball). Demo Installation page updated with alternative install commands and a link to the full guide.
+- **Issue-reproduction app**: New minimal Angular app `angular-issue-test` (routes: Home, month-navigation, range-reselection) for manually verifying reported issues. Served via `npx ng serve angular-issue-test`.
+
+### Changed
+
+- **Version**: Bump to 2.1.5 (stable release).
+- **Demo app – light/dark theme**: Theme toggle now correctly switches the UI. `data-theme` is synced on the document when theme changes; `html[data-theme='light']` CSS overrides added for the light palette. Nav-link hover uses `var(--color-text-main)` for both themes. Responsive spacing variables use `clamp()`.
+- **Library refactors**: Calendar grid generation and input parsing/formatting logic extracted into `CalendarGenerationService` and `DatepickerParsingService` respectively.
+- **Demo styles**: New utility classes (e.g. `.link`, `.no-underline`, `.text-dim`, `.gap-xs`) and tip label layout tweak.
+- **Docs**: README and library README reference `docs/INSTALLATION.md`. CHANGELOG, MIGRATION, ROADMAP, SECURITY, API_REFERENCE, BUNDLE_SIZE_REPORT, and API.md updated for 2.1.5.
+
+### Fixed
+
+- **Demo theme**: Fixed light/dark theme toggle not applying—demo now correctly reflects the active theme (header toggle and system preference).
+
 ## [2.1.4] - 2026-02-13
 
 ### Added

package/MIGRATION.md

@@ -2,8 +2,12 @@
 
 This document provides migration instructions for upgrading between major versions of ngxsmk-datepicker.
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ## Table of Contents
 
+- [v2.1.5 → v2.1.6](#v215---v216)
+- [v2.1.4 → v2.1.5](#v214---v215)
 - [v2.1.3 → v2.1.4](#v213---v214)
 - [v2.1.2 → v2.1.3](#v212---v213)
 - [v2.1.1 → v2.1.2](#v211---v212)
@@ -48,6 +52,37 @@ This document provides migration instructions for upgrading between major versio
 - [v1.9.0 → v2.0.0](#v190---v200) (Future)
 - [v1.7.0 → v1.8.0](#v170---v180)
 
+## v2.1.5 → v2.1.6
+
+### Changes
+
+- **Version Update**: Updated to version 2.1.6.
+- No breaking changes.
+
+### Migration Steps
+
+No migration steps required.
+
+```bash
+npm install ngxsmk-datepicker@2.1.6
+```
+
+## v2.1.4 → v2.1.5
+
+### Changes
+
+- **Version Update**: Updated to version 2.1.5.
+- **New**: User-facing validation messages (i18n) for invalid date, date before min, date after max; calendar loading state (visual + a11y); installation options doc and demo page updates; demo light/dark theme fix; optional issue-reproduction app. Service refactors (calendar generation, parsing) are internal.
+- No breaking changes.
+
+### Migration Steps
+
+No migration steps required.
+
+```bash
+npm install ngxsmk-datepicker@2.1.5
+```
+
 ## v2.1.3 → v2.1.4
 
 ### Changes
@@ -160,7 +195,7 @@ npm install ngxsmk-datepicker@2.0.8
 ### Changes
 
 - **Version Update**: Updated to version 2.0.7
-- **Stable Release**: Version 2.1.2 is the current stable version
+- **Stable Release**: Version 2.1.6 is the current stable version
 - No breaking changes.
 
 ### Migration Steps

package/README.md

@@ -24,13 +24,15 @@
 
 ---
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ### **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.1.4` is live! This major update introduces a significant **UI Refresh (Border Detox)**, **Mobile Stability** improvements, and fixes for circular dependencies.
+> **Stable Release**: `v2.1.6` is live! This release adds **validation messages (i18n)**, **calendar loading state**, **demo light/dark theme fix**, **installation options** doc, and an **issue-reproduction app**. No breaking changes.
 >
-> ⚠️ **Important**: Versions 2.0.10 and 2.0.11 are broken and have been unpublished. Please use v2.1.4 or later.
+> ⚠️ **Important**: Versions 2.0.10 and 2.0.11 are broken and have been unpublished. Please use v2.1.6 or later.
 
 ---
 
@@ -136,9 +138,24 @@ For details, see [CONTRIBUTING.md](https://github.com/NGXSMK/ngxsmk-datepicker/b
 ## **📦 Installation**
 
 ```bash
-npm install ngxsmk-datepicker@2.1.4
+npm install ngxsmk-datepicker@2.1.6
 ```
 
+### Alternative installation
+
+You can install without npm using any of these methods (peer dependencies must still be installed in your app):
+
+| Method | Command |
+|--------|--------|
+| **Yarn** | `yarn add ngxsmk-datepicker@2.1.6` |
+| **pnpm** | `pnpm add ngxsmk-datepicker@2.1.6` |
+| **Bun** | `bun add ngxsmk-datepicker@2.1.6` |
+| **From Git** | `npm install github:NGXSMK/ngxsmk-datepicker#v2.1.6` (requires the repo to have built output or you build from source) |
+| **Local path** | Build the library in the repo (`npx ng build ngxsmk-datepicker`), then `npm install /path/to/ngxsmk-datepicker/dist/ngxsmk-datepicker` |
+| **CDN (ESM)** | Use [unpkg](https://unpkg.com/ngxsmk-datepicker@2.1.6/) or [jsDelivr](https://cdn.jsdelivr.net/npm/ngxsmk-datepicker@2.1.6/) in your bundler or import map; peer dependencies (Angular, etc.) must be installed in your app. |
+
+For all options and caveats, see [docs/INSTALLATION.md](docs/INSTALLATION.md).
+
 ## **Usage**
 
 ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
@@ -211,7 +228,7 @@ For detailed Signal Forms integration including dirty state tracking, see the [S
 
 #### **1. Import the Component**
 
-In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.
+In your component file (e.g., app.component.ts), import the component (or the module—see troubleshooting below).
 
     import { Component } from '@angular/core';
     import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
@@ -241,6 +258,8 @@ In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponen
       }
     }
 
+**If you see NG1010** (`'imports' must be an array... Value could not be determined statically`) when using the Angular compiler plugin or in strict AOT builds, use the wrapper module instead: `import { NgxsmkDatepickerModule } from 'ngxsmk-datepicker'` and set `imports: [NgxsmkDatepickerModule]`. The template stays the same (`<ngxsmk-datepicker>`).
+
 #### **2. Add it to Your Template**
 
 Use the `<ngxsmk-datepicker>` selector in your HTML template.
@@ -562,7 +581,7 @@ The `locale` input controls all internationalization. It automatically formats m
 
 ### **Global Language Support**
 
-ngxsmk-datepicker v2.1.4 now features **full localization synchronization** for:
+ngxsmk-datepicker v2.1.6 now features **full localization synchronization** for:
 
 - �� English (`en`)
 - �� German (`de`)

package/docs/API.md

@@ -2,6 +2,8 @@
 
 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.1.6+ | **Last updated**: February 17, 2026
+
 ## Versioning Policy
 
 ngxsmk-datepicker follows [Semantic Versioning](https://semver.org/):
@@ -59,6 +61,9 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `displayFormat` | `string` | `null` | Stable | Custom date format string (e.g., 'MM/DD/YYYY'). | `displayFormat="DD.MM.YYYY"` |
 | `showCalendarButton` | `boolean` | `true` | Stable | Show/hide the calendar icon button. When `false`, users can still open calendar by clicking the input field. | `[showCalendarButton]="false"` |
 | `minuteInterval` | `number` | `1` | Stable | Minute selection interval | `[minuteInterval]="15"` |
+| `showSeconds` | `boolean` | `false` | Stable | Show seconds in time selection | `[showSeconds]="true"` |
+| `secondInterval` | `number` | `1` | Stable | Second selection interval (e.g. 1, 5, 15) | `[secondInterval]="5"` |
+| `use24Hour` | `boolean` | `false` | Stable | Use 24-hour time format (no AM/PM) | `[use24Hour]="true"` |
 | `showRanges` | `boolean` | `true` | Stable | Show predefined ranges (range mode) | `[showRanges]="true"` |
 | `ranges` | `DateRange` | `null` | Stable | Predefined date ranges | `[ranges]="quickRanges"` |
 | `holidayProvider` | `HolidayProvider \| null` | `null` | Stable | Custom holiday provider | `[holidayProvider]="myHolidayProvider"` |
@@ -79,6 +84,17 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 | `closeAriaLabel` | `string` | `'Close calendar'` | Stable | ARIA label for close button | `closeAriaLabel="Close date picker"` |
 | `rtl` | `boolean \| null` | `null` | Stable | Right-to-left layout (auto-detects from locale or document.dir) | `[rtl]="true"` |
 | `userAriaDescribedBy` | `string` | `''` | Stable | Aria describedby ID provided by the user or the parent form field. Required for seamless Angular Material integration. | `[userAriaDescribedBy]="'my-help-id'"` |
+| `timeRangeMode` | `boolean` | `false` | Stable | In range mode with `showTime`, show separate start/end time pickers (from/to). | `[timeRangeMode]="true"` |
+| `timezone` | `string` | `undefined` | Stable | IANA timezone name for display and value handling (e.g. `America/New_York`, `UTC`). | `timezone="Europe/London"` |
+| `useNativePicker` | `boolean` | `false` | Stable | Use the browser native date/time input when supported (e.g. on mobile). | `[useNativePicker]="true"` |
+| `autoDetectMobile` | `boolean` | `true` | Stable | When true, append popover to body and use mobile styles on small/touch devices. | `[autoDetectMobile]="false"` |
+| `appendToBody` | `boolean` | `false` | Stable | Append calendar popover to `document.body` (e.g. to avoid overflow clipping). | `[appendToBody]="true"` |
+| `mobileModalStyle` | `'bottom-sheet' \| 'center' \| 'fullscreen'` | `'bottom-sheet'` | Stable | How the calendar is shown on mobile (when detected). | `mobileModalStyle="fullscreen"` |
+| `mobileTimePickerStyle` | `'wheel' \| 'slider' \| 'native'` | `'slider'` | Stable | Time picker style on mobile. | `mobileTimePickerStyle="wheel"` |
+| `mobileTheme` | `'compact' \| 'comfortable' \| 'spacious'` | `'comfortable'` | Stable | Density of the calendar on mobile. | `mobileTheme="compact"` |
+| `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. | — |
 
 ##### Outputs
 
@@ -86,6 +102,7 @@ import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 |--------|------|--------|-------------|---------|
 | `valueChange` | `EventEmitter<DatepickerValue>` | Stable | Emitted when value changes | `(valueChange)="onDateChange($event)"` |
 | `action` | `EventEmitter<{ type: string; payload?: any }>` | Stable | Emitted on user actions (dateSelected, timeChanged, etc.) | `(action)="handleAction($event)"` |
+| `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)"` |
 
 #### Methods
 

package/docs/COMPATIBILITY.md

@@ -1,5 +1,7 @@
 # Version Compatibility Matrix
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This document provides comprehensive compatibility information for `ngxsmk-datepicker` across different Angular versions, Zone.js configurations, and SSR/CSR setups.
 
 ## 📋 Angular Version Compatibility

package/docs/INTEGRATION.md

@@ -1,5 +1,7 @@
 # Integration Guides
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This document provides integration examples for using ngxsmk-datepicker with popular frameworks and libraries.
 
 ## Table of Contents

package/docs/IONIC_INTEGRATION.md

@@ -1,5 +1,7 @@
 # Ionic Framework Integration Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This guide provides step-by-step instructions for integrating ngxsmk-datepicker with Ionic Angular applications.
 
 ## Quick Start

package/docs/IONIC_TESTING.md

@@ -1,5 +1,7 @@
 # Ionic Integration Testing Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This document provides comprehensive testing instructions for verifying ngxsmk-datepicker compatibility with Ionic Framework.
 
 ## Automated Tests

package/docs/LOCALE-GUIDE.md

@@ -1,5 +1,7 @@
 # Locale Packs & i18n Contributor Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 Guide for adding locale support and contributing translations to ngxsmk-datepicker.
 
 ## Overview

package/docs/PLUGIN-ARCHITECTURE.md

@@ -1,5 +1,7 @@
 # Plugin Architecture
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 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.
 
 ## Table of Contents

package/docs/SEO.md

@@ -1,5 +1,7 @@
 # SEO Optimization Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This document outlines the SEO optimizations implemented for ngxsmk-datepicker to improve search engine visibility and discoverability.
 
 ## Overview

package/docs/SSR-EXAMPLE.md

@@ -1,5 +1,7 @@
 # Server-Side Rendering (SSR) Example
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 Complete example demonstrating ngxsmk-datepicker with Angular Universal (SSR).
 
 ## Overview

package/docs/THEME-TOKENS.md

@@ -1,5 +1,7 @@
 # Theme Tokens & CSS Custom Properties
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 Complete reference for all CSS custom properties (CSS variables) available in ngxsmk-datepicker.
 
 ## Overview

package/docs/TIMEZONE.md

@@ -1,5 +1,7 @@
 # Timezone Support
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ## Overview
 
 The `ngxsmk-datepicker` library provides timezone-aware date formatting and parsing. This document explains how timezones work in the context of JavaScript Date objects and how to use the library's timezone features.

package/docs/extension-points.md

@@ -1,5 +1,7 @@
 # Extension Points and Hooks
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ngxsmk-datepicker provides comprehensive extension points through the `hooks` input, allowing you to customize rendering, validation, keyboard shortcuts, formatting, and event handling.
 
 > **📚 For a complete understanding of the plugin architecture, see the [Plugin Architecture Guide](./PLUGIN-ARCHITECTURE.md)** which covers architecture principles, plugin patterns, lifecycle, and advanced use cases.

package/docs/signal-forms.md

@@ -1,5 +1,7 @@
 # Signal Forms Integration
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 This guide covers using ngxsmk-datepicker with Angular 21+ Signal Forms API.
 
 ## Overview

package/docs/signals.md

@@ -1,5 +1,7 @@
 # Signals Integration Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ngxsmk-datepicker is fully compatible with Angular Signals, providing seamless integration with both traditional reactive forms and modern signal-based patterns.
 
 ## Basic Signal Binding

package/docs/ssr.md

@@ -1,5 +1,7 @@
 # Server-Side Rendering (SSR) Guide
 
+**Last updated:** February 2026 · **Current stable:** v2.1.6
+
 ngxsmk-datepicker is fully compatible with Angular Universal and server-side rendering. This guide covers SSR setup, best practices, and troubleshooting.
 
 ## Overview