ngxsmk-datepicker 2.2.0 → 2.2.3

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