ngxsmk-datepicker 2.3.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2489 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, ElementRef, AfterViewInit, OnDestroy, TemplateRef, InjectionToken, EffectRef, Signal, OnInit, OnChanges, SimpleChanges } from '@angular/core';
3
- import { ControlValueAccessor, NgControl } from '@angular/forms';
4
- import { Subject } from 'rxjs';
5
-
6
- declare function getStartOfDay(d: Date): Date;
7
- declare function getEndOfDay(d: Date): Date;
8
- declare function addMonths(d: Date, months: number): Date;
9
- declare function subtractDays(d: Date, days: number): Date;
10
- declare function getStartOfMonth(d: Date): Date;
11
- declare function getEndOfMonth(d: Date): Date;
12
- declare function isSameDay(d1: Date | null, d2: Date | null): boolean;
13
- declare function normalizeDate(date: DateInput | null): Date | null;
14
- type DateInput = Date | string | {
15
- toDate: () => Date;
16
- _isAMomentObject?: boolean;
17
- $d?: Date;
18
- };
19
-
20
- interface HolidayProvider {
21
- isHoliday(date: Date): boolean;
22
- getHolidayLabel?(date: Date): string | null;
23
- }
24
- interface DateRange {
25
- [key: string]: [DateInput, DateInput];
26
- }
27
- type DatepickerValue = Date | {
28
- start: Date | null;
29
- end: Date | null;
30
- } | Date[] | null;
31
- declare function generateMonthOptions(locale: string, year: number): {
32
- label: string;
33
- value: number;
34
- }[];
35
- /**
36
- * Format a number using locale-aware number formatting.
37
- * Uses Intl.NumberFormat for proper localization of numeric separators and decimals.
38
- *
39
- * @param value - The number to format
40
- * @param locale - The locale to use for formatting (e.g., 'en-US', 'de-DE', 'fr-FR')
41
- * @param options - Optional Intl.NumberFormatOptions for customization
42
- * @returns Formatted number string
43
- */
44
- declare function formatLocaleNumber(value: number, locale: string, options?: Intl.NumberFormatOptions): string;
45
- declare function generateYearOptions(currentYear: number, range?: number): {
46
- label: string;
47
- value: number;
48
- }[];
49
- declare function generateTimeOptions(minuteInterval?: number, secondInterval?: number, includeSeconds?: boolean, use24Hour?: boolean): {
50
- hourOptions: {
51
- label: string;
52
- value: number;
53
- }[];
54
- minuteOptions: {
55
- label: string;
56
- value: number;
57
- }[];
58
- secondOptions?: {
59
- label: string;
60
- value: number;
61
- }[];
62
- };
63
- declare function generateWeekDays(locale: string, firstDayOfWeek?: number): string[];
64
- declare function getFirstDayOfWeek(locale: string): number;
65
- declare function get24Hour(displayHour: number, isPm: boolean): number;
66
- declare function update12HourState(fullHour: number): {
67
- isPm: boolean;
68
- displayHour: number;
69
- };
70
- declare function processDateRanges(ranges: DateRange | null): {
71
- [key: string]: [Date, Date];
72
- } | null;
73
- declare function generateYearGrid(currentYear: number): number[];
74
- declare function generateDecadeGrid(currentDecade: number): number[];
75
-
76
- interface DatepickerClasses {
77
- wrapper?: string;
78
- inputGroup?: string;
79
- input?: string;
80
- clearBtn?: string;
81
- calendarBtn?: string;
82
- popover?: string;
83
- container?: string;
84
- calendar?: string;
85
- header?: string;
86
- navPrev?: string;
87
- navNext?: string;
88
- dayCell?: string;
89
- footer?: string;
90
- closeBtn?: string;
91
- }
92
-
93
- declare class NgxsmkDatepickerInputComponent {
94
- isNative: boolean;
95
- disabled: boolean;
96
- classes: DatepickerClasses | undefined;
97
- nativeInputType: string;
98
- formattedValue: string;
99
- placeholder: string;
100
- id: string;
101
- name: string;
102
- autocomplete: string;
103
- required: boolean;
104
- minDateNative: string | null;
105
- maxDateNative: string | null;
106
- ariaLabel: string;
107
- ariaDescribedBy: string;
108
- errorState: boolean;
109
- clearAriaLabel: string;
110
- clearLabel: string;
111
- isCalendarOpen: boolean;
112
- allowTyping: boolean;
113
- typedInputValue: string;
114
- displayValue: string;
115
- showCalendarButton: boolean;
116
- calendarAriaLabel: string;
117
- validationErrorMessage: string | null;
118
- nativeInputChange: EventEmitter<Event>;
119
- inputBlur: EventEmitter<FocusEvent>;
120
- clearValue: EventEmitter<MouseEvent>;
121
- toggleCalendar: EventEmitter<Event>;
122
- pointerDown: EventEmitter<PointerEvent>;
123
- pointerUp: EventEmitter<PointerEvent>;
124
- inputGroupFocus: EventEmitter<void>;
125
- inputKeyDown: EventEmitter<Event>;
126
- inputChange: EventEmitter<Event>;
127
- inputFocus: EventEmitter<FocusEvent>;
128
- nativeInput?: ElementRef<HTMLInputElement>;
129
- customInput?: ElementRef<HTMLInputElement>;
130
- focus(): void;
131
- onNativeInputChange(event: Event): void;
132
- onInputBlur(event: FocusEvent): void;
133
- onClearValue(event: MouseEvent): void;
134
- onToggleCalendar(event: Event): void;
135
- onPointerDown(event: PointerEvent): void;
136
- onPointerUp(event: PointerEvent): void;
137
- onInputGroupFocus(): void;
138
- onInputKeyDown(event: Event): void;
139
- onInputChange(event: Event): void;
140
- onInputFocus(event: FocusEvent): void;
141
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkDatepickerInputComponent, never>;
142
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkDatepickerInputComponent, "ngxsmk-datepicker-input", never, { "isNative": { "alias": "isNative"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "nativeInputType": { "alias": "nativeInputType"; "required": false; }; "formattedValue": { "alias": "formattedValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "required": { "alias": "required"; "required": false; }; "minDateNative": { "alias": "minDateNative"; "required": false; }; "maxDateNative": { "alias": "maxDateNative"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "errorState": { "alias": "errorState"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "isCalendarOpen": { "alias": "isCalendarOpen"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; }; "typedInputValue": { "alias": "typedInputValue"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "showCalendarButton": { "alias": "showCalendarButton"; "required": false; }; "calendarAriaLabel": { "alias": "calendarAriaLabel"; "required": false; }; "validationErrorMessage": { "alias": "validationErrorMessage"; "required": false; }; }, { "nativeInputChange": "nativeInputChange"; "inputBlur": "inputBlur"; "clearValue": "clearValue"; "toggleCalendar": "toggleCalendar"; "pointerDown": "pointerDown"; "pointerUp": "pointerUp"; "inputGroupFocus": "inputGroupFocus"; "inputKeyDown": "inputKeyDown"; "inputChange": "inputChange"; "inputFocus": "inputFocus"; }, never, never, true, never>;
143
- }
144
-
145
- declare class CustomSelectComponent implements AfterViewInit, OnDestroy {
146
- options: {
147
- label: string;
148
- value: unknown;
149
- disabled?: boolean;
150
- }[];
151
- value: unknown;
152
- disabled: boolean;
153
- valueChange: EventEmitter<unknown>;
154
- container: ElementRef<HTMLDivElement>;
155
- button: ElementRef<HTMLButtonElement>;
156
- panel: ElementRef<HTMLDivElement>;
157
- isOpen: boolean;
158
- private readonly elementRef;
159
- private readonly platformId;
160
- private readonly document;
161
- private readonly isBrowser;
162
- private resizeObserver;
163
- private scrollListener;
164
- ngAfterViewInit(): void;
165
- ngOnDestroy(): void;
166
- private setupResizeObserver;
167
- private setupScrollListener;
168
- private updatePanelPosition;
169
- onDocumentClick(event: MouseEvent | TouchEvent): void;
170
- onDocumentTouchStart(event: TouchEvent): void;
171
- get displayValue(): string;
172
- toggleDropdown(): void;
173
- private scrollToSelected;
174
- selectOption(option: {
175
- label: string;
176
- value: unknown;
177
- }): void;
178
- static ɵfac: i0.ɵɵFactoryDeclaration<CustomSelectComponent, never>;
179
- static ɵcmp: i0.ɵɵComponentDeclaration<CustomSelectComponent, "ngxsmk-custom-select", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
180
- }
181
-
182
- declare class CalendarHeaderComponent {
183
- monthSelect?: CustomSelectComponent;
184
- yearSelect?: CustomSelectComponent;
185
- monthOptions: {
186
- label: string;
187
- value: number;
188
- }[];
189
- yearOptions: {
190
- label: string;
191
- value: number;
192
- }[];
193
- currentMonth: number;
194
- currentYear: number;
195
- disabled: boolean;
196
- isBackArrowDisabled: boolean;
197
- prevMonthAriaLabel: string;
198
- nextMonthAriaLabel: string;
199
- headerClass?: string;
200
- navPrevClass?: string;
201
- navNextClass?: string;
202
- currentYearChange: EventEmitter<number>;
203
- currentMonthChange: EventEmitter<number>;
204
- previousMonth: EventEmitter<void>;
205
- nextMonth: EventEmitter<void>;
206
- onMonthSelect(value: unknown): void;
207
- onYearSelect(value: unknown): void;
208
- static ɵfac: i0.ɵɵFactoryDeclaration<CalendarHeaderComponent, never>;
209
- static ɵcmp: i0.ɵɵComponentDeclaration<CalendarHeaderComponent, "ngxsmk-calendar-header", never, { "monthOptions": { "alias": "monthOptions"; "required": false; }; "yearOptions": { "alias": "yearOptions"; "required": false; }; "currentMonth": { "alias": "currentMonth"; "required": false; }; "currentYear": { "alias": "currentYear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isBackArrowDisabled": { "alias": "isBackArrowDisabled"; "required": false; }; "prevMonthAriaLabel": { "alias": "prevMonthAriaLabel"; "required": false; }; "nextMonthAriaLabel": { "alias": "nextMonthAriaLabel"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "navPrevClass": { "alias": "navPrevClass"; "required": false; }; "navNextClass": { "alias": "navNextClass"; "required": false; }; }, { "currentYearChange": "currentYearChange"; "currentMonthChange": "currentMonthChange"; "previousMonth": "previousMonth"; "nextMonth": "nextMonth"; }, never, never, true, never>;
210
- }
211
-
212
- /**
213
- * Complete translations interface for the datepicker component
214
- */
215
- interface DatepickerTranslations {
216
- selectDate: string;
217
- selectTime: string;
218
- clear: string;
219
- close: string;
220
- today: string;
221
- selectEndDate: string;
222
- day: string;
223
- days: string;
224
- previousMonth: string;
225
- nextMonth: string;
226
- previousYear: string;
227
- nextYear: string;
228
- previousYears: string;
229
- nextYears: string;
230
- previousDecade: string;
231
- nextDecade: string;
232
- clearSelection: string;
233
- closeCalendar: string;
234
- closeCalendarOverlay: string;
235
- calendarFor: string;
236
- selectYear: string;
237
- selectDecade: string;
238
- datesSelected: string;
239
- timesSelected: string;
240
- time: string;
241
- startTime: string;
242
- endTime: string;
243
- from: string;
244
- to: string;
245
- holiday: string;
246
- month: string;
247
- year: string;
248
- decade: string;
249
- timeline: string;
250
- timeSlider: string;
251
- calendarOpened: string;
252
- calendarClosed: string;
253
- dateSelected: string;
254
- rangeSelected: string;
255
- monthChanged: string;
256
- yearChanged: string;
257
- calendarLoading: string;
258
- calendarReady: string;
259
- keyboardShortcuts: string;
260
- invalidDateFormat: string;
261
- dateBeforeMin: string;
262
- dateAfterMax: string;
263
- invalidDate: string;
264
- timezone?: string;
265
- }
266
- /**
267
- * Partial translations - allows overriding only specific keys
268
- */
269
- type PartialDatepickerTranslations = Partial<DatepickerTranslations>;
270
-
271
- declare class NgxsmkDatepickerContentComponent {
272
- isCalendarVisible: boolean;
273
- isCalendarOpen: boolean;
274
- isInlineMode: boolean;
275
- shouldAppendToBody: boolean;
276
- theme: string;
277
- popoverId: string;
278
- classes: DatepickerClasses | undefined;
279
- timeOnly: boolean;
280
- showTime: boolean;
281
- isMobile: boolean;
282
- mobileModalStyle: string;
283
- align: string;
284
- ariaLabel: string;
285
- isCalendarOpening: boolean;
286
- loadingMessage: string;
287
- showRanges: boolean;
288
- rangesArray: {
289
- key: string;
290
- value: [Date, Date];
291
- }[];
292
- mode: 'single' | 'range' | 'multiple' | 'week' | 'month' | 'quarter' | 'year' | 'timeRange';
293
- disabled: boolean;
294
- calendarCount: number;
295
- calendarLayout: string;
296
- syncScrollEnabled: boolean;
297
- calendarMonths: {
298
- month: number;
299
- year: number;
300
- days: (Date | null)[];
301
- }[];
302
- weekDays: string[];
303
- selectedDate: Date | null;
304
- startDate: Date | null;
305
- endDate: Date | null;
306
- focusedDate: Date | null;
307
- today: Date;
308
- dateTemplate: TemplateRef<unknown> | null;
309
- calendarViewMode: string;
310
- monthOptions: {
311
- label: string;
312
- value: number;
313
- }[];
314
- currentMonth: number;
315
- yearOptions: {
316
- label: string;
317
- value: number;
318
- }[];
319
- currentYear: number;
320
- isBackArrowDisabled: boolean;
321
- prevMonthAriaLabel: string;
322
- nextMonthAriaLabel: string;
323
- yearGrid: number[];
324
- currentDecade: number;
325
- decadeGrid: number[];
326
- timelineStartDate: Date | null;
327
- timelineEndDate: Date | null;
328
- timelineMonths: Date[];
329
- minuteInterval: number;
330
- startTimeSlider: number;
331
- endTimeSlider: number;
332
- timeRangeMode: boolean;
333
- hourOptions: {
334
- label: string;
335
- value: number;
336
- }[];
337
- minuteOptions: {
338
- label: string;
339
- value: number;
340
- }[];
341
- secondOptions: {
342
- label: string;
343
- value: number;
344
- }[];
345
- ampmOptions: {
346
- label: string;
347
- value: boolean;
348
- }[];
349
- currentDisplayHour: number;
350
- currentMinute: number;
351
- currentSecond: number;
352
- isPm: boolean;
353
- showSeconds: boolean;
354
- use24Hour: boolean;
355
- startDisplayHour: number;
356
- startMinute: number;
357
- startSecond: number;
358
- startIsPm: boolean;
359
- endDisplayHour: number;
360
- endMinute: number;
361
- endSecond: number;
362
- endIsPm: boolean;
363
- clearAriaLabel: string;
364
- clearLabel: string;
365
- closeAriaLabel: string;
366
- closeLabel: string;
367
- translations: DatepickerTranslations | null;
368
- selectedRange: [Date | null, Date | null] | null;
369
- showTimezoneSelector: boolean;
370
- timezoneOptions: {
371
- label: string;
372
- value: string;
373
- }[];
374
- currentTimezone: string;
375
- timezoneChange: EventEmitter<string>;
376
- boundIsDateDisabled: (date: Date | null) => boolean;
377
- boundIsSameDay: (date1: Date | null, date2: Date | null) => boolean;
378
- boundIsHoliday: (date: Date | null) => boolean;
379
- boundIsMultipleSelected: (date: Date | null) => boolean;
380
- boundIsInRange: (date: Date | null) => boolean;
381
- boundIsPreviewInRange: (date: Date | null) => boolean;
382
- boundGetAriaLabel: (date: Date | null) => string;
383
- boundGetDayCellCustomClasses: (date: Date | null) => string | string[] | Set<string> | {
384
- [klass: string]: unknown;
385
- };
386
- boundGetDayCellTooltip: (date: Date | null) => string | null;
387
- boundFormatDayNumber: (date: Date | null) => string;
388
- getMonthYearLabel: (month: number, year: number) => string;
389
- getCalendarAriaLabelForMonth: (month: number, year: number) => string;
390
- isTimelineMonthSelected: (date: Date) => boolean;
391
- formatTimeSliderValue: (value: number) => string;
392
- backdropClick: EventEmitter<Event>;
393
- touchStartContainer: EventEmitter<TouchEvent>;
394
- touchMoveContainer: EventEmitter<TouchEvent>;
395
- touchEndContainer: EventEmitter<TouchEvent>;
396
- rangeSelect: EventEmitter<[Date, Date]>;
397
- previousMonth: EventEmitter<void>;
398
- nextMonth: EventEmitter<void>;
399
- currentMonthChange: EventEmitter<number>;
400
- currentYearChange: EventEmitter<number>;
401
- dateClick: EventEmitter<Date>;
402
- dateHover: EventEmitter<Date | null>;
403
- dateFocus: EventEmitter<Date>;
404
- swipeStart: EventEmitter<TouchEvent>;
405
- swipeMove: EventEmitter<TouchEvent>;
406
- swipeEnd: EventEmitter<TouchEvent>;
407
- touchStart: EventEmitter<{
408
- event: TouchEvent;
409
- day: Date | null;
410
- }>;
411
- touchMove: EventEmitter<TouchEvent>;
412
- touchEnd: EventEmitter<{
413
- event: TouchEvent;
414
- day: Date | null;
415
- }>;
416
- viewModeChange: EventEmitter<"year" | "month" | "decade" | "timeline" | "time-slider">;
417
- changeYear: EventEmitter<number>;
418
- yearClick: EventEmitter<number>;
419
- changeDecade: EventEmitter<number>;
420
- decadeClick: EventEmitter<number>;
421
- timelineZoomOut: EventEmitter<void>;
422
- timelineZoomIn: EventEmitter<void>;
423
- timelineMonthClick: EventEmitter<Date>;
424
- startTimeSliderChange: EventEmitter<number>;
425
- endTimeSliderChange: EventEmitter<number>;
426
- currentDisplayHourChange: EventEmitter<number>;
427
- currentMinuteChange: EventEmitter<number>;
428
- currentSecondChange: EventEmitter<number>;
429
- isPmChange: EventEmitter<boolean>;
430
- timeChange: EventEmitter<void>;
431
- startDisplayHourChange: EventEmitter<number>;
432
- startMinuteChange: EventEmitter<number>;
433
- startSecondChange: EventEmitter<number>;
434
- startIsPmChange: EventEmitter<boolean>;
435
- endDisplayHourChange: EventEmitter<number>;
436
- endMinuteChange: EventEmitter<number>;
437
- endSecondChange: EventEmitter<number>;
438
- endIsPmChange: EventEmitter<boolean>;
439
- timeRangeChange: EventEmitter<void>;
440
- clearValue: EventEmitter<MouseEvent>;
441
- closeCalendar: EventEmitter<void>;
442
- escapeKey: EventEmitter<Event>;
443
- header?: CalendarHeaderComponent;
444
- popoverContainer?: ElementRef<HTMLElement>;
445
- timelineContainer?: ElementRef<HTMLElement>;
446
- closeAllSelects(): void;
447
- onTimelineMonthClick(month: Date, event: MouseEvent): void;
448
- onTimelineMonthSpace(month: Date, event: Event): void;
449
- onPopoverEscape(event: Event): void;
450
- onTimezoneChange(val: unknown): void;
451
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkDatepickerContentComponent, never>;
452
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkDatepickerContentComponent, "ngxsmk-datepicker-content", never, { "isCalendarVisible": { "alias": "isCalendarVisible"; "required": false; }; "isCalendarOpen": { "alias": "isCalendarOpen"; "required": false; }; "isInlineMode": { "alias": "isInlineMode"; "required": false; }; "shouldAppendToBody": { "alias": "shouldAppendToBody"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "popoverId": { "alias": "popoverId"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "timeOnly": { "alias": "timeOnly"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "mobileModalStyle": { "alias": "mobileModalStyle"; "required": false; }; "align": { "alias": "align"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "isCalendarOpening": { "alias": "isCalendarOpening"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "rangesArray": { "alias": "rangesArray"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "calendarCount": { "alias": "calendarCount"; "required": false; }; "calendarLayout": { "alias": "calendarLayout"; "required": false; }; "syncScrollEnabled": { "alias": "syncScrollEnabled"; "required": false; }; "calendarMonths": { "alias": "calendarMonths"; "required": false; }; "weekDays": { "alias": "weekDays"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "today": { "alias": "today"; "required": false; }; "dateTemplate": { "alias": "dateTemplate"; "required": false; }; "calendarViewMode": { "alias": "calendarViewMode"; "required": false; }; "monthOptions": { "alias": "monthOptions"; "required": false; }; "currentMonth": { "alias": "currentMonth"; "required": false; }; "yearOptions": { "alias": "yearOptions"; "required": false; }; "currentYear": { "alias": "currentYear"; "required": false; }; "isBackArrowDisabled": { "alias": "isBackArrowDisabled"; "required": false; }; "prevMonthAriaLabel": { "alias": "prevMonthAriaLabel"; "required": false; }; "nextMonthAriaLabel": { "alias": "nextMonthAriaLabel"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "currentDecade": { "alias": "currentDecade"; "required": false; }; "decadeGrid": { "alias": "decadeGrid"; "required": false; }; "timelineStartDate": { "alias": "timelineStartDate"; "required": false; }; "timelineEndDate": { "alias": "timelineEndDate"; "required": false; }; "timelineMonths": { "alias": "timelineMonths"; "required": false; }; "minuteInterval": { "alias": "minuteInterval"; "required": false; }; "startTimeSlider": { "alias": "startTimeSlider"; "required": false; }; "endTimeSlider": { "alias": "endTimeSlider"; "required": false; }; "timeRangeMode": { "alias": "timeRangeMode"; "required": false; }; "hourOptions": { "alias": "hourOptions"; "required": false; }; "minuteOptions": { "alias": "minuteOptions"; "required": false; }; "secondOptions": { "alias": "secondOptions"; "required": false; }; "ampmOptions": { "alias": "ampmOptions"; "required": false; }; "currentDisplayHour": { "alias": "currentDisplayHour"; "required": false; }; "currentMinute": { "alias": "currentMinute"; "required": false; }; "currentSecond": { "alias": "currentSecond"; "required": false; }; "isPm": { "alias": "isPm"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "use24Hour": { "alias": "use24Hour"; "required": false; }; "startDisplayHour": { "alias": "startDisplayHour"; "required": false; }; "startMinute": { "alias": "startMinute"; "required": false; }; "startSecond": { "alias": "startSecond"; "required": false; }; "startIsPm": { "alias": "startIsPm"; "required": false; }; "endDisplayHour": { "alias": "endDisplayHour"; "required": false; }; "endMinute": { "alias": "endMinute"; "required": false; }; "endSecond": { "alias": "endSecond"; "required": false; }; "endIsPm": { "alias": "endIsPm"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "translations": { "alias": "translations"; "required": false; }; "selectedRange": { "alias": "selectedRange"; "required": false; }; "showTimezoneSelector": { "alias": "showTimezoneSelector"; "required": false; }; "timezoneOptions": { "alias": "timezoneOptions"; "required": false; }; "currentTimezone": { "alias": "currentTimezone"; "required": false; }; "boundIsDateDisabled": { "alias": "boundIsDateDisabled"; "required": false; }; "boundIsSameDay": { "alias": "boundIsSameDay"; "required": false; }; "boundIsHoliday": { "alias": "boundIsHoliday"; "required": false; }; "boundIsMultipleSelected": { "alias": "boundIsMultipleSelected"; "required": false; }; "boundIsInRange": { "alias": "boundIsInRange"; "required": false; }; "boundIsPreviewInRange": { "alias": "boundIsPreviewInRange"; "required": false; }; "boundGetAriaLabel": { "alias": "boundGetAriaLabel"; "required": false; }; "boundGetDayCellCustomClasses": { "alias": "boundGetDayCellCustomClasses"; "required": false; }; "boundGetDayCellTooltip": { "alias": "boundGetDayCellTooltip"; "required": false; }; "boundFormatDayNumber": { "alias": "boundFormatDayNumber"; "required": false; }; "getMonthYearLabel": { "alias": "getMonthYearLabel"; "required": false; }; "getCalendarAriaLabelForMonth": { "alias": "getCalendarAriaLabelForMonth"; "required": false; }; "isTimelineMonthSelected": { "alias": "isTimelineMonthSelected"; "required": false; }; "formatTimeSliderValue": { "alias": "formatTimeSliderValue"; "required": false; }; }, { "timezoneChange": "timezoneChange"; "backdropClick": "backdropClick"; "touchStartContainer": "touchStartContainer"; "touchMoveContainer": "touchMoveContainer"; "touchEndContainer": "touchEndContainer"; "rangeSelect": "rangeSelect"; "previousMonth": "previousMonth"; "nextMonth": "nextMonth"; "currentMonthChange": "currentMonthChange"; "currentYearChange": "currentYearChange"; "dateClick": "dateClick"; "dateHover": "dateHover"; "dateFocus": "dateFocus"; "swipeStart": "swipeStart"; "swipeMove": "swipeMove"; "swipeEnd": "swipeEnd"; "touchStart": "touchStart"; "touchMove": "touchMove"; "touchEnd": "touchEnd"; "viewModeChange": "viewModeChange"; "changeYear": "changeYear"; "yearClick": "yearClick"; "changeDecade": "changeDecade"; "decadeClick": "decadeClick"; "timelineZoomOut": "timelineZoomOut"; "timelineZoomIn": "timelineZoomIn"; "timelineMonthClick": "timelineMonthClick"; "startTimeSliderChange": "startTimeSliderChange"; "endTimeSliderChange": "endTimeSliderChange"; "currentDisplayHourChange": "currentDisplayHourChange"; "currentMinuteChange": "currentMinuteChange"; "currentSecondChange": "currentSecondChange"; "isPmChange": "isPmChange"; "timeChange": "timeChange"; "startDisplayHourChange": "startDisplayHourChange"; "startMinuteChange": "startMinuteChange"; "startSecondChange": "startSecondChange"; "startIsPmChange": "startIsPmChange"; "endDisplayHourChange": "endDisplayHourChange"; "endMinuteChange": "endMinuteChange"; "endSecondChange": "endSecondChange"; "endIsPmChange": "endIsPmChange"; "timeRangeChange": "timeRangeChange"; "clearValue": "clearValue"; "closeCalendar": "closeCalendar"; "escapeKey": "escapeKey"; }, never, never, true, never>;
453
- }
454
-
455
- interface DayCellRenderHook {
456
- getDayCellClasses?(date: Date, isSelected: boolean, isDisabled: boolean, isToday: boolean, isHoliday: boolean): string[];
457
- getDayCellTooltip?(date: Date, holidayLabel: string | null): string | null;
458
- formatDayNumber?(date: Date): string;
459
- }
460
- interface ValidationHook {
461
- validateDate?(date: Date, currentValue: DatepickerValue, mode: 'single' | 'range' | 'multiple' | 'week' | 'month' | 'quarter' | 'year' | 'timeRange'): boolean;
462
- validateRange?(startDate: Date, endDate: Date): boolean;
463
- getValidationError?(date: Date): string | null;
464
- }
465
- interface KeyboardShortcutHook {
466
- handleShortcut?(event: KeyboardEvent, context: KeyboardShortcutContext): boolean;
467
- getShortcutHelp?(): KeyboardShortcutHelp[];
468
- }
469
- interface KeyboardShortcutContext {
470
- currentDate: Date;
471
- selectedDate: Date | null;
472
- startDate: Date | null;
473
- endDate: Date | null;
474
- selectedDates: Date[];
475
- mode: 'single' | 'range' | 'multiple' | 'week' | 'month' | 'quarter' | 'year' | 'timeRange';
476
- focusedDate: Date | null;
477
- isCalendarOpen: boolean;
478
- }
479
- interface KeyboardShortcutHelp {
480
- key: string;
481
- description: string;
482
- modifiers?: string[];
483
- }
484
- interface DateFormatHook {
485
- formatDisplayValue?(value: DatepickerValue, mode: 'single' | 'range' | 'multiple' | 'week' | 'month' | 'quarter' | 'year' | 'timeRange'): string;
486
- formatAriaLabel?(date: Date): string;
487
- }
488
- interface EventHook {
489
- beforeDateSelect?(date: Date, currentValue: DatepickerValue): boolean;
490
- afterDateSelect?(date: Date, newValue: DatepickerValue): void;
491
- onCalendarOpen?(): void;
492
- onCalendarClose?(): void;
493
- }
494
- interface DatepickerHooks extends DayCellRenderHook, ValidationHook, KeyboardShortcutHook, DateFormatHook, EventHook {
495
- }
496
-
497
- /**
498
- * Date Adapter Interface
499
- *
500
- * Allows consumers to swap formatting/parsing logic with external date libraries
501
- * like date-fns, dayjs, or Luxon.
502
- */
503
- interface DateAdapter {
504
- /**
505
- * Parse a date from a string or value
506
- * @param value - The value to parse (string, Date, or library-specific type)
507
- * @param onError - Optional callback for error handling. Called when parsing fails.
508
- * @returns A Date object or null if parsing fails
509
- */
510
- parse(value: string | Date | number | unknown, onError?: (error: Error) => void): Date | null;
511
- /**
512
- * Format a date to a string
513
- * @param date - The date to format
514
- * @param format - Format string (library-specific)
515
- * @param locale - Locale string (e.g., 'en-US')
516
- * @returns Formatted date string
517
- */
518
- format(date: Date, format?: string, locale?: string): string;
519
- /**
520
- * Check if a value is a valid date
521
- * @param value - The value to check
522
- * @returns True if the value is a valid date
523
- */
524
- isValid(value: string | Date | number | unknown): boolean;
525
- /**
526
- * Get the start of day for a date
527
- * @param date - The date
528
- * @returns Date at start of day
529
- */
530
- startOfDay(date: Date): Date;
531
- /**
532
- * Get the end of day for a date
533
- * @param date - The date
534
- * @returns Date at end of day
535
- */
536
- endOfDay(date: Date): Date;
537
- /**
538
- * Add months to a date
539
- * @param date - The date
540
- * @param months - Number of months to add
541
- * @returns New date with months added
542
- */
543
- addMonths(date: Date, months: number): Date;
544
- /**
545
- * Add days to a date
546
- * @param date - The date
547
- * @param days - Number of days to add
548
- * @returns New date with days added
549
- */
550
- addDays(date: Date, days: number): Date;
551
- /**
552
- * Check if two dates are the same day
553
- * @param date1 - First date
554
- * @param date2 - Second date
555
- * @returns True if dates are the same day
556
- */
557
- isSameDay(date1: Date | null, date2: Date | null): boolean;
558
- }
559
- /**
560
- * Default Date Adapter using native JavaScript Date
561
- */
562
- declare class NativeDateAdapter implements DateAdapter {
563
- parse(value: string | Date | number | unknown, onError?: (error: Error) => void): Date | null;
564
- format(date: Date, _format?: string, locale?: string): string;
565
- isValid(value: string | Date | number | unknown): boolean;
566
- startOfDay(date: Date): Date;
567
- endOfDay(date: Date): Date;
568
- addMonths(date: Date, months: number): Date;
569
- addDays(date: Date, days: number): Date;
570
- isSameDay(date1: Date | null, date2: Date | null): boolean;
571
- }
572
-
573
- interface DatepickerConfig {
574
- weekStart?: number | null;
575
- minuteInterval?: number;
576
- holidayProvider?: HolidayProvider | null;
577
- yearRange?: number;
578
- locale?: string;
579
- timezone?: string;
580
- minDate?: Date | string | null;
581
- maxDate?: Date | string | null;
582
- dateAdapter?: DateAdapter;
583
- animations?: AnimationConfig;
584
- autoDetectMobile?: boolean;
585
- mobileModalStyle?: 'bottom-sheet' | 'center' | 'fullscreen';
586
- }
587
- interface AnimationConfig {
588
- enabled?: boolean;
589
- duration?: number;
590
- easing?: string;
591
- property?: string;
592
- respectReducedMotion?: boolean;
593
- }
594
- declare const DEFAULT_ANIMATION_CONFIG: Required<AnimationConfig>;
595
- declare const DATEPICKER_CONFIG: InjectionToken<DatepickerConfig>;
596
- declare const DEFAULT_DATEPICKER_CONFIG: DatepickerConfig;
597
- declare function provideDatepickerConfig(config: DatepickerConfig): {
598
- provide: InjectionToken<DatepickerConfig>;
599
- useValue: {
600
- weekStart?: number | null;
601
- minuteInterval?: number;
602
- holidayProvider?: HolidayProvider | null;
603
- yearRange?: number;
604
- locale?: string;
605
- timezone?: string;
606
- minDate?: Date | string | null;
607
- maxDate?: Date | string | null;
608
- dateAdapter?: DateAdapter;
609
- animations?: AnimationConfig;
610
- autoDetectMobile?: boolean;
611
- mobileModalStyle?: "bottom-sheet" | "center" | "fullscreen";
612
- };
613
- };
614
-
615
- interface ValidationError {
616
- kind: string;
617
- message?: string;
618
- }
619
- type SignalFormFieldConfig = {
620
- value?: DatepickerValue | string | (() => DatepickerValue | string) | {
621
- (): DatepickerValue | string;
622
- } | Signal<DatepickerValue | string>;
623
- disabled?: boolean | (() => boolean) | {
624
- (): boolean;
625
- } | Signal<boolean>;
626
- required?: boolean | (() => boolean) | {
627
- (): boolean;
628
- } | Signal<boolean>;
629
- errors?: ValidationError[] | (() => ValidationError[]) | {
630
- (): ValidationError[];
631
- } | Signal<ValidationError[]>;
632
- valid?: boolean | (() => boolean) | {
633
- (): boolean;
634
- } | Signal<boolean>;
635
- invalid?: boolean | (() => boolean) | {
636
- (): boolean;
637
- } | Signal<boolean>;
638
- touched?: boolean | (() => boolean) | {
639
- (): boolean;
640
- } | Signal<boolean>;
641
- setValue?: (value: DatepickerValue | string) => void;
642
- updateValue?: (updater: () => DatepickerValue | string) => void;
643
- markAsDirty?: () => void;
644
- markAsTouched?: () => void;
645
- };
646
- type SignalFormField = unknown;
647
- interface FieldSyncCallbacks {
648
- onValueChanged: (value: DatepickerValue) => void;
649
- onDisabledChanged: (disabled: boolean) => void;
650
- onRequiredChanged?: (required: boolean) => void;
651
- onErrorStateChanged?: (hasError: boolean) => void;
652
- onSyncError: (error: unknown) => void;
653
- normalizeValue: (value: unknown) => DatepickerValue;
654
- isValueEqual: (val1: DatepickerValue, val2: DatepickerValue) => boolean;
655
- onCalendarGenerated?: () => void;
656
- onStateChanged?: () => void;
657
- }
658
- declare class FieldSyncService {
659
- private _fieldEffectRef;
660
- private _lastKnownFieldValue;
661
- private _isUpdatingFromInternal;
662
- private readonly injector;
663
- private readFieldValue;
664
- private readDisabledState;
665
- private readFieldErrors;
666
- private readRequiredState;
667
- private hasValidationErrors;
668
- private resolveField;
669
- setupFieldSync(fieldInput: SignalFormField, callbacks: FieldSyncCallbacks): EffectRef | null;
670
- syncFieldValue(fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown, callbacks: FieldSyncCallbacks): boolean;
671
- updateFieldFromInternal(value: DatepickerValue, fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown): void;
672
- getLastKnownValue(): DatepickerValue | undefined;
673
- markAsTouched(fieldInput: SignalFormField | Signal<SignalFormField> | (() => unknown) | unknown): void;
674
- cleanup(): void;
675
- static ɵfac: i0.ɵɵFactoryDeclaration<FieldSyncService, never>;
676
- static ɵprov: i0.ɵɵInjectableDeclaration<FieldSyncService>;
677
- }
678
-
679
- interface TranslationService {
680
- translate(key: string, params?: Record<string, string | number>): string;
681
- getCurrentLocale(): string;
682
- }
683
- declare class DefaultTranslationService implements TranslationService {
684
- private translations;
685
- private locale;
686
- private readonly translationRegistry;
687
- constructor();
688
- initialize(translations: DatepickerTranslations, locale?: string): void;
689
- initializeFromLocale(locale: string): void;
690
- translate(key: string, params?: Record<string, string | number>): string;
691
- getCurrentLocale(): string;
692
- static ɵfac: i0.ɵɵFactoryDeclaration<DefaultTranslationService, never>;
693
- static ɵprov: i0.ɵɵInjectableDeclaration<DefaultTranslationService>;
694
- }
695
-
696
- interface TouchGestureState {
697
- touchStartTime: number;
698
- touchStartElement: EventTarget | null;
699
- dateCellTouchStartTime: number;
700
- dateCellTouchStartDate: Date | null;
701
- dateCellTouchStartX: number;
702
- dateCellTouchStartY: number;
703
- isDateCellTouching: boolean;
704
- lastDateCellTouchDate: Date | null;
705
- dateCellTouchHandled: boolean;
706
- calendarSwipeStartX: number;
707
- calendarSwipeStartY: number;
708
- calendarSwipeStartTime: number;
709
- isCalendarSwiping: boolean;
710
- hoveredDate: Date | null;
711
- }
712
-
713
- /** Recurring date pattern configuration for disabled dates. */
714
- type RecurringPatternInput = {
715
- pattern: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'weekdays' | 'weekends';
716
- startDate: Date;
717
- endDate?: Date;
718
- dayOfWeek?: number;
719
- dayOfMonth?: number;
720
- interval?: number;
721
- } | null;
722
- /**
723
- * Interface for Angular Material Form Field Control compatibility.
724
- * We define it here to avoid a direct dependency on @angular/material.
725
- */
726
- interface MatFormFieldControlMock<T> {
727
- value: T | null;
728
- stateChanges: Subject<void>;
729
- id: string;
730
- placeholder: string;
731
- ngControl: NgControl | null;
732
- focused: boolean;
733
- empty: boolean;
734
- shouldLabelFloat: boolean;
735
- required: boolean;
736
- disabled: boolean;
737
- errorState: boolean;
738
- controlType?: string;
739
- autofilled?: boolean;
740
- userAriaDescribedBy?: string;
741
- setDescribedByIds(ids: string[]): void;
742
- onContainerClick(event: MouseEvent): void;
743
- }
744
- declare class NgxsmkDatepickerComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor, MatFormFieldControlMock<DatepickerValue> {
745
- private static _idCounter;
746
- private static readonly _allInstances;
747
- private static _materialSupportRegistered;
748
- private static _patchMetadataArrays;
749
- static withMaterialSupport(matFormFieldControlToken: any, targetCmp?: any): void;
750
- _uniqueId: string;
751
- mode: 'single' | 'range' | 'multiple' | 'week' | 'month' | 'quarter' | 'year' | 'timeRange';
752
- calendarViewMode: 'month' | 'year' | 'decade' | 'timeline' | 'time-slider';
753
- isInvalidDate: (date: Date) => boolean;
754
- showRanges: boolean;
755
- showTime: boolean;
756
- timeOnly: boolean;
757
- timeRangeMode: boolean;
758
- showCalendarButton: boolean;
759
- minuteInterval: number;
760
- use24Hour: boolean;
761
- secondInterval: number;
762
- showSeconds: boolean;
763
- holidayProvider: HolidayProvider | null;
764
- disableHolidays: boolean;
765
- disabledDates: (string | Date)[];
766
- disabledRanges: Array<{
767
- start: Date | string;
768
- end: Date | string;
769
- }>;
770
- recurringPattern?: RecurringPatternInput;
771
- dateTemplate: TemplateRef<unknown> | null;
772
- private _placeholder;
773
- set placeholder(value: string | null);
774
- get placeholder(): string;
775
- inline: boolean | 'always' | 'auto';
776
- private _inputId;
777
- set inputId(value: string);
778
- get inputId(): string;
779
- private _name;
780
- set name(value: string);
781
- get name(): string;
782
- private _autocomplete;
783
- set autocomplete(value: string);
784
- get autocomplete(): string;
785
- translations?: PartialDatepickerTranslations;
786
- translationService?: TranslationService;
787
- clearLabel: string;
788
- closeLabel: string;
789
- prevMonthAriaLabel: string;
790
- nextMonthAriaLabel: string;
791
- clearAriaLabel: string;
792
- closeAriaLabel: string;
793
- get _clearLabel(): string;
794
- get _closeLabel(): string;
795
- get _prevMonthAriaLabel(): string;
796
- get _nextMonthAriaLabel(): string;
797
- get _clearAriaLabel(): string;
798
- get _closeAriaLabel(): string;
799
- weekStart: number | null;
800
- private readonly _yearRange;
801
- set yearRange(value: number);
802
- get yearRange(): number;
803
- timezone?: string;
804
- hooks: DatepickerHooks | null;
805
- enableKeyboardShortcuts: boolean;
806
- customShortcuts: {
807
- [key: string]: (context: KeyboardShortcutContext) => boolean;
808
- } | null;
809
- autoApplyClose: boolean;
810
- /**
811
- * Range mode only: allow a one-day range by clicking the same date twice, or by closing the popover
812
- * with only a start date selected (start and end will both be that day).
813
- */
814
- allowSameDay: boolean;
815
- displayFormat?: string;
816
- allowTyping: boolean;
817
- enableNaturalLanguage: boolean;
818
- naturalLanguagePreviewTemplate?: TemplateRef<unknown>;
819
- naturalLanguageResolved: EventEmitter<Date | {
820
- start: Date;
821
- end: Date;
822
- }>;
823
- set calendars(value: number);
824
- get calendars(): number;
825
- rangePresetFactory?: (today: Date) => {
826
- id: string;
827
- name: string;
828
- calculate: (today: Date) => {
829
- start: Date;
830
- end: Date;
831
- };
832
- }[];
833
- invalidRange: EventEmitter<{
834
- start: Date;
835
- end: Date;
836
- disabledDatesInside: Date[];
837
- }>;
838
- showTimezoneSelector: boolean;
839
- defaultTimezone: string;
840
- timezoneChange: EventEmitter<string>;
841
- timezoneOptions: {
842
- label: string;
843
- value: string;
844
- }[];
845
- getTimezoneOptions(): {
846
- label: string;
847
- value: string;
848
- }[];
849
- private _calendarCount;
850
- set calendarCount(value: number);
851
- get calendarCount(): number;
852
- calendarLayout: 'horizontal' | 'vertical' | 'auto';
853
- defaultMonthOffset: number;
854
- /**
855
- * Configuration for synchronous scrolling in multi-calendar mode.
856
- * Keeps calendars in sync by enforcing consistent month offsets across visible calendars.
857
- *
858
- * @example
859
- * ```typescript
860
- * // Keep calendars exactly 1 month apart
861
- * <ngxsmk-datepicker
862
- * [calendarCount]="2"
863
- * [syncScroll]="{ enabled: true, monthGap: 1 }">
864
- * </ngxsmk-datepicker>
865
- *
866
- * // Disable sync scroll (independent navigation)
867
- * <ngxsmk-datepicker
868
- * [calendarCount]="3"
869
- * [syncScroll]="{ enabled: false }">
870
- * </ngxsmk-datepicker>
871
- * ```
872
- */
873
- syncScroll: {
874
- enabled?: boolean;
875
- monthGap?: number;
876
- };
877
- align: 'left' | 'right' | 'center';
878
- useNativePicker: boolean;
879
- enableHapticFeedback: boolean;
880
- mobileModalStyle: 'bottom-sheet' | 'center' | 'fullscreen';
881
- mobileTimePickerStyle: 'wheel' | 'slider' | 'native';
882
- enablePullToRefresh: boolean;
883
- mobileTheme: 'compact' | 'comfortable' | 'spacious';
884
- enableVoiceInput: boolean;
885
- autoDetectMobile: boolean;
886
- disableFocusTrap: boolean;
887
- appendToBody: boolean;
888
- private readonly appRef;
889
- private readonly document;
890
- portalTemplate: TemplateRef<unknown>;
891
- private portalViewRef;
892
- get _shouldAppendToBody(): boolean;
893
- /**
894
- * Detects if the datepicker is rendered inside a modal/dialog so the calendar
895
- * can be appended to body and positioned above the modal.
896
- */
897
- private isInsideModal;
898
- protected readonly _isCalendarOpen: i0.WritableSignal<boolean>;
899
- get isCalendarOpen(): boolean;
900
- set isCalendarOpen(value: boolean);
901
- private isOpeningCalendar;
902
- /** Public getter for template: true while calendar is opening/generating (loading state). */
903
- get isCalendarOpening(): boolean;
904
- /** Returns translated "Loading calendar..." for template and ARIA. */
905
- getCalendarLoadingMessage(): string;
906
- private openCalendarTimeoutId;
907
- private lastToggleTime;
908
- private touchStartTime;
909
- private touchStartElement;
910
- private pointerDownTime;
911
- private isPointerEvent;
912
- private previousFocusElement;
913
- private _value;
914
- set value(val: DatepickerValue);
915
- get value(): DatepickerValue;
916
- private _field;
917
- private _fieldEffectRef;
918
- set field(field: SignalFormField);
919
- get field(): SignalFormField;
920
- private syncFieldValue;
921
- private _startAtDate;
922
- set startAt(value: DateInput | null);
923
- private _locale;
924
- set locale(value: string);
925
- get locale(): string;
926
- theme: 'light' | 'dark';
927
- get isDarkMode(): boolean;
928
- private _dateFormatPattern;
929
- private customDateFormatService;
930
- set dateFormatPattern(value: string | null);
931
- get dateFormatPattern(): string | null;
932
- private _animationConfig;
933
- /**
934
- * Animation configuration allowing customization of animation duration, easing, and reduction.
935
- * Supports prefers-reduced-motion accessibility preference automatically.
936
- *
937
- * @example
938
- * ```typescript
939
- * // Disable all animations
940
- * <ngxsmk-datepicker [animationConfig]="{ enabled: false }"></ngxsmk-datepicker>
941
- *
942
- * // Custom animation duration and easing
943
- * <ngxsmk-datepicker [animationConfig]="{ duration: 300, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }"></ngxsmk-datepicker>
944
- *
945
- * // Disable specific animation properties
946
- * <ngxsmk-datepicker [animationConfig]="{ property: 'opacity' }"></ngxsmk-datepicker>
947
- * ```
948
- */
949
- set animationConfig(value: AnimationConfig | null);
950
- get animationConfig(): AnimationConfig | null;
951
- private _rtl;
952
- set rtl(value: boolean | null);
953
- get rtl(): boolean | null;
954
- get isRtl(): boolean;
955
- get rtlClass(): boolean;
956
- classes?: DatepickerClasses | undefined;
957
- private onChange;
958
- private onTouched;
959
- disabled: boolean;
960
- set disabledState(isDisabled: boolean);
961
- /**
962
- * Subject used for Material Form Field integration.
963
- * Emits when the component's state changes (disabled, required, error state, etc.)
964
- *
965
- * @remarks
966
- * This Subject is required for Angular Material's form field control interface.
967
- * It allows Material form fields to track state changes and update their appearance
968
- * accordingly (e.g., showing error states, floating labels, etc.).
969
- *
970
- * The Subject is properly cleaned up in ngOnDestroy() to prevent memory leaks.
971
- * It's marked as readonly to prevent external code from reassigning it.
972
- */
973
- readonly stateChanges: Subject<void>;
974
- private _focused;
975
- private _required;
976
- private _errorState;
977
- get focused(): boolean;
978
- get empty(): boolean;
979
- get shouldLabelFloat(): boolean;
980
- get required(): boolean;
981
- set required(value: boolean);
982
- get errorState(): boolean;
983
- set errorState(value: boolean);
984
- get controlType(): string;
985
- get autofilled(): boolean;
986
- get id(): string;
987
- get describedBy(): string;
988
- /**
989
- * Aria describedby ID provided by the user or the parent form field.
990
- * Required for Angular Material form field control interface.
991
- */
992
- userAriaDescribedBy: string;
993
- setDescribedByIds(ids: string[]): void;
994
- onContainerClick(_event: MouseEvent): void;
995
- valueChange: EventEmitter<DatepickerValue>;
996
- action: EventEmitter<{
997
- type: string;
998
- payload?: unknown;
999
- }>;
1000
- /** Emitted when validation fails (e.g. invalid typed date, date before min, after max). Message is translated. */
1001
- validationError: EventEmitter<{
1002
- code: string;
1003
- message: string;
1004
- }>;
1005
- private _validationErrorMessage;
1006
- /** User-facing validation error message when set (e.g. from typed input or min/max). */
1007
- get validationErrorMessage(): string | null;
1008
- private setValidationError;
1009
- private clearValidationError;
1010
- private _minDate;
1011
- set minDate(value: DateInput | null);
1012
- get minDate(): DateInput | null;
1013
- private _maxDate;
1014
- set maxDate(value: DateInput | null);
1015
- get maxDate(): DateInput | null;
1016
- private _ranges;
1017
- set ranges(value: DateRange | null);
1018
- currentDate: Date;
1019
- daysInMonth: (Date | null)[];
1020
- multiCalendarMonths: Array<{
1021
- month: number;
1022
- year: number;
1023
- days: (Date | null)[];
1024
- }>;
1025
- /**
1026
- * LRU (Least Recently Used) cache for calendar month generation.
1027
- * Caches generated month arrays to avoid recalculating the same months.
1028
- *
1029
- * @remarks
1030
- * Performance characteristics:
1031
- * - Calendar generation: O(1) per month when cached
1032
- * - Cache lookup: O(1) average case
1033
- * - Cache eviction: O(n) where n = cache size (only when cache is full)
1034
- *
1035
- * The cache automatically evicts the least recently used entry when it reaches
1036
- * MAX_CACHE_SIZE to prevent unbounded memory growth. This is especially important
1037
- * for applications with many datepicker instances or long-running sessions.
1038
- */
1039
- /**
1040
- * Maximum number of months to cache before evicting LRU entries.
1041
- * Now managed by CalendarGenerationService.
1042
- */
1043
- weekDays: string[];
1044
- today: Date;
1045
- selectedDate: Date | null;
1046
- selectedDates: Date[];
1047
- startDate: Date | null;
1048
- endDate: Date | null;
1049
- hoveredDate: Date | null;
1050
- rangesArray: {
1051
- key: string;
1052
- value: [Date, Date];
1053
- }[];
1054
- protected touchState: TouchGestureState;
1055
- private dateCellTouchHandledTime;
1056
- private touchHandledTimeout;
1057
- private readonly activeTimeouts;
1058
- private readonly activeAnimationFrames;
1059
- private fieldSyncTimeoutId;
1060
- private readonly touchListenersSetup;
1061
- private readonly touchListenersAttached;
1062
- private bottomSheetSwipeStartY;
1063
- private bottomSheetSwipeCurrentY;
1064
- private isBottomSheetSwiping;
1065
- private readonly bottomSheetSwipeThreshold;
1066
- private readonly SWIPE_THRESHOLD;
1067
- private readonly SWIPE_TIME_THRESHOLD;
1068
- private _currentMonth;
1069
- _currentYear: number;
1070
- _currentDecade: number;
1071
- monthOptions: i0.Signal<{
1072
- disabled: boolean;
1073
- label: string;
1074
- value: number;
1075
- }[]>;
1076
- yearOptions: i0.Signal<{
1077
- disabled: boolean;
1078
- label: string;
1079
- value: number;
1080
- }[]>;
1081
- decadeOptions: {
1082
- label: string;
1083
- value: number;
1084
- }[];
1085
- yearGrid: number[];
1086
- hourOptions: {
1087
- label: string;
1088
- value: number;
1089
- }[];
1090
- minuteOptions: {
1091
- label: string;
1092
- value: number;
1093
- }[];
1094
- secondOptions: {
1095
- label: string;
1096
- value: number;
1097
- }[];
1098
- decadeGrid: number[];
1099
- private firstDayOfWeek;
1100
- currentHour: number;
1101
- currentMinute: number;
1102
- currentSecond: number;
1103
- currentDisplayHour: number;
1104
- isPm: boolean;
1105
- startHour: number;
1106
- startMinute: number;
1107
- startSecond: number;
1108
- startDisplayHour: number;
1109
- startIsPm: boolean;
1110
- endHour: number;
1111
- endMinute: number;
1112
- endSecond: number;
1113
- endDisplayHour: number;
1114
- endIsPm: boolean;
1115
- ampmOptions: {
1116
- label: string;
1117
- value: boolean;
1118
- }[];
1119
- timelineMonths: Date[];
1120
- timelineStartDate: Date;
1121
- timelineEndDate: Date;
1122
- private timelineZoomLevel;
1123
- startTimeSlider: number;
1124
- endTimeSlider: number;
1125
- private readonly elementRef;
1126
- private readonly cdr;
1127
- private readonly platformId;
1128
- private readonly globalConfig;
1129
- private readonly fieldSyncService;
1130
- private readonly localeRegistry;
1131
- private readonly translationRegistry;
1132
- private readonly focusTrapService;
1133
- private readonly ariaLiveService;
1134
- private readonly hapticFeedbackService;
1135
- private readonly calendarGenerationService;
1136
- private readonly parsingService;
1137
- private readonly touchService;
1138
- private readonly popoverPositioningService;
1139
- private readonly naturalLanguageParserService;
1140
- readonly ngControl: NgControl | null;
1141
- private readonly isBrowser;
1142
- private readonly dateComparator;
1143
- naturalLanguagePreview: string | null;
1144
- showNaturalLanguagePreview: boolean;
1145
- constructor();
1146
- typedInputValue: string;
1147
- private isTyping;
1148
- popoverContainer?: ElementRef<HTMLElement>;
1149
- readonly popoverId: string;
1150
- datepickerInput?: NgxsmkDatepickerInputComponent;
1151
- datepickerContent?: NgxsmkDatepickerContentComponent;
1152
- private focusTrapCleanup;
1153
- _translations: DatepickerTranslations | null;
1154
- private _translationService;
1155
- private _changeDetectionScheduled;
1156
- /**
1157
- * Schedules change detection to run in the next microtask.
1158
- * Prevents multiple change detection cycles from being scheduled simultaneously.
1159
- *
1160
- * @remarks
1161
- * This method is essential for zoneless compatibility. When Zone.js is not present,
1162
- * Angular's automatic change detection doesn't run, so components using OnPush
1163
- * strategy must manually trigger change detection when state changes.
1164
- *
1165
- * The debouncing mechanism prevents excessive change detection cycles when multiple
1166
- * state changes occur in rapid succession (e.g., during user interactions or async
1167
- * operations). Only one change detection cycle is scheduled per microtask queue.
1168
- *
1169
- * This pattern is compatible with both Zone.js and zoneless Angular applications.
1170
- */
1171
- private scheduleChangeDetection;
1172
- /**
1173
- * Creates a tracked setTimeout that is automatically cleaned up on component destroy.
1174
- * All timeouts created through this method are stored in activeTimeouts for proper cleanup.
1175
- *
1176
- * @param callback - Function to execute after delay
1177
- * @param delay - Delay in milliseconds
1178
- * @returns Timeout ID that can be used with clearTimeout
1179
- */
1180
- private trackedSetTimeout;
1181
- /**
1182
- * Creates a tracked requestAnimationFrame that is automatically cancelled on component destroy.
1183
- * All animation frames created through this method are stored in activeAnimationFrames for proper cleanup.
1184
- *
1185
- * @param callback - Function to execute on next animation frame
1186
- * @returns Animation frame ID that can be used with cancelAnimationFrame
1187
- */
1188
- private trackedRequestAnimationFrame;
1189
- /**
1190
- * Executes a callback after two animation frames, ensuring DOM updates are complete.
1191
- * Useful for operations that need to run after Angular's change detection and browser rendering.
1192
- *
1193
- * @param callback - Function to execute after double animation frame
1194
- */
1195
- private trackedDoubleRequestAnimationFrame;
1196
- /**
1197
- * Clears all active timeouts. Used when locale or weekStart changes
1198
- * to cancel any pending operations that might be invalidated by the change.
1199
- */
1200
- private clearActiveTimeouts;
1201
- /**
1202
- * Debounces field synchronization to prevent race conditions from rapid updates.
1203
- * Cancels any pending sync operation before scheduling a new one.
1204
- *
1205
- * @param delay - Debounce delay in milliseconds (default: 100ms)
1206
- */
1207
- private debouncedFieldSync;
1208
- protected readonly _currentMonthSignal: i0.WritableSignal<number>;
1209
- protected readonly _currentYearSignal: i0.WritableSignal<number>;
1210
- private readonly _localeSignal;
1211
- private readonly _holidayProviderSignal;
1212
- private readonly _disabledStateSignal;
1213
- /**
1214
- * Effect that automatically triggers change detection when key signals change.
1215
- * This reduces the need for manual markForCheck() calls throughout the codebase.
1216
- */
1217
- private readonly _changeDetectionEffect;
1218
- /**
1219
- * Signal tracking which calendar month indices are currently visible in the viewport.
1220
- * Used for lazy rendering of multi-calendar layouts to improve performance.
1221
- */
1222
- private readonly _visibleCalendarIndicesSignal;
1223
- /** Bumped when `multiCalendarMonths` is regenerated so `renderedCalendars` invalidates (plain array is not a signal). */
1224
- private readonly _multiCalendarDataRevision;
1225
- readonly calendarAriaLabel: i0.Signal<string>;
1226
- readonly calendarLoadingMessage: i0.Signal<string>;
1227
- /**
1228
- * Computed signal for rendered calendars - only includes visible calendars + buffer.
1229
- * This dramatically reduces DOM nodes for multi-calendar layouts.
1230
- */
1231
- renderedCalendars: i0.Signal<{
1232
- month: number;
1233
- year: number;
1234
- days: (Date | null)[];
1235
- }[]>;
1236
- private _cachedIsCurrentMonthMemo;
1237
- private _cachedIsDateDisabledMemo;
1238
- private _cachedIsSameDayMemo;
1239
- private _cachedIsHolidayMemo;
1240
- private _cachedGetHolidayLabelMemo;
1241
- private _memoDependencies;
1242
- private _updateMemoSignals;
1243
- private passiveTouchListeners;
1244
- get isInlineMode(): boolean;
1245
- private clearTouchHandledFlag;
1246
- private closeMonthYearDropdowns;
1247
- private setTouchHandledFlag;
1248
- isMobileDevice(): boolean;
1249
- shouldUseNativePicker(): boolean;
1250
- getNativeInputType(): string;
1251
- formatValueForNativeInput(value: DatepickerValue): string;
1252
- formatDateForNativeInput(date: Date): string;
1253
- getMinDateForNativeInput(): string | null;
1254
- getMaxDateForNativeInput(): string | null;
1255
- parseNativeInputValue(value: string): DatepickerValue;
1256
- onNativeInputChange(event: Event): void;
1257
- onBottomSheetTouchStart(event: TouchEvent): void;
1258
- onBottomSheetTouchMove(event: TouchEvent): void;
1259
- onBottomSheetTouchEnd(event: TouchEvent): void;
1260
- readonly boundIsDateDisabled: (d: Date | null) => boolean;
1261
- readonly boundIsSameDay: (d1: Date | null, d2: Date | null) => boolean;
1262
- readonly boundIsHoliday: (d: Date | null) => boolean;
1263
- readonly boundIsMultipleSelected: (d: Date | null) => boolean;
1264
- readonly boundIsInRange: (d: Date | null) => boolean;
1265
- readonly boundIsPreviewInRange: (d: Date | null) => boolean;
1266
- readonly boundGetAriaLabel: (d: Date | null) => string;
1267
- readonly boundGetDayCellCustomClasses: (d: Date | null) => string[];
1268
- readonly boundGetDayCellTooltip: (d: Date | null) => string | null;
1269
- readonly boundFormatDayNumber: (d: Date | null) => string;
1270
- readonly boundGetMonthYearLabel: (m: number, y: number) => string;
1271
- readonly boundGetCalendarAriaLabelForMonth: (m: number, y: number) => string;
1272
- readonly boundIsTimelineMonthSelected: (d: Date) => boolean;
1273
- readonly boundFormatTimeSliderValue: (v: number) => string;
1274
- get isCalendarVisible(): boolean;
1275
- get displayValue(): string;
1276
- private syncTypedInputIfNotTyping;
1277
- private getDisplayValueTimeOnly;
1278
- private getDisplayValueDateDefault;
1279
- private formatWithCustomFormat;
1280
- private formatWithAdapter;
1281
- private formatWithParsingServiceFallback;
1282
- /**
1283
- * Format dates using a custom date format pattern
1284
- * Supports YYYY, MM, DD, HH, mm, ss, etc.
1285
- */
1286
- private formatWithCustomPattern;
1287
- get isBackArrowDisabled(): boolean;
1288
- private adjustDisplayedDateToRange;
1289
- private _invalidateMemoCache;
1290
- get isCurrentMonthMemo(): (day: Date | null) => boolean;
1291
- /**
1292
- * Memoized function for checking if a date is disabled.
1293
- * Returns a cached function that checks date constraints efficiently.
1294
- *
1295
- * @returns A function that checks if a date is disabled
1296
- *
1297
- * @remarks
1298
- * This getter implements memoization to avoid recreating the validation function
1299
- * on every calendar render. The function is regenerated only when:
1300
- * - Disabled state constraints change (minDate, maxDate, disabledDates, disabledRanges)
1301
- * - Current month/year changes
1302
- *
1303
- * Performance: O(1) to get the memoized function, O(n) to execute where n = constraints
1304
- * The memoization significantly improves performance when rendering calendar grids
1305
- * with many date cells (e.g., multiple calendar months).
1306
- */
1307
- get isDateDisabledMemo(): (day: Date | null) => boolean;
1308
- /**
1309
- * Memoized function for comparing if two dates are the same day.
1310
- * Uses an optimized date comparator for efficient day-level comparisons.
1311
- *
1312
- * @returns A function that compares two dates for same-day equality
1313
- *
1314
- * @remarks
1315
- * The date comparator normalizes times to start of day before comparison,
1316
- * ensuring accurate day-level equality checks regardless of time components.
1317
- *
1318
- * Performance: O(1) - Simple date field comparisons after normalization
1319
- */
1320
- get isSameDayMemo(): (d1: Date | null, d2: Date | null) => boolean;
1321
- /**
1322
- * Memoized function for checking if a date is a holiday.
1323
- * Returns a cached function that uses the current holiday provider.
1324
- *
1325
- * @returns A function that checks if a date is a holiday
1326
- *
1327
- * @remarks
1328
- * The function is regenerated when the holidayProvider changes.
1329
- * This ensures the memoized function always uses the current provider
1330
- * while avoiding recreation on every calendar render.
1331
- *
1332
- * Performance: O(1) to get memoized function, O(1) to execute (depends on provider implementation)
1333
- */
1334
- get isHolidayMemo(): (day: Date | null) => boolean;
1335
- get getHolidayLabelMemo(): (day: Date | null) => string | null;
1336
- /**
1337
- * TrackBy function for calendar day cells in *ngFor loops.
1338
- * Provides stable identity for Angular's change detection optimization.
1339
- *
1340
- * @param index - Array index of the day
1341
- * @param day - The date object (or null for empty cells)
1342
- * @returns Unique identifier for the day cell
1343
- *
1344
- * @remarks
1345
- * Using timestamp ensures stable identity even when Date objects are recreated.
1346
- * This significantly improves *ngFor performance by allowing Angular to track
1347
- * which items have changed, moved, or been removed.
1348
- */
1349
- trackByDay(index: number, day: Date | null): string;
1350
- /**
1351
- * TrackBy function for calendar month containers in multi-calendar views.
1352
- * Provides stable identity for efficient change detection.
1353
- *
1354
- * @param _index - Array index (unused, using year-month for identity)
1355
- * @param calendarMonth - The calendar month object
1356
- * @returns Unique identifier combining year and month
1357
- */
1358
- private containsNodeViaComposedPath;
1359
- private containsNodeViaDOM;
1360
- /**
1361
- * Checks if a DOM node is contained within this datepicker instance,
1362
- * including its input group and any portaled popover content.
1363
- *
1364
- * @param target - The node to check
1365
- * @returns True if the node is inside this datepicker's DOM tree
1366
- */
1367
- containsNode(target: Node | null, event?: UIEvent): boolean;
1368
- /** Shared logic for closing calendar when user interacts outside (click or touch). */
1369
- private tryCloseCalendarOnOutsideInteraction;
1370
- onDocumentClick(event: MouseEvent | TouchEvent): void;
1371
- onDocumentTouchStart(event: TouchEvent): void;
1372
- private handleDocumentOutsideInteraction;
1373
- onTouchStart(event: TouchEvent): void;
1374
- onInputGroupFocus(): void;
1375
- private focusInput;
1376
- onTouchEnd(event: TouchEvent): void;
1377
- private closeOtherCalendarInstances;
1378
- private applyCalendarOpenStateFromTouch;
1379
- onPointerDown(event: PointerEvent): void;
1380
- onPointerUp(event: PointerEvent): void;
1381
- private clearPointerTouchState;
1382
- private applyCalendarCloseState;
1383
- private applyCalendarOpenStateFromPointer;
1384
- onKeyDown(event: KeyboardEvent): void;
1385
- private handleKeyboardNavigation;
1386
- private tryCustomShortcuts;
1387
- private tryHooksHandleShortcut;
1388
- private handleShortcutKey;
1389
- private handleShortcutNavigationKeys;
1390
- private handleShortcutArrowKeys;
1391
- private handleShortcutPageHomeEndKeys;
1392
- private handleShortcutLetterAndSpecialKeys;
1393
- isKeyboardHelpOpen: boolean;
1394
- toggleKeyboardHelp(): void;
1395
- private getShortcutKey;
1396
- focusedDate: Date | null;
1397
- private navigateDate;
1398
- private navigateToFirstDay;
1399
- private navigateToLastDay;
1400
- private selectToday;
1401
- private selectYesterday;
1402
- private selectTomorrow;
1403
- private selectNextWeek;
1404
- onDateFocus(day: Date | null): void;
1405
- private isDateValid;
1406
- getDayCellCustomClasses(day: Date | null): string[];
1407
- getDayCellTooltip(day: Date | null): string | null;
1408
- formatDayNumber(day: Date | null): string;
1409
- /**
1410
- * Generates an accessible label for a date cell.
1411
- * Provides screen readers with a descriptive label for each selectable date.
1412
- *
1413
- * @param day - The date to generate a label for
1414
- * @returns Localized date label (e.g., "Monday, January 15, 2024")
1415
- *
1416
- * @remarks
1417
- * The label includes weekday, month, day, and year for full context.
1418
- * Custom formatting can be provided via the formatAriaLabel hook.
1419
- * This ensures screen reader users have complete information about each date.
1420
- */
1421
- getAriaLabel(day: Date | null): string;
1422
- /**
1423
- * ControlValueAccessor implementation: Writes a new value to the form control.
1424
- * Called by Angular Forms when the form control value changes programmatically.
1425
- *
1426
- * @param val - The new value from the form control
1427
- *
1428
- * @remarks
1429
- * This method:
1430
- * - Normalizes the incoming value to ensure consistent format
1431
- * - Initializes component state from the value
1432
- * - Updates memoized signals for change detection
1433
- * - Regenerates calendar to reflect the new value
1434
- * - Notifies Material Form Field of state changes
1435
- * - Syncs with Signal Form field if field input is used
1436
- *
1437
- * This is part of the ControlValueAccessor interface, enabling two-way binding
1438
- * with both Reactive Forms and Template-driven Forms.
1439
- */
1440
- writeValue(val: DatepickerValue): void;
1441
- /**
1442
- * ControlValueAccessor implementation: Registers a callback for value changes.
1443
- * Called by Angular Forms to receive notifications when the user changes the value.
1444
- *
1445
- * @param fn - Callback function to call when value changes
1446
- */
1447
- registerOnChange(fn: (value: DatepickerValue) => void): void;
1448
- /**
1449
- * ControlValueAccessor implementation: Registers a callback for touched state.
1450
- * Called by Angular Forms to receive notifications when the user interacts with the control.
1451
- *
1452
- * @param fn - Callback function to call when control is touched
1453
- */
1454
- registerOnTouched(fn: () => void): void;
1455
- setDisabledState(isDisabled: boolean): void;
1456
- /**
1457
- * Emits a value change event and updates the internal state.
1458
- * Handles normalization, form field synchronization, and calendar auto-close behavior.
1459
- *
1460
- * @param val - The new datepicker value (Date, Date range, or array of dates)
1461
- *
1462
- * @remarks
1463
- * This method is the central point for value updates and ensures:
1464
- * - Value normalization for consistent internal representation
1465
- * - Signal Form field synchronization (if field input is used)
1466
- * - Event emission for two-way binding
1467
- * - Touch state tracking for form validation
1468
- * - Automatic calendar closing for single date and complete range selections
1469
- *
1470
- * The calendar auto-closes when:
1471
- * - Single date mode: After any date selection
1472
- * - Range mode: After both start and end dates are selected
1473
- * - Not in inline mode
1474
- * - Not in time-only mode
1475
- */
1476
- private emitValue;
1477
- /**
1478
- * Toggles the calendar popover open/closed state.
1479
- * Handles focus management, accessibility announcements, and prevents rapid toggling.
1480
- *
1481
- * @param event - Optional event that triggered the toggle (used to prevent toggle on clear button clicks)
1482
- *
1483
- * @remarks
1484
- * This method implements several important behaviors:
1485
- * - Debouncing: Prevents rapid toggling within 300ms
1486
- * - Focus management: Stores previous focus element for restoration
1487
- * - Accessibility: Announces calendar state changes to screen readers
1488
- * - Touch optimization: Sets up passive touch listeners for mobile devices
1489
- *
1490
- * When opening:
1491
- * - Stores the currently focused element for restoration
1492
- * - Sets up focus trap for keyboard navigation
1493
- * - Announces calendar opening with current month/year
1494
- *
1495
- * When closing:
1496
- * - Removes focus trap
1497
- * - Restores focus to previous element
1498
- * - Announces calendar closing
1499
- */
1500
- toggleCalendar(event?: Event): void;
1501
- private applyToggleWithNoEvent;
1502
- private shouldSkipClickToggle;
1503
- private applyDefaultMonthForOpen;
1504
- private applySmartViewModeForOpen;
1505
- private announceAfterOpen;
1506
- private announceAfterClose;
1507
- private announceCalendarOpened;
1508
- private announceCalendarClosed;
1509
- onBackdropInteract(event: Event): void;
1510
- onPopoverEscape(event: Event): void;
1511
- private scrollDebounceTimer;
1512
- private readonly updatePositionOnScroll;
1513
- private _startOpeningState;
1514
- private _startClosingState;
1515
- private renderInBody;
1516
- /** Hides the body-appended popover so loading/calendar are not visible at wrong position. */
1517
- private hideBodyPopoverUntilPositioned;
1518
- /** Shows the body-appended popover after positioning has been applied. */
1519
- private revealBodyPopover;
1520
- private destroyBodyView;
1521
- private closeCalendar;
1522
- private shouldAutoClose;
1523
- /**
1524
- * Clears the selected date value(s) and resets the component state.
1525
- * Emits null value and closes calendar if open.
1526
- *
1527
- * @param event - Optional event that triggered the clear action
1528
- *
1529
- * @remarks
1530
- * This method:
1531
- * - Clears all selected dates (single, range, multiple modes)
1532
- * - Emits null value to form controls
1533
- * - Closes calendar if open
1534
- * - Provides haptic feedback on mobile if enabled
1535
- * - Resets touch gesture state
1536
- * - Announces clearing to screen readers
1537
- *
1538
- * Used by the clear button and can be called programmatically.
1539
- */
1540
- clearValue(event?: MouseEvent | TouchEvent): void;
1541
- get currentMonth(): number;
1542
- set currentMonth(month: number);
1543
- get currentYear(): number;
1544
- set currentYear(year: number);
1545
- private _updateToday;
1546
- ngOnInit(): void;
1547
- private initializeTimeFromNowIfNeeded;
1548
- private resolveInitialValue;
1549
- private resolveInitialValueFromField;
1550
- ngAfterViewInit(): void;
1551
- private setupInputGroupPassiveListeners;
1552
- private _touchListenersSetupTimeout;
1553
- /**
1554
- * Sets up passive touch event listeners on calendar day cells for improved mobile performance.
1555
- * Implements retry logic to handle cases where DOM elements aren't immediately available.
1556
- * All listeners are tracked for proper cleanup on component destroy.
1557
- */
1558
- private setupPassiveTouchListeners;
1559
- private attachTouchListenersToCells;
1560
- ngOnChanges(changes: SimpleChanges): void;
1561
- private handleChangesShowTimeInlineAndLayout;
1562
- private handleChangesLocaleRtl;
1563
- private handleChangesWeekStartAndRelated;
1564
- private applyChangesMinuteAnd24Hour;
1565
- private handleChangesField;
1566
- private handleChangesTimeAndMode;
1567
- private handleChangesDisabledStates;
1568
- private handleChangesTranslations;
1569
- private handleChangesMaxDate;
1570
- private handleChangesValue;
1571
- private handleChangesStartAt;
1572
- private handleChangesMinDate;
1573
- private handleChangesCalendarViewMode;
1574
- /**
1575
- * Validates component inputs for conflicts and invalid combinations.
1576
- * Logs warnings in development mode when invalid configurations are detected.
1577
- *
1578
- * @param changes - The SimpleChanges object from ngOnChanges
1579
- */
1580
- private validateInputs;
1581
- private validateInputsMinMaxDate;
1582
- private validateInputsTimeOnly;
1583
- private validateInputsIntervals;
1584
- private validateInputsYearRange;
1585
- private initializeTimeSliders;
1586
- private get24Hour;
1587
- private update12HourState;
1588
- private applyCurrentTime;
1589
- private applyTimeIfNeeded;
1590
- /**
1591
- * Initializes the component's internal state from a DatepickerValue.
1592
- * Sets up selected dates, calendar view position, and time values based on the provided value.
1593
- *
1594
- * @param value - The datepicker value to initialize from (Date, range, array, or null)
1595
- *
1596
- * @remarks
1597
- * This method handles initialization for all selection modes:
1598
- * - Single mode: Sets selectedDate
1599
- * - Range mode: Sets startDate and endDate
1600
- * - Multiple mode: Sets selectedDates array
1601
- *
1602
- * The method also:
1603
- * - Determines the calendar view center date (uses value, startAt, or minDate as fallback)
1604
- * - Extracts and sets time values if the date includes time information
1605
- * - Normalizes all dates to ensure consistent internal representation
1606
- *
1607
- * Performance: O(1) for single/range, O(n) for multiple mode where n = array length
1608
- */
1609
- private initializeValue;
1610
- private applyValueToSelection;
1611
- private resolveViewCenterDate;
1612
- private _normalizeDate;
1613
- /**
1614
- * Normalizes various date input formats into a consistent DatepickerValue type.
1615
- * Handles Date objects, Moment.js objects, date ranges, arrays, and strings.
1616
- *
1617
- * @param val - The value to normalize (can be Date, Moment, range object, array, or string)
1618
- * @returns Normalized DatepickerValue (Date, range object, array, or null)
1619
- *
1620
- * @remarks
1621
- * This method provides flexible input handling to support:
1622
- * - Native JavaScript Date objects
1623
- * - Moment.js objects (with timezone preservation)
1624
- * - Date range objects: { start: Date, end: Date }
1625
- * - Arrays of dates for multiple selection mode
1626
- * - String dates with custom format parsing
1627
- *
1628
- * Invalid or unparseable values are normalized to null.
1629
- * This ensures type safety and consistent internal state representation.
1630
- */
1631
- private _normalizeValue;
1632
- private _normalizeRangeValue;
1633
- private _normalizeArrayValue;
1634
- /**
1635
- * Check if the provided value is a Moment.js object
1636
- */
1637
- private isMomentObject;
1638
- /**
1639
- * Convert a Moment.js object to a Date, preserving timezone offset
1640
- */
1641
- private momentToDate;
1642
- /**
1643
- * Compares two DatepickerValue objects for equality.
1644
- * Handles Date objects, range objects, and arrays with proper date comparison.
1645
- *
1646
- * @param val1 - First value to compare
1647
- * @param val2 - Second value to compare
1648
- * @returns true if values represent the same date(s), false otherwise
1649
- *
1650
- * @remarks
1651
- * This method performs deep equality checks:
1652
- * - For Date objects: Compares using date comparator (handles time normalization)
1653
- * - For range objects: Compares both start and end dates
1654
- * - For arrays: Compares lengths and all elements
1655
- * - Handles null/undefined values correctly
1656
- *
1657
- * Uses the dateComparator utility for efficient date comparisons that
1658
- * normalize times to start of day for accurate day-level equality.
1659
- */
1660
- private isValueEqual;
1661
- /**
1662
- * Parses a date string, optionally using the configured date adapter with error callback.
1663
- * Falls back to native Date parsing if no adapter is configured.
1664
- *
1665
- * @param dateString - The date string to parse
1666
- * @returns Parsed Date object or null if parsing fails
1667
- *
1668
- * @remarks
1669
- * If a date adapter is configured via globalConfig, it will be used for parsing
1670
- * with error callbacks. Otherwise, native Date parsing is used.
1671
- * Error callbacks allow consumers to handle parsing failures gracefully.
1672
- */
1673
- onInputFocus(event: FocusEvent): void;
1674
- /**
1675
- * Sanitizes user input to prevent XSS attacks.
1676
- * Removes potentially dangerous characters while preserving valid date/time input.
1677
- *
1678
- * @param input - Raw user input string
1679
- * @returns Sanitized string safe for template interpolation
1680
- *
1681
- * @remarks
1682
- * This method provides basic XSS protection by removing:
1683
- * - HTML tag delimiters (< and >)
1684
- * - Script event handlers (onerror, onclick, etc.)
1685
- * - JavaScript protocol (javascript:)
1686
- * - Data URIs that could contain scripts
1687
- *
1688
- * Note: Angular's template interpolation provides additional protection,
1689
- * but this sanitization adds an extra layer of defense for user-provided strings.
1690
- * For comprehensive sanitization, Angular's DomSanitizer should be used for
1691
- * any HTML content, but for date/time strings, this level of sanitization is sufficient.
1692
- */
1693
- private sanitizeInput;
1694
- onInputChange(event: Event): void;
1695
- onInputBlur(event: FocusEvent): void;
1696
- private applyValidationErrorForBlur;
1697
- onInputKeyDown(event: Event): void;
1698
- private applyInputMask;
1699
- private isValidDate;
1700
- private applyTypedDate;
1701
- private generateTimeOptions;
1702
- private generateLocaleData;
1703
- private updateRangesArray;
1704
- setTimezone(tz: string): void;
1705
- checkAndEmitInvalidRange(start: Date, end: Date): boolean;
1706
- updateNaturalLanguagePreview(value: string): void;
1707
- selectRange(range: [Date, Date]): void;
1708
- isHoliday(date: Date | null): boolean;
1709
- getHolidayLabel(date: Date | null): string | null;
1710
- /**
1711
- * Checks if a date is disabled based on all configured constraints.
1712
- *
1713
- * @param date - The date to check
1714
- * @returns true if the date is disabled, false if it can be selected
1715
- *
1716
- * @remarks
1717
- * A date is considered disabled if it matches any of these conditions:
1718
- * - Falls before minDate
1719
- * - Falls after maxDate
1720
- * - Is in the disabledDates array
1721
- * - Falls within a disabledRanges entry
1722
- * - Fails the isInvalidDate custom validation function
1723
- * - Is a holiday and disableHolidays is true
1724
- *
1725
- * Performance: O(n) where n = disabledDates.length + disabledRanges.length
1726
- * For large constraint lists (>1000), consider optimizing with Set or DateRange tree.
1727
- */
1728
- isDateDisabled(date: Date | null): boolean;
1729
- private _isInDisabledDates;
1730
- private _isInDisabledRanges;
1731
- private _isOutOfMinMaxBounds;
1732
- /**
1733
- * Checks if a date is selected in multiple selection mode.
1734
- *
1735
- * @param d - The date to check
1736
- * @returns true if the date is in the selectedDates array
1737
- *
1738
- * @remarks
1739
- * Performance: O(n) where n = selectedDates.length
1740
- * Uses day-level comparison (ignores time) for accurate matching.
1741
- */
1742
- isMultipleSelected(d: Date | null): boolean;
1743
- /**
1744
- * Handles time value changes from time selection controls.
1745
- * Updates the selected date(s) with the new time values.
1746
- *
1747
- * @remarks
1748
- * This method:
1749
- * - Applies time changes to selected dates based on current mode
1750
- * - Emits value changes for form integration
1751
- * - Handles time-only mode by creating a date with current time
1752
- * - Updates all selected dates in multiple mode
1753
- * - Ensures startDate <= endDate in range mode
1754
- */
1755
- timeChange(): void;
1756
- /**
1757
- * Handles time range changes in timeRangeMode.
1758
- * Updates the internal time range state and emits the time range to listeners.
1759
- * Only creates/updates time-only dates (no calendar dates).
1760
- */
1761
- timeRangeChange(): void;
1762
- /**
1763
- * Handles date cell click/tap events.
1764
- * Processes date selection based on the current mode (single, range, multiple, etc.)
1765
- * and handles touch gesture debouncing to prevent accidental double selections.
1766
- *
1767
- * @param day - The date that was clicked (null for empty cells)
1768
- *
1769
- * @remarks
1770
- * This method implements several important behaviors:
1771
- * - Touch gesture handling: Debounces rapid touch events to prevent double-clicks
1772
- * - Date validation: Checks if the date is disabled before processing
1773
- * - Hook integration: Calls beforeDateSelect hook if provided
1774
- * - Mode-specific logic: Handles single, range, multiple, week, month, quarter, and year modes
1775
- * - Calendar navigation: Automatically navigates to different month if date is outside current view
1776
- * - Accessibility: Announces date selection to screen readers
1777
- * - Auto-close: Closes calendar after selection in single mode or complete range
1778
- *
1779
- * Performance considerations:
1780
- * - Touch debouncing prevents excessive event processing
1781
- * - Date normalization happens once per selection
1782
- * - Calendar regeneration is optimized with caching
1783
- */
1784
- onDateClick(day: Date | null): void;
1785
- /**
1786
- * Returns true (and cleans up touch state) when the click event should be
1787
- * ignored because it was already handled by the touch handler within the
1788
- * deduplication window (250 ms).
1789
- */
1790
- private _shouldSkipDueToTouchGuard;
1791
- private _navigateToMonthOfDay;
1792
- private _handleSingleModeClick;
1793
- private _handleRangeModeClick;
1794
- private _handleRangeEndSelection;
1795
- /** Completes range with end equal to start when `allowSameDay` is enabled. */
1796
- private _tryCompleteSameDayRange;
1797
- private _announceRangeSelected;
1798
- private _finalizeSameDayRangeOnClose;
1799
- private _handlePeriodModeClick;
1800
- private _handleMultipleModeClick;
1801
- private _applyRecurringPattern;
1802
- private _syncTimeAfterDateClick;
1803
- onDateHover(day: Date | null): void;
1804
- onDateCellTouchStart(event: TouchEvent, day: Date | null): void;
1805
- onDateCellTouchMove(event: TouchEvent): void;
1806
- onDateCellTouchEnd(event: TouchEvent, day: Date | null): void;
1807
- isPreviewInRange(day: Date | null): boolean;
1808
- private buildCalendarMonths;
1809
- /**
1810
- * Generates the calendar view for the current month(s).
1811
- * Uses LRU caching to optimize performance for frequently accessed months.
1812
- *
1813
- * @remarks
1814
- * Performance characteristics:
1815
- * - First generation: O(n) where n = number of days in month(s)
1816
- * - Cached generation: O(1) lookup + O(1) cache access update
1817
- * - Cache eviction: O(m) where m = cache size (only when cache is full)
1818
- *
1819
- * This method:
1820
- * 1. Generates dropdown options for month/year selection
1821
- * 2. Generates calendar days for each month in calendarCount
1822
- * 3. Uses LRU cache to avoid regenerating recently accessed months
1823
- * 4. Handles month/year rollover when displaying multiple calendars
1824
- * 5. Updates memoized dependencies for change detection optimization
1825
- * 6. Supports synchronous scrolling to keep calendars in sync (when enabled)
1826
- *
1827
- * The cache key format is `${year}-${month}` to ensure unique identification
1828
- * of calendar months across different years.
1829
- *
1830
- * When syncScroll is enabled, calendars are kept synchronized:
1831
- * - Calendar 0: currentDate month + (0 * monthGap)
1832
- * - Calendar 1: currentDate month + (1 * monthGap)
1833
- * - Calendar 2: currentDate month + (2 * monthGap)
1834
- */
1835
- generateCalendar(): void;
1836
- /**
1837
- * Preloads adjacent months (previous and next) into the cache for smoother navigation.
1838
- * Implements lazy loading optimization to improve performance when users navigate between months.
1839
- *
1840
- * @param currentYear - Current calendar year
1841
- * @param currentMonth - Current calendar month (0-11)
1842
- */
1843
- private preloadAdjacentMonths;
1844
- private generateDropdownOptions;
1845
- private generateYearGrid;
1846
- private generateDecadeGrid;
1847
- onYearClick(year: number): void;
1848
- onDecadeClick(decade: number): void;
1849
- /**
1850
- * Changes the displayed decade by the specified delta.
1851
- * Used in decade view mode for navigating between decades.
1852
- *
1853
- * @param delta - Number of decades to change (positive for future, negative for past)
1854
- *
1855
- * @remarks
1856
- * Each delta unit represents 10 years. The method updates the decade grid
1857
- * to show the new range of decades available for selection.
1858
- */
1859
- changeDecade(delta: number): void;
1860
- /**
1861
- * Changes the displayed calendar year by the specified delta.
1862
- * Updates year grid and calendar view, and announces the change to screen readers.
1863
- *
1864
- * @param delta - Number of years to change (positive for future, negative for past)
1865
- *
1866
- * @remarks
1867
- * This method:
1868
- * - Updates currentYear and currentDate
1869
- * - Regenerates year grid and calendar view
1870
- * - Announces year change to screen readers for accessibility
1871
- * - Handles touch listener setup for mobile devices
1872
- *
1873
- * Performance: O(1) for year change, O(n) for grid/calendar generation
1874
- */
1875
- changeYear(delta: number): void;
1876
- onViewModeChange(mode: 'month' | 'year' | 'decade' | 'timeline' | 'time-slider'): void;
1877
- onYearSelectChange(year: unknown): void;
1878
- private generateTimeline;
1879
- timelineZoomIn(): void;
1880
- timelineZoomOut(): void;
1881
- isTimelineMonthSelected(month: Date): boolean;
1882
- onTimelineMonthClick(month: Date): void;
1883
- formatTimeSliderValue(minutes: number): string;
1884
- onStartTimeSliderChange(minutes: number): void;
1885
- onEndTimeSliderChange(minutes: number): void;
1886
- onCalendarSwipeStart(event: TouchEvent): void;
1887
- onCalendarSwipeMove(event: TouchEvent): void;
1888
- onCalendarSwipeEnd(event: TouchEvent): void;
1889
- changeMonth(delta: number): void;
1890
- isSameDay(d1: Date | null, d2: Date | null): boolean;
1891
- isCurrentMonth(day: Date | null): boolean;
1892
- isInRange(d: Date | null): boolean;
1893
- private applyGlobalConfig;
1894
- private applyGlobalConfigDefaults;
1895
- private applyGlobalConfigLocaleAndDates;
1896
- private applyGlobalConfigMobile;
1897
- /**
1898
- * Apply animation configuration from global config
1899
- */
1900
- private applyAnimationConfig;
1901
- /**
1902
- * Initialize translations from service or registry
1903
- */
1904
- private initializeTranslations;
1905
- /**
1906
- * Generates an accessible label for the calendar dialog.
1907
- * Provides screen readers with context about which month/year is being displayed.
1908
- *
1909
- * @returns Localized calendar label (e.g., "Calendar for January 2024")
1910
- */
1911
- getCalendarAriaLabel(): string;
1912
- /**
1913
- * Generates an accessible label for a specific calendar month in multi-calendar views.
1914
- *
1915
- * @param month - Month index (0-11)
1916
- * @param year - Year number
1917
- * @returns Localized calendar label for the specified month/year
1918
- */
1919
- getCalendarAriaLabelForMonth(month: number, year: number): string;
1920
- /**
1921
- * Sets up IntersectionObserver for lazy loading multi-calendar months.
1922
- * Only initializes if multi-calendar is enabled (calendarCount > 1).
1923
- *
1924
- * @remarks
1925
- * Uses IntersectionObserver to track which calendar month elements are visible
1926
- * in the viewport. Updates the visible indices signal to enable/disable rendering.
1927
- */
1928
- private setupLazyLoadingObserver;
1929
- /**
1930
- * Formats a month and year into a display label.
1931
- *
1932
- * @param month - Month index (0-11)
1933
- * @param year - Year number
1934
- * @returns Formatted string like "January 2024"
1935
- */
1936
- getMonthYearLabel(month: number, year: number): string;
1937
- isCurrentMonthForCalendar(day: Date | null, targetMonth: number, targetYear: number): boolean;
1938
- getTranslation(key: keyof DatepickerTranslations, fallbackKey?: keyof DatepickerTranslations, params?: Record<string, string | number>): string;
1939
- /**
1940
- * Closes the calendar and restores focus to the previously focused element.
1941
- * This improves accessibility by returning focus to the trigger element.
1942
- */
1943
- closeCalendarWithFocusRestore(): void;
1944
- private updateRtlState;
1945
- /**
1946
- * Component lifecycle hook: Cleanup all resources, subscriptions, and event listeners.
1947
- * Ensures no memory leaks by:
1948
- * - Removing instance from static registry
1949
- * - Cleaning up field sync service
1950
- * - Completing stateChanges subject
1951
- * - Clearing all tracked timeouts and animation frames
1952
- * - Removing touch event listeners
1953
- * - Invalidating month cache
1954
- */
1955
- ngOnDestroy(): void;
1956
- private getActualPopoverContainer;
1957
- private setupFocusTrap;
1958
- /**
1959
- * Positions the popover relative to the input element dynamically.
1960
- * - Prioritizes layout below the input.
1961
- * - Falls back to positioning above if required.
1962
- * - Defaults to CSS-centered positioning if space is insufficient.
1963
- *
1964
- * @remarks
1965
- * This logic primarily targets mobile/tablet viewports; desktop layout (≥1024px)
1966
- * is handled via CSS absolute positioning.
1967
- */
1968
- private positionPopoverRelativeToInput;
1969
- /**
1970
- * Determines if the component is operating within an Ionic environment.
1971
- * This detection disables features that may conflict with Ionic's overlay system.
1972
- */
1973
- private isIonicEnvironment;
1974
- private removeFocusTrap;
1975
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkDatepickerComponent, never>;
1976
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkDatepickerComponent, "ngxsmk-datepicker", never, { "mode": { "alias": "mode"; "required": false; }; "calendarViewMode": { "alias": "calendarViewMode"; "required": false; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "timeOnly": { "alias": "timeOnly"; "required": false; }; "timeRangeMode": { "alias": "timeRangeMode"; "required": false; }; "showCalendarButton": { "alias": "showCalendarButton"; "required": false; }; "minuteInterval": { "alias": "minuteInterval"; "required": false; }; "use24Hour": { "alias": "use24Hour"; "required": false; }; "secondInterval": { "alias": "secondInterval"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "holidayProvider": { "alias": "holidayProvider"; "required": false; }; "disableHolidays": { "alias": "disableHolidays"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "disabledRanges": { "alias": "disabledRanges"; "required": false; }; "recurringPattern": { "alias": "recurringPattern"; "required": false; }; "dateTemplate": { "alias": "dateTemplate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "translations": { "alias": "translations"; "required": false; }; "translationService": { "alias": "translationService"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "prevMonthAriaLabel": { "alias": "prevMonthAriaLabel"; "required": false; }; "nextMonthAriaLabel": { "alias": "nextMonthAriaLabel"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; }; "weekStart": { "alias": "weekStart"; "required": false; }; "yearRange": { "alias": "yearRange"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; "hooks": { "alias": "hooks"; "required": false; }; "enableKeyboardShortcuts": { "alias": "enableKeyboardShortcuts"; "required": false; }; "customShortcuts": { "alias": "customShortcuts"; "required": false; }; "autoApplyClose": { "alias": "autoApplyClose"; "required": false; }; "allowSameDay": { "alias": "allowSameDay"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; }; "enableNaturalLanguage": { "alias": "enableNaturalLanguage"; "required": false; }; "naturalLanguagePreviewTemplate": { "alias": "naturalLanguagePreviewTemplate"; "required": false; }; "calendars": { "alias": "calendars"; "required": false; }; "rangePresetFactory": { "alias": "rangePresetFactory"; "required": false; }; "showTimezoneSelector": { "alias": "showTimezoneSelector"; "required": false; }; "defaultTimezone": { "alias": "defaultTimezone"; "required": false; }; "calendarCount": { "alias": "calendarCount"; "required": false; }; "calendarLayout": { "alias": "calendarLayout"; "required": false; }; "defaultMonthOffset": { "alias": "defaultMonthOffset"; "required": false; }; "syncScroll": { "alias": "syncScroll"; "required": false; }; "align": { "alias": "align"; "required": false; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; }; "enableHapticFeedback": { "alias": "enableHapticFeedback"; "required": false; }; "mobileModalStyle": { "alias": "mobileModalStyle"; "required": false; }; "mobileTimePickerStyle": { "alias": "mobileTimePickerStyle"; "required": false; }; "enablePullToRefresh": { "alias": "enablePullToRefresh"; "required": false; }; "mobileTheme": { "alias": "mobileTheme"; "required": false; }; "enableVoiceInput": { "alias": "enableVoiceInput"; "required": false; }; "autoDetectMobile": { "alias": "autoDetectMobile"; "required": false; }; "disableFocusTrap": { "alias": "disableFocusTrap"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "value": { "alias": "value"; "required": false; }; "field": { "alias": "field"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "dateFormatPattern": { "alias": "dateFormatPattern"; "required": false; }; "animationConfig": { "alias": "animationConfig"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "disabledState": { "alias": "disabledState"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorState": { "alias": "errorState"; "required": false; }; "userAriaDescribedBy": { "alias": "userAriaDescribedBy"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "ranges": { "alias": "ranges"; "required": false; }; }, { "naturalLanguageResolved": "naturalLanguageResolved"; "invalidRange": "invalidRange"; "timezoneChange": "timezoneChange"; "valueChange": "valueChange"; "action": "action"; "validationError": "validationError"; }, never, never, true, never>;
1977
- }
1978
-
1979
- /**
1980
- * Wrapper NgModule for the standalone datepicker component.
1981
- * Use this in your `imports` array if you see NG1010 ("imports must be an array...
1982
- * Value could not be determined statically") when using the Angular compiler plugin
1983
- * or in strict AOT builds.
1984
- *
1985
- * @example
1986
- * ```typescript
1987
- * import { NgxsmkDatepickerModule } from 'ngxsmk-datepicker';
1988
- *
1989
- * @Component({
1990
- * standalone: true,
1991
- * imports: [NgxsmkDatepickerModule], // single static reference
1992
- * template: '<ngxsmk-datepicker></ngxsmk-datepicker>'
1993
- * })
1994
- * export class MyComponent {}
1995
- * ```
1996
- *
1997
- * For NgModule-based apps:
1998
- * ```typescript
1999
- * @NgModule({
2000
- * imports: [NgxsmkDatepickerModule],
2001
- * exports: [NgxsmkDatepickerModule]
2002
- * })
2003
- * export class MyFeatureModule {}
2004
- * ```
2005
- */
2006
- declare class NgxsmkDatepickerModule {
2007
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkDatepickerModule, never>;
2008
- static ɵmod: i0.ɵɵNgModuleDeclaration<NgxsmkDatepickerModule, never, [typeof NgxsmkDatepickerComponent], [typeof NgxsmkDatepickerComponent]>;
2009
- static ɵinj: i0.ɵɵInjectorDeclaration<NgxsmkDatepickerModule>;
2010
- }
2011
-
2012
- interface ExportOptions {
2013
- includeTime?: boolean;
2014
- dateFormat?: string;
2015
- timezone?: string;
2016
- csvHeaders?: string[];
2017
- }
2018
- declare function exportToJson(value: DatepickerValue, options?: ExportOptions): string;
2019
- declare function importFromJson(jsonString: string): DatepickerValue;
2020
- declare function exportToCsv(value: DatepickerValue, options?: ExportOptions): string;
2021
- declare function importFromCsv(csvString: string): DatepickerValue;
2022
- declare function exportToIcs(value: DatepickerValue, options?: ExportOptions & {
2023
- summary?: string;
2024
- description?: string;
2025
- location?: string;
2026
- }): string;
2027
- declare function importFromIcs(icsString: string): DatepickerValue;
2028
-
2029
- /**
2030
- * Format a date with timezone support
2031
- * @param date The date to format
2032
- * @param locale The locale for formatting
2033
- * @param options Intl.DateTimeFormatOptions
2034
- * @param timezone Optional timezone (IANA timezone name, e.g., 'America/New_York', 'UTC', 'Europe/London')
2035
- * @returns Formatted date string
2036
- */
2037
- declare function formatDateWithTimezone(date: Date, locale: string, options: Intl.DateTimeFormatOptions, timezone?: string): string;
2038
- /**
2039
- * Parse a date string with timezone awareness
2040
- * @param dateString The date string to parse
2041
- * @param timezone Optional timezone for parsing (IANA timezone name)
2042
- * @returns Date object (always in UTC internally)
2043
- */
2044
- declare function parseDateWithTimezone(dateString: string, timezone?: string): Date | null;
2045
- /**
2046
- * Convert a date from one timezone to another
2047
- * @param date The date to convert
2048
- * @param fromTimezone Source timezone (IANA name)
2049
- * @param _toTimezone Target timezone (IANA name) - currently unused in simplified implementation
2050
- * @returns New Date object (still UTC internally, but represents the time in target timezone)
2051
- */
2052
- declare function convertTimezone(date: Date, fromTimezone: string, _toTimezone: string): Date;
2053
- /**
2054
- * Get the current timezone offset in minutes for a given timezone
2055
- * @param timezone IANA timezone name
2056
- * @param date Optional date to check offset for (defaults to now)
2057
- * @returns Offset in minutes from UTC
2058
- */
2059
- declare function getTimezoneOffset(timezone: string, date?: Date): number;
2060
- /**
2061
- * Check if a timezone string is valid
2062
- * @param timezone IANA timezone name
2063
- * @returns true if valid, false otherwise
2064
- */
2065
- declare function isValidTimezone(timezone: string): boolean;
2066
-
2067
- /**
2068
- * Calendar system types supported by the datepicker
2069
- */
2070
- type CalendarSystem = 'gregorian' | 'islamic' | 'buddhist' | 'japanese' | 'hebrew' | 'persian';
2071
- /**
2072
- * Locale data structure for datepicker localization
2073
- */
2074
- interface LocaleData {
2075
- /** Calendar system used by this locale */
2076
- calendar: CalendarSystem;
2077
- /** First day of the week (0 = Sunday, 1 = Monday, etc.) */
2078
- firstDayOfWeek: number;
2079
- /** Default date format string (e.g., 'MM/DD/YYYY', 'DD/MM/YYYY') */
2080
- dateFormat: string;
2081
- /** Full month names (12 elements) */
2082
- monthNames: string[];
2083
- /** Short month names (12 elements) */
2084
- monthNamesShort: string[];
2085
- /** Full weekday names (7 elements, starting with Sunday) */
2086
- weekdayNames: string[];
2087
- /** Short weekday names (7 elements, starting with Sunday) */
2088
- weekdayNamesShort: string[];
2089
- /** Whether this locale uses RTL (right-to-left) text direction */
2090
- isRtl: boolean;
2091
- /** Fallback locale if this one is not fully supported */
2092
- fallbackLocale?: string;
2093
- /** Locale-specific date format options */
2094
- dateFormatOptions?: {
2095
- year?: 'numeric' | '2-digit';
2096
- month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
2097
- day?: 'numeric' | '2-digit';
2098
- hour?: 'numeric' | '2-digit';
2099
- minute?: 'numeric' | '2-digit';
2100
- hour12?: boolean;
2101
- };
2102
- }
2103
- /**
2104
- * Service for managing locale data and providing fallback mechanisms
2105
- * Supports multiple calendar systems and provides locale-specific formatting
2106
- */
2107
- declare class LocaleRegistryService {
2108
- private localeData;
2109
- private readonly defaultLocale;
2110
- constructor();
2111
- /**
2112
- * Register locale data for a specific locale
2113
- */
2114
- register(locale: string, data: LocaleData): void;
2115
- /**
2116
- * Get locale data for a specific locale, with fallback support
2117
- */
2118
- getLocaleData(locale: string): LocaleData;
2119
- /**
2120
- * Get fallback locale for an unsupported locale
2121
- */
2122
- getFallbackLocale(unsupportedLocale: string): string | null;
2123
- /**
2124
- * Check if a locale is RTL
2125
- */
2126
- isRtlLocale(locale: string): boolean;
2127
- /**
2128
- * Get calendar system for a locale
2129
- */
2130
- getCalendarSystem(locale: string): CalendarSystem;
2131
- /**
2132
- * Register default locale data for common locales
2133
- */
2134
- private registerDefaultLocales;
2135
- /**
2136
- * Get default locale data (English US)
2137
- */
2138
- private getDefaultLocaleData;
2139
- static ɵfac: i0.ɵɵFactoryDeclaration<LocaleRegistryService, never>;
2140
- static ɵprov: i0.ɵɵInjectableDeclaration<LocaleRegistryService>;
2141
- }
2142
-
2143
- /**
2144
- * Service for managing datepicker translations
2145
- * Provides default translations for major languages
2146
- */
2147
- declare class TranslationRegistryService {
2148
- private translations;
2149
- constructor();
2150
- /**
2151
- * Register translations for a locale
2152
- */
2153
- register(locale: string, translations: DatepickerTranslations): void;
2154
- /**
2155
- * Get translations for a locale with fallback support
2156
- */
2157
- getTranslations(locale: string): DatepickerTranslations;
2158
- /**
2159
- * Register default translations for major languages
2160
- */
2161
- private registerDefaultTranslations;
2162
- /**
2163
- * Get English translations (default)
2164
- */
2165
- private getEnglishTranslations;
2166
- static ɵfac: i0.ɵɵFactoryDeclaration<TranslationRegistryService, never>;
2167
- static ɵprov: i0.ɵɵInjectableDeclaration<TranslationRegistryService>;
2168
- }
2169
-
2170
- /**
2171
- * Service for custom date formatting patterns.
2172
- * Supports custom patterns beyond standard Angular DatePipe formats.
2173
- *
2174
- * @remarks
2175
- * Supports the following pattern tokens:
2176
- * - YYYY: 4-digit year (e.g., 2025)
2177
- * - YY: 2-digit year (e.g., 25)
2178
- * - MMMM: Full month name (e.g., January)
2179
- * - MMM: Abbreviated month name (e.g., Jan)
2180
- * - MM: 2-digit month (e.g., 01)
2181
- * - M: 1 or 2-digit month (e.g., 1)
2182
- * - DDDD: Full weekday name (e.g., Monday)
2183
- * - DDD: Abbreviated weekday name (e.g., Mon)
2184
- * - DD: 2-digit day (e.g., 05)
2185
- * - D: 1 or 2-digit day (e.g., 5)
2186
- * - HH: 2-digit hour (24-hour format, e.g., 14)
2187
- * - H: 1 or 2-digit hour (24-hour format, e.g., 14)
2188
- * - hh: 2-digit hour (12-hour format, e.g., 02)
2189
- * - h: 1 or 2-digit hour (12-hour format, e.g., 2)
2190
- * - mm: 2-digit minutes (e.g., 05)
2191
- * - m: 1 or 2-digit minutes (e.g., 5)
2192
- * - ss: 2-digit seconds (e.g., 09)
2193
- * - s: 1 or 2-digit seconds (e.g., 9)
2194
- * - A/a: AM/PM or am/pm
2195
- */
2196
- declare class CustomDateFormatService {
2197
- private locale;
2198
- private readonly monthNames;
2199
- private readonly weekdayNames;
2200
- constructor(locale?: string);
2201
- /**
2202
- * Set the locale for formatting
2203
- */
2204
- setLocale(locale: string): void;
2205
- /**
2206
- * Format a date using a custom pattern
2207
- *
2208
- * @param date - The date to format
2209
- * @param pattern - The custom format pattern
2210
- * @returns Formatted date string
2211
- */
2212
- format(date: Date, pattern: string): string;
2213
- /**
2214
- * Parse a formatted date string back to a Date object
2215
- * Note: This is a best-effort implementation and may not work for all patterns
2216
- *
2217
- * @param dateString - The date string to parse
2218
- * @param pattern - The format pattern used
2219
- * @returns Parsed Date object, or null if parsing fails
2220
- */
2221
- parse(dateString: string, _pattern: string): Date | null;
2222
- private getMonthNames;
2223
- private initializeLocaleData;
2224
- private getWeekdayNames;
2225
- }
2226
-
2227
- /**
2228
- * Theme builder service for generating CSS-in-JS styles and managing themes
2229
- */
2230
- declare class ThemeBuilderService implements OnDestroy {
2231
- private readonly platformId;
2232
- private styleElement;
2233
- private scopedStyleElements;
2234
- /**
2235
- * Map theme color keys to actual CSS variable names
2236
- */
2237
- private mapColorKey;
2238
- /**
2239
- * Map typography keys to actual CSS variable names
2240
- */
2241
- private mapTypographyKey;
2242
- /**
2243
- * Generate CSS variables from a theme object
2244
- */
2245
- generateTheme(theme: DatepickerTheme): string;
2246
- /**
2247
- * Apply theme to a specific element or globally
2248
- * @param theme The theme to apply
2249
- * @param targetElement Optional specific element to apply theme to. If not provided, applies globally.
2250
- */
2251
- applyTheme(theme: DatepickerTheme, targetElement?: HTMLElement): void;
2252
- /**
2253
- * Apply theme variables directly to all datepicker elements (for global theme)
2254
- * Optimized version with batch DOM operations
2255
- */
2256
- private applyToElements;
2257
- /**
2258
- * Generate CSS-in-JS style object (for styled-components, emotion, etc.)
2259
- */
2260
- generateStyleObject(theme: DatepickerTheme): Record<string, string>;
2261
- /**
2262
- * Remove applied theme
2263
- * @param targetElement Optional specific element to remove theme from. If not provided, removes from all.
2264
- */
2265
- removeTheme(targetElement?: HTMLElement): void;
2266
- /**
2267
- * Get current theme from CSS variables
2268
- */
2269
- getCurrentTheme(selector?: string): Partial<DatepickerTheme>;
2270
- /**
2271
- * Clean up all themes and resources when service is destroyed
2272
- */
2273
- cleanupAllThemes(): void;
2274
- ngOnDestroy(): void;
2275
- static ɵfac: i0.ɵɵFactoryDeclaration<ThemeBuilderService, never>;
2276
- static ɵprov: i0.ɵɵInjectableDeclaration<ThemeBuilderService>;
2277
- }
2278
- /**
2279
- * Datepicker theme interface
2280
- */
2281
- interface DatepickerTheme {
2282
- colors?: {
2283
- primary?: string;
2284
- secondary?: string;
2285
- background?: string;
2286
- surface?: string;
2287
- text?: string;
2288
- textSecondary?: string;
2289
- border?: string;
2290
- hover?: string;
2291
- active?: string;
2292
- disabled?: string;
2293
- error?: string;
2294
- [key: string]: string | undefined;
2295
- };
2296
- spacing?: {
2297
- xs?: string;
2298
- sm?: string;
2299
- md?: string;
2300
- lg?: string;
2301
- xl?: string;
2302
- [key: string]: string | undefined;
2303
- };
2304
- typography?: {
2305
- fontFamily?: string;
2306
- fontSize?: string;
2307
- fontWeight?: string;
2308
- lineHeight?: string;
2309
- [key: string]: string | undefined;
2310
- };
2311
- borderRadius?: {
2312
- sm?: string;
2313
- md?: string;
2314
- lg?: string;
2315
- full?: string;
2316
- [key: string]: string | undefined;
2317
- };
2318
- shadows?: {
2319
- sm?: string;
2320
- md?: string;
2321
- lg?: string;
2322
- /** Focus ring (e.g. input focus). Use a color-mix or rgba for 15% opacity. Example: 0 0 0 3px color-mix(in srgb, var(--datepicker-primary-color) 15%, transparent) */
2323
- focus?: string;
2324
- [key: string]: string | undefined;
2325
- };
2326
- }
2327
-
2328
- /**
2329
- * Date preset interface
2330
- */
2331
- interface DatePreset {
2332
- id: string;
2333
- name: string;
2334
- value: DatepickerValue;
2335
- createdAt: Date;
2336
- updatedAt: Date;
2337
- category?: string;
2338
- description?: string;
2339
- }
2340
- /**
2341
- * Service for managing date presets with localStorage persistence
2342
- */
2343
- declare class DatePresetsService {
2344
- private readonly platformId;
2345
- private readonly storageKey;
2346
- private presets;
2347
- constructor();
2348
- /**
2349
- * Save a date preset
2350
- */
2351
- savePreset(preset: Omit<DatePreset, 'id' | 'createdAt' | 'updatedAt'>): DatePreset;
2352
- /**
2353
- * Update an existing preset
2354
- */
2355
- updatePreset(id: string, updates: Partial<Omit<DatePreset, 'id' | 'createdAt'>>): DatePreset | null;
2356
- /**
2357
- * Get a preset by ID
2358
- */
2359
- getPreset(id: string): DatePreset | null;
2360
- /**
2361
- * Get all presets
2362
- */
2363
- getAllPresets(): DatePreset[];
2364
- /**
2365
- * Get presets by category
2366
- */
2367
- getPresetsByCategory(category: string): DatePreset[];
2368
- /**
2369
- * Get all categories
2370
- */
2371
- getCategories(): string[];
2372
- /**
2373
- * Delete a preset
2374
- */
2375
- deletePreset(id: string): boolean;
2376
- /**
2377
- * Clear all presets
2378
- */
2379
- clearPresets(): void;
2380
- /**
2381
- * Apply a preset value (returns the value, not the preset object)
2382
- */
2383
- applyPreset(id: string): DatepickerValue | null;
2384
- /**
2385
- * Check if a preset exists
2386
- */
2387
- hasPreset(id: string): boolean;
2388
- /**
2389
- * Get preset count
2390
- */
2391
- getPresetCount(): number;
2392
- /**
2393
- * Export presets to JSON
2394
- */
2395
- exportPresets(): string;
2396
- /**
2397
- * Import presets from JSON
2398
- */
2399
- importPresets(jsonString: string, merge?: boolean): {
2400
- imported: number;
2401
- errors: number;
2402
- };
2403
- private loadPresets;
2404
- private persistPresets;
2405
- private generateId;
2406
- private cloneValue;
2407
- private deserializeValue;
2408
- static ɵfac: i0.ɵɵFactoryDeclaration<DatePresetsService, never>;
2409
- static ɵprov: i0.ɵɵInjectableDeclaration<DatePresetsService>;
2410
- }
2411
-
2412
- declare class AriaLiveService implements OnDestroy {
2413
- private readonly platformId;
2414
- private readonly isBrowser;
2415
- private politeRegion;
2416
- private assertiveRegion;
2417
- private politeClearTimeoutId;
2418
- private assertiveClearTimeoutId;
2419
- private debounceTimeoutId;
2420
- private announcementQueue;
2421
- private readonly DEBOUNCE_DELAY;
2422
- private readonly CLEAR_DELAY;
2423
- constructor();
2424
- /**
2425
- * Announce a message to screen readers with improved timing and queue management
2426
- */
2427
- announce(message: string, priority?: 'polite' | 'assertive'): void;
2428
- /**
2429
- * Process queued announcements, keeping only the most recent for each priority
2430
- */
2431
- private processAnnouncementQueue;
2432
- /**
2433
- * Announce to a specific live region
2434
- */
2435
- private announceToRegion;
2436
- /**
2437
- * Set announcement text and schedule cleanup
2438
- */
2439
- private setAnnouncement;
2440
- /**
2441
- * Create a live region for announcements
2442
- */
2443
- private createLiveRegion;
2444
- ngOnDestroy(): void;
2445
- destroy(): void;
2446
- static ɵfac: i0.ɵɵFactoryDeclaration<AriaLiveService, never>;
2447
- static ɵprov: i0.ɵɵInjectableDeclaration<AriaLiveService>;
2448
- }
2449
-
2450
- declare class FocusTrapService implements OnDestroy {
2451
- private activeTraps;
2452
- private focusableSelectors;
2453
- /**
2454
- * Trap focus within an element and restore focus on cleanup
2455
- */
2456
- trapFocus(elementRef: ElementRef<HTMLElement>): () => void;
2457
- /**
2458
- * Remove focus trap and restore previous focus
2459
- */
2460
- private removeFocusTrap;
2461
- private getFirstFocusable;
2462
- private getLastFocusable;
2463
- ngOnDestroy(): void;
2464
- static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrapService, never>;
2465
- static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrapService>;
2466
- }
2467
-
2468
- declare class HapticFeedbackService {
2469
- private readonly platformId;
2470
- private readonly isBrowser;
2471
- private readonly isSupported;
2472
- /**
2473
- * Trigger light haptic feedback (short vibration)
2474
- */
2475
- light(): void;
2476
- selection(): void;
2477
- medium(): void;
2478
- heavy(): void;
2479
- /**
2480
- * Trigger custom vibration pattern
2481
- * @param pattern Vibration pattern in milliseconds
2482
- */
2483
- custom(pattern: number | number[]): void;
2484
- static ɵfac: i0.ɵɵFactoryDeclaration<HapticFeedbackService, never>;
2485
- static ɵprov: i0.ɵɵInjectableDeclaration<HapticFeedbackService>;
2486
- }
2487
-
2488
- export { AriaLiveService, CustomDateFormatService, CustomSelectComponent, DATEPICKER_CONFIG, DEFAULT_ANIMATION_CONFIG, DEFAULT_DATEPICKER_CONFIG, DatePresetsService, DefaultTranslationService, FieldSyncService, FocusTrapService, HapticFeedbackService, LocaleRegistryService, NativeDateAdapter, NgxsmkDatepickerComponent, NgxsmkDatepickerModule, ThemeBuilderService, TranslationRegistryService, addMonths, convertTimezone, exportToCsv, exportToIcs, exportToJson, formatDateWithTimezone, formatLocaleNumber, generateDecadeGrid, generateMonthOptions, generateTimeOptions, generateWeekDays, generateYearGrid, generateYearOptions, get24Hour, getEndOfDay, getEndOfMonth, getFirstDayOfWeek, getStartOfDay, getStartOfMonth, getTimezoneOffset, importFromCsv, importFromIcs, importFromJson, isSameDay, isValidTimezone, normalizeDate, parseDateWithTimezone, processDateRanges, provideDatepickerConfig, subtractDays, update12HourState };
2489
- export type { AnimationConfig, CalendarSystem, DateAdapter, DateFormatHook, DateInput, DatePreset, DateRange, DatepickerConfig, DatepickerHooks, DatepickerTheme, DatepickerTranslations, DatepickerValue, DayCellRenderHook, EventHook, ExportOptions, HolidayProvider, KeyboardShortcutContext, KeyboardShortcutHelp, KeyboardShortcutHook, LocaleData, PartialDatepickerTranslations, SignalFormField, SignalFormFieldConfig, TranslationService, ValidationHook };