ngxsmk-datepicker 2.4.0-beta.0 → 2.4.0

package/README.md

@@ -11,7 +11,6 @@
 ### _The Gold Standard for Premium Angular Calendar Selection_
 
 [![npm version](https://img.shields.io/npm/v/ngxsmk-datepicker.svg?style=flat-square&color=6d28d9)](https://www.npmjs.com/package/ngxsmk-datepicker)
-[![CI](https://img.shields.io/github/actions/workflow/status/NGXSMK/ngxsmk-datepicker/ci.yml?branch=main&label=CI&style=flat-square)](https://github.com/NGXSMK/ngxsmk-datepicker/actions/workflows/ci.yml)
 [![Angular](https://img.shields.io/badge/Angular-17%2B-DD0031.svg?style=flat-square&logo=angular)](https://angular.io/)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/LICENSE)
 [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-toozuuu-orange?style=flat-square&logo=buy-me-a-coffee)](https://buymeacoffee.com/toozuuu)
@@ -20,9 +19,7 @@
 
 **`npm i ngxsmk-datepicker`**
 
-[Live demo](https://ngxsmk.github.io/ngxsmk-datepicker/) • [StackBlitz (repo)](https://stackblitz.com/github/NGXSMK/ngxsmk-datepicker) • [API docs](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/API.md) • [Issues](https://github.com/NGXSMK/ngxsmk-datepicker/issues) • [Buy me a coffee](https://buymeacoffee.com/toozuuu)
-
-*StackBlitz:* after it boots, run `npm install` then `npm start` in the terminal to serve the demo app (`demo-app`).
+[Explore Live Demo](https://ngxsmk.github.io/ngxsmk-datepicker/) • [Buy me a coffee](https://buymeacoffee.com/toozuuu) • [API Documentation](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/API.md) • [Submit Issue](https://github.com/NGXSMK/ngxsmk-datepicker/issues)
 
 </div>
 
@@ -44,16 +41,14 @@
 
 1. [📷 Screenshots](#-screenshots)
 2. [✨ Features](#-features)
-3. [🤔 Why this library?](#why-this-library)
-4. [🌐 Discoverability](#-discoverability)
-5. [📋 Compatibility](#-compatibility)
-6. [🌍 Localization (i18n)](#-localization-i18n)
-7. [📦 Installation](#-installation)
-8. [🚀 Quick start / usage](#usage)
-9. [🔌 Framework Integration](#-framework-integration)
-10. [⚙️ API Reference](#-api-reference)
-11. [🎨 Theming](#-theming)
-12. [⌨️ Keyboard Navigation](#-keyboard-navigation)
+3. [📋 Compatibility](#-compatibility)
+4. [🌍 Localization (i18n)](#-localization-i18n)
+5. [📦 Installation](#-installation)
+6. [🚀 Quick Start](#-quick-start)
+7. [🔌 Framework Integration](#-framework-integration)
+8. [⚙️ API Reference](#-api-reference)
+9. [🎨 Theming](#-theming)
+10. [⌨️ Keyboard Navigation](#-keyboard-navigation)
 
 ---
 
@@ -72,43 +67,37 @@
 - 💎 **Signal-Driven Engine**: Hyper-reactive state management using Angular Signals.
 - 🌓 **Native Dark Mode**: Beautifully crafted themes for light and dark environments.
 - 📱 **Mobile-First UX**: Native mobile picker integration with touch gestures and haptic feedback.
-- 🧩 **Minimal footprint**: Standalone component; **Luxon** is the only date peer beyond Angular (no full UI suite required).
+- 🧩 **Zero Dependencies**: Lightweight standalone component with no external bloat.
 - ⚡ **Performance++**: Lazy-loaded calendar months, memoized calculations, and tree-shakable architecture.
 
 ### **Advanced Functionality**
 
 - 📅 **Google Calendar Sync**: Built-in support for seamlessly syncing and displaying events natively from Google Calendar.
 - 🌐 **8-Language i18n**: Full localization for `en`, `de`, `es`, `sv`, `ko`, `zh`, `ja`, and `fr`.
-- 🔢 **ISO Week Numbers**: Optional week-number column via `[showWeekNumbers]`.
-- ⌨️ **Guided Input Masking**: `[inputMask]` auto-inserts separators as users type (e.g. `12` → `12/`).
-- 🌍 **Secondary Calendars**: Annotate day cells with Hijri, Jalali, Hebrew, Buddhist, or Japanese dates via `[secondaryCalendar]`.
-- 🏨 **Availability Calendars**: Per-day prices, indicator dots, and classes via `[dayMetadata]`; server-driven blocked dates via `[asyncDateFilter]`.
-- 🎛️ **Custom Action Bars**: `[calendarHeaderTemplate]` / `[calendarFooterTemplate]` slots with `clear()`/`close()` actions.
 - 🛠️ **Plugin Architecture**: Extend functionality via hooks for rendering, validation, and shortcuts.
 - 🧪 **Signal Forms Native**: Direct integration with Angular 21's new Signal Forms API.
 - 🚀 **Zoneless Ready**: Optimized for the future of Angular—works perfectly without zone.js.
 - ♿ **Full Accessibility**: WAI-ARIA compliant with extensive keyboard navigation support.
 
-## Why this library?
-
-Use **ngxsmk-datepicker** when you want a focused **date / range picker** with strong **mobile**, **i18n**, **timezone**, and **SSR** story on **Angular 17+**, without adopting a full Material UI stack. It is a **standalone** component with **Luxon** as the single date peer (plus Angular).
-
-| | ngxsmk-datepicker | Angular Material datepicker |
-| --- | --- | --- |
-| **Fit** | Picker-first; optional Material/CDK peers for overlays only | Part of Material; best when you already use Material forms & CDK |
-| **Peer deps** | Angular + **Luxon** | **@angular/material** + **@angular/cdk** |
-| **Forms** | Template-driven, Reactive Forms, Signals; **Signal Forms** (`[field]`) on Angular 21+ | Reactive + template-driven; integrates with Material form field |
-| **Stack** | Tree-shakable package aimed at picker scenarios | Broader design system and bundle footprint |
-
-This is **not** a drop-in replacement for every Material datepicker API; choose based on whether you need **Material’s form-field ecosystem** or a **standalone picker** you can theme and ship with **zoneless** / **SSR** setups. See the [live demo](https://ngxsmk.github.io/ngxsmk-datepicker/) and [COMPATIBILITY](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/COMPATIBILITY.md) for details.
-
-## **🌐 Discoverability**
-
-**Maintainers (GitHub):** consider repository **Topics** such as: `angular`, `datepicker`, `date-range-picker`, `luxon`, `standalone-components`, `i18n`, `angular-universal`, `ionic`, `accessibility`.
-
-**Community:** if this project helped you, stars and accurate comparisons in blog posts or issue threads help others find it. Curated lists (for example **awesome-angular**-style repos) usually accept small PRs that add a one-line link and follow their contribution rules—check each list’s guidelines before opening a PR.
-
-**Security:** report sensitive issues per [SECURITY.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/SECURITY.md), not via public issues.
+## **⚖️ Why ngxsmk-datepicker? (Comparison)**
+
+| Capability | **ngxsmk-datepicker** | @angular/material | ngx-bootstrap | ng-pick-datetime |
+| --- | :---: | :---: | :---: | :---: |
+| Standalone / no NgModule | ✅ | ✅ | ⚠️ | ❌ |
+| Signals & Zoneless-ready | ✅ | ⚠️ | ❌ | ❌ |
+| SSR / Angular Universal | ✅ | ✅ | ⚠️ | ❌ |
+| Date **range** picker | ✅ | ✅ | ✅ | ✅ |
+| Multiple / week / month / quarter / year modes | ✅ | ❌ | ❌ | ❌ |
+| Time & timezone-aware selection | ✅ | ❌ | ⚠️ | ✅ |
+| Natural-language input ("next friday") | ✅ | ❌ | ❌ | ❌ |
+| Dual-range **comparison** highlight | ✅ | ❌ | ❌ | ❌ |
+| Built-in i18n (8 languages) + RTL | ✅ | ⚠️ | ⚠️ | ⚠️ |
+| React / Vue / Web-Component wrappers | ✅ | ❌ | ❌ | ❌ |
+| Zero peer-dep bloat (only Luxon) | ✅ | ⚠️ | ⚠️ | ⚠️ |
+| Actively maintained (Angular 17–21+) | ✅ | ✅ | ⚠️ | ❌ |
+
+<sub>✅ first-class · ⚠️ partial / extra setup · ❌ not available. Comparison reflects each library's
+publicly documented features at the time of writing; corrections welcome via PR.</sub>
 
 ## **📋 Compatibility**
 
@@ -168,36 +157,21 @@ Features marked as experimental may change:
 
 For details, see [CONTRIBUTING.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CONTRIBUTING.md#deprecation-policy).
 
-## **📦 Installation**
-
-```bash
-ng add ngxsmk-datepicker
-```
+## **🚀 Installation**
 
-The `ng add` schematic installs the package, adds the `luxon` peer dependency if it is missing, and prints a getting-started snippet. Plain npm works too:
+Install the package using npm:
 
 ```bash
-npm install ngxsmk-datepicker@2.4.0
+npm install ngxsmk-datepicker@latest
 ```
 
 ### 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.4.0` |
-| **pnpm** | `pnpm add ngxsmk-datepicker@2.4.0` |
-| **Bun** | `bun add ngxsmk-datepicker@2.4.0` |
-| **From Git** | `npm install github:NGXSMK/ngxsmk-datepicker#v2.4.0` (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.4.0/) or [jsDelivr](https://cdn.jsdelivr.net/npm/ngxsmk-datepicker@2.4.0/) 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).
+You can install without npm using Yarn, pnpm, Bun, from Git, a local path, or via CDN (ESM). Peer dependencies must still be installed in your app. For all options and caveats, see [INSTALLATION.md](../../docs/INSTALLATION.md) in the repo root.
 
 ## **Usage**
 
-ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.
+ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module. 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 `NgxsmkDatepickerModule` in your `imports` array instead of `NgxsmkDatepickerComponent` (same template: `<ngxsmk-datepicker>`).
 
 ### Signal Forms (Angular 21)
 
@@ -267,7 +241,7 @@ For detailed Signal Forms integration including dirty state tracking, see the [S
 
 #### **1. Import the Component**
 
-All public exports (component, utilities, types, services) come from the main package entry: `'ngxsmk-datepicker'` (there is no separate `/utils` subpath). In your component file (e.g., app.component.ts), import the component (or the module—see troubleshooting below).
+In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.
 
     import { Component } from '@angular/core';
     import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';
@@ -297,8 +271,6 @@ All public exports (component, utilities, types, services) come from the main pa
       }
     }
 
-**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.
@@ -379,7 +351,7 @@ export class MaterialFormComponent {
 }
 ```
 
-**Non-Standalone (NgModules):** Add the directive file from [INTEGRATION.md § Angular Material](projects/ngxsmk-datepicker/docs/INTEGRATION.md#angular-material), then add it to your module `imports` (with `NgxsmkDatepickerComponent`, `MatFormFieldModule`, etc.) and use `ngxsmkMatFormFieldControl` on the datepicker in templates.
+**Non-Standalone (NgModules):** Add the directive file from [INTEGRATION.md § Angular Material](docs/INTEGRATION.md#angular-material), then add it to your module `imports` (with `NgxsmkDatepickerComponent`, `MatFormFieldModule`, etc.) and use `ngxsmkMatFormFieldControl` on the datepicker in templates.
 
 **With Date Range:**
 
@@ -398,9 +370,6 @@ For best integration with Ionic, import the integration styles in your global CS
 @import "ngxsmk-datepicker/styles/ionic-integration.css";
 ```
 
-**Automatic Theming:**
-The datepicker automatically detects and uses Ionic CSS variables (e.g., `--ion-color-primary`, `--ion-background-color`) so it matches your app's theme out of the box without extra configuration.
-
 Works seamlessly with Ionic form components and follows Ionic design patterns:
 
 ```typescript
@@ -573,14 +542,6 @@ By default, the datepicker input is `readonly` to prevent invalid date strings a
 | 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"). |
-| showWeekNumbers    | boolean | false | Shows an ISO 8601 week-number column on the left of the day grid. |
-| weekNumberLabel    | string | 'Wk' | Header label for the week-number column (e.g. "KW", "S"). |
-| inputMask          | boolean \| string | false | Guided input masking while typing: `true` uses `displayFormat` (or MM/DD/YYYY); a string (e.g. `'DD.MM.YYYY'`) sets an explicit pattern. Requires `allowTyping`. |
-| asyncDateFilter    | (start: Date, end: Date) => Promise<DateInput[]> | null | Server-driven disabled dates: called with the visible range on every navigation; resolved dates are disabled. Stale responses are discarded. |
-| secondaryCalendar  | 'islamic' \| 'persian' \| 'hebrew' \| 'buddhist' \| 'japanese' | null | Annotates each day cell with its date in a second calendar system (rendered via Intl; the grid stays Gregorian). |
-| dayMetadata        | (date: Date) => DayMetadata | null | Per-day decorations without templates: label under the day number (e.g. a price), indicator dot color, extra CSS classes, tooltip. |
-| calendarHeaderTemplate | TemplateRef | null | Custom content at the top of the popover/inline calendar. Context: `let-actions` → `{ clear(), close() }`. |
-| calendarFooterTemplate | TemplateRef | null | Replaces the default Clear/Close footer with custom actions. Context: `let-actions` → `{ clear(), close() }`. |
 
 ### **Outputs**
 
@@ -592,8 +553,6 @@ By default, the datepicker input is `readonly` to prevent invalid date strings a
 | 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. |
-| asyncDateFilterLoading | boolean | Emits true while an `asyncDateFilter` request is in flight, false when it settles. |
-| asyncDateFilterError | unknown | Emitted when `asyncDateFilter` rejects; the previous disabled set is kept. |
 
 ## **🎨 Theming**
 
@@ -661,14 +620,14 @@ The `locale` input controls all internationalization. It automatically formats m
 
 ngxsmk-datepicker v2.4.0+ now features **full localization synchronization** for:
 
-- �� English (`en`)
-- �� German (`de`)
-- �� French (`fr`)
-- �� Spanish (`es`)
+- 🇺🇸 English (`en`)
+- 🇩🇪 German (`de`)
+- 🇫🇷 French (`fr`)
+- 🇪🇸 Spanish (`es`)
 - 🇸🇪 Swedish (`sv`)
-- �� Korean (`ko`)
-- �� Chinese (`zh`)
-- �� Japanese (`ja`)
+- 🇰🇷 Korean (`ko`)
+- 🇨🇳 Chinese (`zh`)
+- 🇯🇵 Japanese (`ja`)
 
 ### **Usage Example**
 
@@ -733,7 +692,7 @@ const myHooks: DatepickerHooks = {
 <ngxsmk-datepicker [hooks]="myHooks" [customShortcuts]="shortcuts" mode="single"> </ngxsmk-datepicker>
 ```
 
-All date cells are keyboard accessible with proper ARIA attributes for screen readers. The component is built with **accessibility in mind**: keyboard navigation, ARIA roles and labels, and live regions for announcements. For details see [API.md – Keyboard Support](projects/ngxsmk-datepicker/docs/API.md#keyboard-support) and the ARIA-related inputs (e.g. `closeAriaLabel`, `clearAriaLabel`) in the API reference.
+All date cells are keyboard accessible with proper ARIA attributes for screen readers.
 
 See [Extension Points Guide](./projects/ngxsmk-datepicker/docs/extension-points.md) for detailed customization options.
 
@@ -758,14 +717,11 @@ This library has been optimized for maximum performance:
 - ✅ **Date Validation**: Fixed "Today" unselectable bug by normalizing `minDate` boundary checks.
 - ✅ **Keyboard Shortcuts**: Updated "Today" selection shortcut to use timezone-aware calculation.
 - ✅ **Validation messages**: User-facing i18n strings for invalid date, min/max; `validationError` output and on-screen error display
-- ✅ **Change Detection**: Fixed OnPush change detection issues with proper `markForCheck()` triggers
-- ✅ **Date Comparison**: Fixed null safety issues in date range comparisons
-- ✅ **Memory Leaks**: Added cache size limits to prevent memory leaks
-- ✅ **Type Safety**: Improved TypeScript types and null safety checks
-- ✅ **Mobile UX**: Enhanced mobile interactions and touch feedback
-- ✅ **Performance**: Optimized template bindings with memoized functions
-- ✅ **Accessibility**: Better focus states and keyboard navigation
-- ✅ **Build System**: Improved build configuration and optimization
+- ✅ **Calendar loading state**: Visual spinner + text and screen-reader announcement while calendar opens/generates
+- ✅ **Demo theme**: Light/dark theme toggle and system preference now correctly switch the demo UI
+- ✅ **Installation options**: Full install guide (npm, Yarn, pnpm, Bun, Git, CDN, etc.) and demo page updates
+- ✅ **Accessibility**: Loading state announced via live region; validation errors exposed for a11y
+- ✅ **Type Safety**: New translation keys and strictly typed inputs/outputs
 
 ### **Performance Enhancements:**
 
@@ -919,9 +875,13 @@ We welcome and appreciate contributions from the community! Whether it's reporti
 
 ## **📄 Changelog**
 
-**Recent:** Use **v2.4.0** on npm. The v2.3.x line adds side-by-side multi-calendar layouts, natural language typing, timezone selector UI dropdown, warning style selections, and strict TypeScript/AOT stability. Versions 2.0.10 and 2.0.11 are unpublished; use v2.1.1+ or **v2.4.0**.
+For a full list of changes, please refer to the [CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md) file.
+
+### **v2.4.0** (Current Stable)`r`n`r`n- **npm**: Published tarballs include compiled `fesm2022/` output and type declarations.
 
-For the full list of changes, see [CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md).
+### **Earlier Versions**
+
+For older version details, please refer to the [full CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md).
 
 ## **🎨 Theming with TokiForge**
 
@@ -929,6 +889,11 @@ Looking for a powerful theming solution for your Angular application? Check out
 
 ### Why TokiForge?
 
+- ✅ **Framework-agnostic** — Works with Angular, React, Vue, Svelte, and vanilla JS
+- ✅ **Runtime theme switching** — Change themes dynamically without rebuilds
+- ✅ **Type-safe** — Full TypeScript support for design tokens
+- ✅ **Lightweight** — <3 KB gzipped runtime footprint
+- ✅ **CSS custom properties** — Zero JS overhead in static mode
 - ✅ **SSR compatible** — Works seamlessly with Angular Universal
 
 Perfect for managing design tokens, creating theme systems, and implementing dark mode in your Angular applications!
@@ -941,9 +906,19 @@ Perfect for managing design tokens, creating theme systems, and implementing dar
 
 MIT License - see [LICENSE](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/LICENSE) file for details.
 
-## **🔍 SEO (demo site)**
+## **🔍 SEO & Discoverability**
+
+This library is optimized for search engine visibility, especially for European markets:
 
-The hosted **[live demo](https://ngxsmk.github.io/ngxsmk-datepicker/)** build ships with meta tags (Open Graph, Twitter cards, `hreflang`, structured data) and locale-aware content for broader discovery. For **GitHub/npm** visibility—topics, awesome lists, StackBlitz, and security reporting—see [**Discoverability**](#-discoverability) near the top of this README.
+- **Keywords**: Angular datepicker, date range picker, calendar component, Angular 17-21, TypeScript, Signal Forms, SSR compatible
+- **European SEO**: Optimized for Germany, France, Spain, Italy, Netherlands, Poland, Portugal, Sweden, Norway, Finland, Denmark, Belgium, Switzerland, Austria, and United Kingdom
+- **Multi-language Support**: hreflang tags for 15+ European languages and locales
+- **European Geo-targeting**: Geo tags and structured data optimized for European Union countries
+- **Meta Tags**: Comprehensive Open Graph and Twitter Card support with European locale alternates
+- **Structured Data**: JSON-LD schema markup with European audience targeting and area served information
+- **Documentation**: Complete API documentation with examples
+- **Performance**: Optimized bundle size (~127KB) for fast loading
+- **European Localization**: Full i18n support for European date formats, week start days, and regional preferences
 
 ## **👨‍💻 Author**
 

package/package.json

@@ -1,113 +1,106 @@
-{
-  "name": "ngxsmk-datepicker",
-  "version": "2.4.0-beta.0",
-  "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",
-    "url": "https://www.sachindilshan.com/"
-  },
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0 <24.0.0",
-    "@angular/core": ">=17.0.0 <24.0.0",
-    "@angular/forms": ">=17.0.0 <24.0.0",
-    "luxon": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "zone.js": {
-      "optional": true
-    },
-    "@angular/material": {
-      "optional": true
-    },
-    "@angular/cdk": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "main": "fesm2022/ngxsmk-datepicker.mjs",
-  "module": "fesm2022/ngxsmk-datepicker.mjs",
-  "es2022": "fesm2022/ngxsmk-datepicker.mjs",
-  "types": "types/ngxsmk-datepicker.d.ts",
-  "typings": "types/ngxsmk-datepicker.d.ts",
-  "homepage": "https://github.com/NGXSMK/ngxsmk-datepicker#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NGXSMK/ngxsmk-datepicker.git"
-  },
-  "bugs": {
-    "url": "https://github.com/NGXSMK/ngxsmk-datepicker/issues"
-  },
-  "sideEffects": false,
-  "schematics": "./schematics/collection.json",
-  "ng-add": {
-    "save": "dependencies"
-  },
-  "files": [
-    "schematics/**/*.js",
-    "schematics/**/*.json",
-    "fesm2022/**/*.mjs",
-    "**/*.d.ts",
-    "**/*.metadata.json",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md",
-    "MIGRATION.md",
-    "docs/*.md",
-    "!docs/REFACTOR_PLAN.md",
-    "!docs/FEATURE_SCOPING.md",
-    "!docs/IONIC_TESTING.md",
-    "!docs/**/*.png",
-    "!docs/**/*.jpg",
-    "!docs/**/*.gif",
-    "styles/**/*.css"
-  ],
-  "keywords": [
-    "angular",
-    "datepicker",
-    "date-range-picker",
-    "calendar",
-    "standalone-component",
-    "reactive-forms",
-    "luxon",
-    "angular-17",
-    "angular-18",
-    "angular-19",
-    "angular-20",
-    "angular-21",
-    "angular-22",
-    "angular-23",
-    "typescript",
-    "date-selection",
-    "i18n",
-    "localization",
-    "ssr",
-    "angular-universal",
-    "zoneless",
-    "accessibility",
-    "a11y"
-  ],
-  "optimization": {
-    "treeShaking": true,
-    "sideEffects": false,
-    "usedExports": true
-  },
-  "engines": {
-    "node": ">=20.19.0 || >=22.12.0",
-    "npm": ">=10.0.0"
-  },
-  "prepublishOnly": "node ../../scripts/assert-lib-publish-artifacts.cjs",
-  "exports": {
-    "./styles/*": {
-      "default": "./styles/*"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngxsmk-datepicker.d.ts",
-      "default": "./fesm2022/ngxsmk-datepicker.mjs"
-    }
-  }
-}
+{
+  "name": "ngxsmk-datepicker",
+  "version": "2.4.0",
+  "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",
+    "url": "https://www.sachindilshan.com/"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0 <24.0.0",
+    "@angular/core": ">=17.0.0 <24.0.0",
+    "@angular/forms": ">=17.0.0 <24.0.0",
+    "luxon": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zone.js": {
+      "optional": true
+    },
+    "@angular/material": {
+      "optional": true
+    },
+    "@angular/cdk": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "main": "fesm2022/ngxsmk-datepicker.mjs",
+  "module": "fesm2022/ngxsmk-datepicker.mjs",
+  "es2022": "fesm2022/ngxsmk-datepicker.mjs",
+  "types": "types/ngxsmk-datepicker.d.ts",
+  "typings": "types/ngxsmk-datepicker.d.ts",
+  "homepage": "https://github.com/NGXSMK/ngxsmk-datepicker#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NGXSMK/ngxsmk-datepicker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NGXSMK/ngxsmk-datepicker/issues"
+  },
+  "sideEffects": false,
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
+  "files": [
+    "schematics/**/*.js",
+    "schematics/**/*.json",
+    "fesm2022/**/*.mjs",
+    "**/*.d.ts",
+    "**/*.metadata.json",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "MIGRATION.md",
+    "docs/*.md",
+    "!docs/REFACTOR_PLAN.md",
+    "!docs/FEATURE_SCOPING.md",
+    "!docs/IONIC_TESTING.md",
+    "!docs/**/*.png",
+    "!docs/**/*.jpg",
+    "!docs/**/*.gif",
+    "styles/**/*.css"
+  ],
+  "keywords": [
+    "angular",
+    "datepicker",
+    "date-range-picker",
+    "calendar",
+    "standalone-component",
+    "reactive-forms",
+    "luxon",
+    "angular-17",
+    "angular-18",
+    "angular-19",
+    "angular-20",
+    "angular-21",
+    "angular-22",
+    "angular-23",
+    "typescript",
+    "date-selection",
+    "i18n",
+    "localization",
+    "ssr",
+    "angular-universal",
+    "zoneless",
+    "accessibility",
+    "a11y"
+  ],
+  "optimization": {
+    "treeShaking": true,
+    "sideEffects": false,
+    "usedExports": true
+  },
+  "engines": {
+    "node": ">=20.19.0 || >=22.12.0",
+    "npm": ">=10.0.0"
+  },
+  "prepublishOnly": "node ../../scripts/assert-lib-publish-artifacts.cjs",
+  "exports": {
+    "./styles/*": {
+      "default": "./styles/*"
+    }
+  }
+}

package/schematics/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "node16",
+    "moduleResolution": "node16",
+    "target": "es2020",
+    "lib": ["es2020"],
+    "outDir": "../../../dist/ngxsmk-datepicker/schematics",
+    "rootDir": ".",
+    "declaration": false,
+    "sourceMap": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "include": ["ng-add/index.ts"]
+}