Skip to content

v2.4.0 — Comparison Ranges, Signal Migration, Input Masking, ng-add Schematic & Dead SCSS Removal

Choose a tag to compare

View all tags
@toozuuu toozuuu released this 11 Jul 17:19
· 30 commits to main since this release
2.4.0
9a88a42

v2.4.0

🚀 Features

  • Dual-Range Comparison — New [comparisonRange]="[start, end]" input highlights a secondary presentational range alongside the primary selection (analytics "this period vs previous" use case). Themeable via --datepicker-comparison-range-color CSS variable.
  • ng add ngxsmk-datepicker schematic — Installs the package, adds missing luxon peer dependency, and prints a getting-started snippet. Shipped under schematics/ and self-verified on every publish.
  • ISO Week Numbers — [showWeekNumbers] renders an ISO 8601 week-number column with customizable header label (e.g. "KW"). New exported util getISOWeekNumber.
  • Guided Input Masking — [inputMask] (requires allowTyping) slots typed digits into DD/MM/YY/YYYY/HH/mm/ss tokens and auto-inserts separators. A string sets an explicit pattern; true uses displayFormat.
  • Server-Driven Disabled Dates — [asyncDateFilter] is called with the visible month range on every navigation and disables resolved dates. Stale responses are discarded. New (asyncDateFilterLoading) and (asyncDateFilterError) outputs report request state.
  • Secondary Calendar Systems — [secondaryCalendar] annotates each day cell with its date in a second calendar (islamic, persian, hebrew, buddhist, japanese) rendered via Intl. New exported utils getSecondaryDayLabel and formatDateInCalendarSystem.
  • Per-Day Metadata Decorations — [dayMetadata] provider adds a label, indicator dot, extra CSS classes, and tooltip per day — booking-style calendars without custom templates. New exported types DayMetadata / DayMetadataProvider.
  • Header/Footer Action Slots — [calendarHeaderTemplate] renders custom content at the top of the popover; [calendarFooterTemplate] replaces the default Clear/Close footer (also renders in inline mode). Both receive { clear(), close() } in context.

🔄 Changed

  • Modern Reactivity (non-breaking) — Migrated all @Output()s to the output() function and an initial batch of read-only @Input()s to signal input(). Public template bindings ([x]="…" / (event)="…") are unchanged.
  • Signal-Backed Internal State — Converted transient state (isOpeningCalendar, naturalLanguagePreview, showNaturalLanguagePreview, validationErrorMessage, typedInputValue) to signals and made displayValue side-effect free, reducing manual markForCheck().

🐛 Fixed

  • Memory leak — multi-calendar lazy-loading observer: IntersectionObserver was stored in the timeout set and never disconnected. Now tracked separately and disconnected on destroy.
  • Memory leak — destroy with open popover: Destroying the component while the calendar was open leaked scroll/resize listeners and left the portal view attached to ApplicationRef. ngOnDestroy now tears both down.
  • Input mask zero-padding — With displayFormat set, typing a partial token was zero-padded (typing 1 became 10). Partial tokens are now left as typed and the caret stays at the end when separators are inserted.
  • ngOnDestroy state clearing — Used no-op ??= assignments; date references are now actually released.
  • TypeScript 6.0 build compatibility — Removed invalid baseUrl and importsNotUsedAsValues compiler options that broke production builds on the TS 6 toolchain.
  • Corrected three internal guards (autoApplyClose, timeRangeMode, allowSameDay) surfaced during signal migration.
  • Workspace root package.json is now private, preventing accidental npm publish of the workspace itself.

🗑️ Removed

  • Dead SCSS architecture (~7k lines) — Removed unreferenced, stale datepicker.scss + styles/{components,core,abstracts}/ partials, _legacy-datepicker.scss, and an orphaned datepicker.css.map. The maintained flat styles/datepicker.css is unaffected.

📦 Build & Tooling

  • New schematics/ directory with ng-add support
  • New smoke-test scripts for publish verification (smoke-test-ng-add.cjs, smoke-advanced-page.cjs)
  • Copy-schematics-assets build step
  • New test suites: action-slots, async-date-filter, day-metadata, input-mask, calendar-systems, comparison-range
  • Removed .github/workflows/release.yml (semantic-release npm workflow)
  • Updated all documentation and demo app to v2.4.0
Assets 2
Loading