ngxsmk-datepicker 2.2.13 → 2.2.15

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.13+ | **Last updated**: March 21, 2026
+**Version**: 2.2.15+ | **Last updated**: March 21, 2026
 
 ## Stable vs experimental
 

package/docs/COMPATIBILITY.md

@@ -1,6 +1,6 @@
 # Version Compatibility Matrix
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This document provides comprehensive compatibility information for `ngxsmk-datepicker` across different Angular versions, Zone.js configurations, and SSR/CSR setups.
 
@@ -250,6 +250,18 @@ export class MyComponent {
 }
 ```
 
+## 🧩 Shadow DOM & Web Components Compatibility
+
+`ngxsmk-datepicker` is fully compatible with **Shadow DOM encapsulation** (`ViewEncapsulation.ShadowDom`) and deployment as an **Angular Element (Custom Web Component)** inside other frameworks (React, Vue, etc.).
+
+### Composed Path Event Retargeting
+When components are loaded inside a Shadow root, the browser retargets event targets when they bubble outside of the Shadow boundary. Standard `.contains()` checks on the host node will fail when checking external interaction listeners (e.g. document close listeners).
+
+`ngxsmk-datepicker` natively handles this by tracking event composed paths:
+* Inspects `event.composedPath()` when available to accurately check event origins inside Shadow DOM trees.
+* Falls back to standard light DOM `.contains(target)` when composed paths are not supported by the environment.
+* Supported across both the primary Datepicker component and Custom Select dropdown components.
+
 ## 🔧 Feature Compatibility Matrix
 
 ### By Angular Version
@@ -258,6 +270,7 @@ export class MyComponent {
 |---------|------------|-----------|------------|------------|-------------|
 | **Standalone Component** | ✅ | ✅ | ✅ | ✅ | ✅ |
 | **Signals** | ✅ | ✅ | ✅ | ✅ | ✅ |
+| **Shadow DOM Support** | ✅ | ✅ | ✅ | ✅ | ✅ |
 | **Computed Signals** | ✅ | ✅ | ✅ | ✅ | ✅ |
 | **Effects** | ⚠️ Limited | ✅ | ✅ | ✅ | ✅ |
 | **Signal Forms** | ❌ | ❌ | ❌ | ❌ | ✅ |

package/docs/INTEGRATION.md

@@ -1,6 +1,6 @@
 # Integration Guides
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This document provides integration examples for using ngxsmk-datepicker with popular frameworks and libraries.
 

package/docs/IONIC_INTEGRATION.md

@@ -1,6 +1,6 @@
 # Ionic Framework Integration Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This guide provides step-by-step instructions for integrating ngxsmk-datepicker with Ionic Angular applications.
 

package/docs/IONIC_TESTING.md

@@ -1,6 +1,6 @@
 # Ionic Integration Testing Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This document provides comprehensive testing instructions for verifying ngxsmk-datepicker compatibility with Ionic Framework.
 

package/docs/LOCALE-GUIDE.md

@@ -1,6 +1,6 @@
 # Locale Packs & i18n Contributor Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 Guide for adding locale support and contributing translations to ngxsmk-datepicker.
 

package/docs/PLUGIN-ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # Plugin Architecture
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 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.
 

package/docs/SEO.md

@@ -1,6 +1,6 @@
 # SEO Optimization Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This document outlines the SEO optimizations implemented for ngxsmk-datepicker to improve search engine visibility and discoverability.
 

package/docs/SSR-EXAMPLE.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Example
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 Complete example demonstrating ngxsmk-datepicker with Angular Universal (SSR).
 

package/docs/THEME-TOKENS.md

@@ -1,6 +1,6 @@
 # Theme Tokens & CSS Custom Properties
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 Complete reference for all CSS custom properties (CSS variables) available in ngxsmk-datepicker.
 

package/docs/TIMEZONE.md

@@ -1,6 +1,6 @@
 # Timezone Support
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 ## Overview
 

package/docs/extension-points.md

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

package/docs/signal-forms.md

@@ -1,6 +1,6 @@
 # Signal Forms Integration
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 This guide covers using ngxsmk-datepicker with Angular 21+ Signal Forms API.
 

package/docs/signals.md

@@ -1,6 +1,6 @@
 # Signals Integration Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 ngxsmk-datepicker is fully compatible with Angular Signals, providing seamless integration with both traditional reactive forms and modern signal-based patterns.
 

package/docs/ssr.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR) Guide
 
-**Last updated:** May 6, 2026 - **Current stable:** v2.2.13
+**Last updated:** May 19, 2026 - **Current stable:** v2.2.15
 
 ngxsmk-datepicker is fully compatible with Angular Universal and server-side rendering. This guide covers SSR setup, best practices, and troubleshooting.
 

package/fesm2022/ngxsmk-datepicker.mjs

@@ -1012,26 +1012,41 @@ class CustomSelectComponent {
     }
     onDocumentClick(event) {
         if (this.isBrowser) {
-            const target = event.target;
-            if (target && !this.elementRef.nativeElement.contains(target)) {
-                this.isOpen = false;
+            if (event.composedPath && typeof event.composedPath === 'function') {
+                const path = event.composedPath();
+                if (!path.includes(this.elementRef.nativeElement)) {
+                    this.isOpen = false;
+                }
             }
-            // Logic removed: forcing closure when calendar is open prevented dropdown from opening
-        }
-    }
-    onDocumentTouchStart(event) {
-        // On mobile, close dropdown when calendar opens
-        if (this.isBrowser && this.isOpen) {
-            const calendarBackdrop = this.document.querySelector('.ngxsmk-backdrop');
-            if (calendarBackdrop) {
+            else {
                 const target = event.target;
-                // Only close if touch is outside the dropdown
                 if (target && !this.elementRef.nativeElement.contains(target)) {
                     this.isOpen = false;
                 }
             }
         }
     }
+    onDocumentTouchStart(event) {
+        // On mobile, close dropdown when calendar opens
+        if (!this.isBrowser || !this.isOpen)
+            return;
+        const calendarBackdrop = this.document.querySelector('.ngxsmk-backdrop');
+        if (!calendarBackdrop)
+            return;
+        if (event.composedPath && typeof event.composedPath === 'function') {
+            const path = event.composedPath();
+            if (!path.includes(this.elementRef.nativeElement)) {
+                this.isOpen = false;
+            }
+        }
+        else {
+            const target = event.target;
+            // Only close if touch is outside the dropdown
+            if (target && !this.elementRef.nativeElement.contains(target)) {
+                this.isOpen = false;
+            }
+        }
+    }
     get displayValue() {
         const selectedOption = this.options.find((opt) => opt.value === this.value);
         return selectedOption ? selectedOption.label : '';
@@ -8886,17 +8901,26 @@ class NgxsmkDatepickerComponent {
      * @param calendarMonth - The calendar month object
      * @returns Unique identifier combining year and month
      */
-    /**
-     * Checks if a DOM node is contained within this datepicker instance,
-     * including its input group and any portaled popover content.
-     *
-     * @param target - The node to check
-     * @returns True if the node is inside this datepicker's DOM tree
-     */
-    containsNode(target) {
-        if (!this.isBrowser || !target) {
-            return false;
+    containsNodeViaComposedPath(path) {
+        const nativeElement = this.elementRef?.nativeElement;
+        if (nativeElement && path.includes(nativeElement)) {
+            return true;
+        }
+        // Check portaled popover content if it exists
+        if (this._shouldAppendToBody && this.portalViewRef) {
+            if (this.portalViewRef.rootNodes.some((node) => path.includes(node))) {
+                return true;
+            }
+        }
+        // Check inline popover Container (secondary fallback)
+        if (this.popoverContainer?.nativeElement) {
+            if (path.includes(this.popoverContainer.nativeElement)) {
+                return true;
+            }
         }
+        return false;
+    }
+    containsNodeViaDOM(target) {
         const nativeElement = this.elementRef?.nativeElement;
         if (nativeElement && (nativeElement === target || nativeElement.contains(target))) {
             return true;
@@ -8914,14 +8938,31 @@ class NgxsmkDatepickerComponent {
         }
         return false;
     }
+    /**
+     * Checks if a DOM node is contained within this datepicker instance,
+     * including its input group and any portaled popover content.
+     *
+     * @param target - The node to check
+     * @returns True if the node is inside this datepicker's DOM tree
+     */
+    containsNode(target, event) {
+        if (!this.isBrowser || !target) {
+            return false;
+        }
+        // Support shadow DOM by checking composedPath if event is provided
+        if (event && typeof event.composedPath === 'function') {
+            return this.containsNodeViaComposedPath(event.composedPath());
+        }
+        return this.containsNodeViaDOM(target);
+    }
     /** Shared logic for closing calendar when user interacts outside (click or touch). */
-    tryCloseCalendarOnOutsideInteraction(target) {
-        if (this.containsNode(target))
+    tryCloseCalendarOnOutsideInteraction(target, event) {
+        if (this.containsNode(target, event))
             return;
         const isInsideOtherDatepicker = Array.from(NgxsmkDatepickerComponent._allInstances).some((instance) => {
             if (instance === this || instance.isInlineMode)
                 return false;
-            return instance.containsNode(target);
+            return instance.containsNode(target, event);
         });
         if (isInsideOtherDatepicker || !this.isCalendarOpen)
             return;
@@ -8945,7 +8986,7 @@ class NgxsmkDatepickerComponent {
         const target = event.target;
         if (!target)
             return;
-        this.tryCloseCalendarOnOutsideInteraction(target);
+        this.tryCloseCalendarOnOutsideInteraction(target, event);
     }
     onTouchStart(event) {
         if (this.disabled || this.isInlineMode) {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "ngxsmk-datepicker",
-  "version": "2.2.13",
+  "version": "2.2.15",
+  "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/"
@@ -59,15 +60,24 @@
     "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"
+    "localization",
+    "ssr",
+    "angular-universal",
+    "zoneless",
+    "accessibility",
+    "a11y"
   ],
   "optimization": {
     "treeShaking": true,

package/types/ngxsmk-datepicker.d.ts

@@ -1304,6 +1304,8 @@ declare class NgxsmkDatepickerComponent implements OnInit, OnChanges, OnDestroy,
      * @param calendarMonth - The calendar month object
      * @returns Unique identifier combining year and month
      */
+    private containsNodeViaComposedPath;
+    private containsNodeViaDOM;
     /**
      * Checks if a DOM node is contained within this datepicker instance,
      * including its input group and any portaled popover content.
@@ -1311,7 +1313,7 @@ declare class NgxsmkDatepickerComponent implements OnInit, OnChanges, OnDestroy,
      * @param target - The node to check
      * @returns True if the node is inside this datepicker's DOM tree
      */
-    containsNode(target: Node | null): boolean;
+    containsNode(target: Node | null, event?: UIEvent): boolean;
     /** Shared logic for closing calendar when user interacts outside (click or touch). */
     private tryCloseCalendarOnOutsideInteraction;
     onDocumentClick(event: MouseEvent | TouchEvent): void;