![[Release] ngxsmk-datepicker v2.2.15: Native Shadow DOM & Web Components support! 🚀 (Lightweight, zero-dep datepicker/range-picker for Angular)](https://external-preview.redd.it/TXSWXP-j1As1CO5HWXMLq1d25HGrp1yOGFJ-SElV4j8.png?width=1080&crop=smart&auto=webp&s=6171c7d51b6f1d76b66c575142da87dd94692001)
[Release] ngxsmk-datepicker v2.2.15: Native Shadow DOM & Web Components support! 🚀 (Lightweight, zero-dep datepicker/range-picker for Angular)
Hey everyone!
We just shipped v2.2.15 of ngxsmk-datepicker—a lightweight, highly customizable, and touch-optimized date/range picker for Angular applications.
⭐ GitHub Repository (Give us a star!): https://github.com/NGXSMK/ngxsmk-datepicker
This release fixes a highly requested feature: Native Shadow DOM & Event Retargeting compatibility! 🧩
🔍 The Shadow DOM Challenge & The Solution
If you've ever tried building or consuming a datepicker inside custom web components, Angular Custom Elements, or shadow-encapsulated UI frameworks (like Ionic), you've probably faced the premature closure bug.
Because the browser retargets event bubbles that escape a shadow-root (rewriting the event target to point to the host element), standard .contains() checks fail. This leads to popovers and dropdowns instantly closing because the library assumes you clicked outside the calendar.
In v2.2.15, we've solved this beautifully:
- Upgraded containment checks to inspect
event.composedPath()across Shadow boundaries. - Designed a clean fallback to traditional
.contains()to maintain 100% backwards-compatibility with light DOM and older browsers. - Kept our strict budget focus—keeping cognitive complexity at a perfect 2 for clean, fast runtime evaluations.
- Synced all metadata headers across our 31+ markdown files and upgraded example integrations (like our Ionic test application).
⚡ Quick Features of ngxsmk-datepicker:
- 🎯 Zero External Dependencies: Super lightweight footprint.
- 📅 Range Mode: Supports continuous date-ranges, single dates, and multi-date selections.
- 🕒 Timezone Support: Full IANA timezone calculations built-in.
- ♿ A11y First: Native keyboard navigation, ARIA-roles compliance, and screen-reader friendliness.
- 🌍 Localizations: Easy custom localizations and multi-language translations.
- 🎨 Vanilla CSS styling: Easily themeable with rich CSS variables.
🚀 Get Started
Install the latest version in your project:
npm install ngxsmk-datepicker@2.2.15