ngxsmk-datepicker 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +16 -7
  2. package/fesm2022/ngxsmk-datepicker.mjs +250 -295
  3. package/fesm2022/ngxsmk-datepicker.mjs.map +1 -1
  4. package/package.json +5 -5
  5. package/types/ngxsmk-datepicker.d.ts +0 -9
package/fesm2022/ngxsmk-datepicker.mjs CHANGED
@@ -4,10 +4,6 @@ import * as i1 from '@angular/common';
4
4
  import { CommonModule, DatePipe } from '@angular/common';
5
5
  import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
6
6
 
7
- /**
8
- * Date utility functions for ngxsmk-datepicker
9
- * Extracted to improve tree-shaking and reduce bundle size
10
- */
11
7
  function getStartOfDay(d) {
12
8
  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
13
9
  }
@@ -46,10 +42,6 @@ function normalizeDate(date) {
46
42
  return d;
47
43
  }
48
44
 
49
- /**
50
- * Calendar utility functions for ngxsmk-datepicker
51
- * Optimized for performance and tree-shaking
52
- */
53
45
  /**
54
46
  * Generate month options for dropdown
55
47
  */
@@ -230,13 +222,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ng
230
222
  args: ['document:click', ['$event']]
231
223
  }] } });
232
224
 
233
- /**
234
- * Performance utilities for ngxsmk-datepicker
235
- * Optimized for better runtime performance
236
- */
237
- /**
238
- * Memoization decorator for expensive computations
239
- */
240
225
  function memoize(fn, keyGenerator) {
241
226
  const cache = new Map();
242
227
  return ((...args) => {
@@ -249,9 +234,6 @@ function memoize(fn, keyGenerator) {
249
234
  return result;
250
235
  });
251
236
  }
252
- /**
253
- * Debounce function for performance optimization
254
- */
255
237
  function debounce(func, wait) {
256
238
  let timeout = null;
257
239
  return (...args) => {
@@ -263,9 +245,6 @@ function debounce(func, wait) {
263
245
  }, wait);
264
246
  };
265
247
  }
266
- /**
267
- * Throttle function for performance optimization
268
- */
269
248
  function throttle(func, limit) {
270
249
  let inThrottle = false;
271
250
  return (...args) => {
@@ -276,9 +255,6 @@ function throttle(func, limit) {
276
255
  }
277
256
  };
278
257
  }
279
- /**
280
- * Create a shallow comparison function for objects
281
- */
282
258
  function shallowEqual(a, b) {
283
259
  const keysA = Object.keys(a);
284
260
  const keysB = Object.keys(b);
@@ -292,12 +268,9 @@ function shallowEqual(a, b) {
292
268
  }
293
269
  return true;
294
270
  }
295
- /**
296
- * Optimized date comparison for calendar rendering
297
- */
298
271
  function createDateComparator() {
299
272
  const cache = new Map();
300
- const MAX_CACHE_SIZE = 1000; // Prevent memory leaks
273
+ const MAX_CACHE_SIZE = 1000;
301
274
  return (date1, date2) => {
302
275
  if (!date1 || !date2)
303
276
  return date1 === date2;
@@ -308,7 +281,6 @@ function createDateComparator() {
308
281
  const result = (date1.getFullYear() === date2.getFullYear() &&
309
282
  date1.getMonth() === date2.getMonth() &&
310
283
  date1.getDate() === date2.getDate());
311
- // Prevent cache from growing too large
312
284
  if (cache.size >= MAX_CACHE_SIZE) {
313
285
  const firstKey = cache.keys().next().value;
314
286
  if (firstKey !== undefined) {
@@ -319,9 +291,6 @@ function createDateComparator() {
319
291
  return result;
320
292
  };
321
293
  }
322
- /**
323
- * Optimized array filtering with caching
324
- */
325
294
  function createFilteredArray(source, filterFn, cacheKey) {
326
295
  const cache = new Map();
327
296
  const key = cacheKey || JSON.stringify(source);
@@ -332,12 +301,7 @@ function createFilteredArray(source, filterFn, cacheKey) {
332
301
  cache.set(key, result);
333
302
  return result;
334
303
  }
335
- /**
336
- * Clear all caches to prevent memory leaks
337
- */
338
304
  function clearAllCaches() {
339
- // This would be called from the component's ngOnDestroy
340
- // Implementation depends on how caches are managed globally
341
305
  }
342
306
 
343
307
  class NgxsmkDatepickerComponent {
@@ -501,6 +465,7 @@ class NgxsmkDatepickerComponent {
501
465
  this._internalValue = val;
502
466
  this.initializeValue(val);
503
467
  this.generateCalendar();
468
+ this.cdr.markForCheck();
504
469
  }
505
470
  registerOnChange(fn) {
506
471
  this.onChange = fn;
@@ -600,6 +565,7 @@ class NgxsmkDatepickerComponent {
600
565
  if (changes['locale']) {
601
566
  this.generateLocaleData();
602
567
  this.generateCalendar();
568
+ this.cdr.markForCheck();
603
569
  }
604
570
  if (changes['minuteInterval']) {
605
571
  this.generateTimeOptions();
@@ -609,12 +575,15 @@ class NgxsmkDatepickerComponent {
609
575
  if (changes['value']) {
610
576
  const newValue = changes['value'].currentValue;
611
577
  if (!this.isValueEqual(newValue, this._internalValue)) {
612
- this.writeValue(newValue);
578
+ this._internalValue = newValue;
579
+ this.initializeValue(newValue);
580
+ this.generateCalendar();
581
+ this.cdr.markForCheck();
613
582
  }
614
583
  }
615
- // Rerun calendar generation if provider changes to refresh disabled states
616
584
  if (changes['holidayProvider'] || changes['disableHolidays'] || changes['disabledDates']) {
617
585
  this.generateCalendar();
586
+ this.cdr.markForCheck();
618
587
  }
619
588
  if (changes['startAt']) {
620
589
  if (!this._internalValue && this._startAtDate) {
@@ -622,24 +591,29 @@ class NgxsmkDatepickerComponent {
622
591
  this._currentMonth = this.currentDate.getMonth();
623
592
  this._currentYear = this.currentDate.getFullYear();
624
593
  this.generateCalendar();
594
+ this.cdr.markForCheck();
625
595
  }
626
596
  }
627
- // Handle minDate changes - if minDate is set and is in the future,
628
- // and we don't have a current value, update the view to show minDate's month
629
- if (changes['minDate'] && !this._internalValue) {
630
- if (this._minDate) {
597
+ if (changes['minDate']) {
598
+ this.generateCalendar();
599
+ this.cdr.markForCheck();
600
+ if (!this._internalValue && this._minDate) {
631
601
  const today = new Date();
632
602
  const minDateOnly = getStartOfDay(this._minDate);
633
603
  const todayOnly = getStartOfDay(today);
634
- // If minDate is in the future, update the view to show minDate's month
635
604
  if (minDateOnly.getTime() > todayOnly.getTime()) {
636
605
  this.currentDate = new Date(this._minDate);
637
606
  this._currentMonth = this.currentDate.getMonth();
638
607
  this._currentYear = this.currentDate.getFullYear();
639
608
  this.generateCalendar();
609
+ this.cdr.markForCheck();
640
610
  }
641
611
  }
642
612
  }
613
+ if (changes['maxDate']) {
614
+ this.generateCalendar();
615
+ this.cdr.markForCheck();
616
+ }
643
617
  }
644
618
  get24Hour(displayHour, isPm) {
645
619
  return get24Hour(displayHour, isPm);
@@ -675,19 +649,15 @@ class NgxsmkDatepickerComponent {
675
649
  initialDate = this.selectedDates.length > 0 ? this.selectedDates[this.selectedDates.length - 1] : null;
676
650
  }
677
651
  }
678
- // Determine the initial view date
679
652
  let viewCenterDate = initialDate || this._startAtDate;
680
- // If no specific date is set and minDate is in the future, use minDate's month
681
653
  if (!viewCenterDate && this._minDate) {
682
654
  const today = new Date();
683
655
  const minDateOnly = getStartOfDay(this._minDate);
684
656
  const todayOnly = getStartOfDay(today);
685
- // If minDate is in the future, use minDate as the initial view
686
657
  if (minDateOnly.getTime() > todayOnly.getTime()) {
687
658
  viewCenterDate = this._minDate;
688
659
  }
689
660
  }
690
- // Fallback to current date if no other date is determined
691
661
  if (!viewCenterDate) {
692
662
  viewCenterDate = new Date();
693
663
  }
@@ -731,7 +701,6 @@ class NgxsmkDatepickerComponent {
731
701
  }
732
702
  parseDateString(dateString) {
733
703
  try {
734
- // Handle MM/DD/YYYY format
735
704
  const date = new Date(dateString);
736
705
  if (isNaN(date.getTime())) {
737
706
  return null;
@@ -785,7 +754,6 @@ class NgxsmkDatepickerComponent {
785
754
  if (!date)
786
755
  return false;
787
756
  const dateOnly = getStartOfDay(date);
788
- // 1. Check disabled dates array
789
757
  if (this.disabledDates.length > 0) {
790
758
  for (const disabledDate of this.disabledDates) {
791
759
  let parsedDate;
@@ -800,11 +768,9 @@ class NgxsmkDatepickerComponent {
800
768
  }
801
769
  }
802
770
  }
803
- // 2. Check holiday provider for disabling
804
771
  if (this.holidayProvider && this.disableHolidays && this.holidayProvider.isHoliday(dateOnly)) {
805
772
  return true;
806
773
  }
807
- // 3. Check min/max date
808
774
  if (this._minDate) {
809
775
  const minDateOnly = getStartOfDay(this._minDate);
810
776
  if (dateOnly.getTime() < minDateOnly.getTime())
@@ -815,7 +781,6 @@ class NgxsmkDatepickerComponent {
815
781
  if (dateOnly.getTime() > maxDateOnly.getTime())
816
782
  return true;
817
783
  }
818
- // 4. Check custom invalid date function
819
784
  return this.isInvalidDate(date);
820
785
  }
821
786
  isMultipleSelected(d) {
@@ -852,7 +817,6 @@ class NgxsmkDatepickerComponent {
852
817
  onDateClick(day) {
853
818
  if (!day || this.disabled)
854
819
  return;
855
- // Only check isDateDisabled for current month days
856
820
  if (this.isCurrentMonth(day) && this.isDateDisabled(day))
857
821
  return;
858
822
  const dateToToggle = getStartOfDay(day);
@@ -929,7 +893,6 @@ class NgxsmkDatepickerComponent {
929
893
  const lastDayOfMonth = new Date(year, month + 1, 0);
930
894
  const startDayOfWeek = firstDayOfMonth.getDay();
931
895
  const emptyCellCount = (startDayOfWeek - this.firstDayOfWeek + 7) % 7;
932
- // Add previous month's days instead of null values
933
896
  const previousMonth = month === 0 ? 11 : month - 1;
934
897
  const previousYear = month === 0 ? year - 1 : year;
935
898
  const lastDayOfPreviousMonth = new Date(previousYear, previousMonth + 1, 0);
@@ -956,15 +919,12 @@ class NgxsmkDatepickerComponent {
956
919
  changeMonth(delta) {
957
920
  if (this.disabled)
958
921
  return;
959
- // Check if going back is disabled due to minDate constraint
960
922
  if (delta < 0 && this.isBackArrowDisabled)
961
923
  return;
962
924
  const newDate = addMonths(this.currentDate, delta);
963
- // Update the data immediately (no animation)
964
925
  this.currentDate = newDate;
965
926
  this._currentMonth = newDate.getMonth();
966
927
  this._currentYear = newDate.getFullYear();
967
- // Generate new calendar view
968
928
  this.generateCalendar();
969
929
  this.action.emit({ type: 'monthChanged', payload: { delta: delta } });
970
930
  this.cdr.markForCheck();
@@ -988,139 +948,134 @@ class NgxsmkDatepickerComponent {
988
948
  return dTime > startTime && dTime < endTime;
989
949
  }
990
950
  ngOnDestroy() {
991
- // Clean up any subscriptions or timers if needed
992
951
  this.selectedDate = null;
993
952
  this.selectedDates = [];
994
953
  this.startDate = null;
995
954
  this.endDate = null;
996
955
  this.hoveredDate = null;
997
956
  this._internalValue = null;
998
- // Clear any cached data
999
- if (this.dateComparator && typeof this.dateComparator === 'function') {
1000
- // Clear any internal caches if they exist
1001
- }
1002
957
  }
1003
958
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1004
959
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.1", type: NgxsmkDatepickerComponent, isStandalone: true, selector: "ngxsmk-datepicker", inputs: { mode: "mode", isInvalidDate: "isInvalidDate", showRanges: "showRanges", showTime: "showTime", minuteInterval: "minuteInterval", holidayProvider: "holidayProvider", disableHolidays: "disableHolidays", disabledDates: "disabledDates", placeholder: "placeholder", inline: "inline", value: "value", startAt: "startAt", locale: "locale", theme: "theme", disabledState: "disabledState", minDate: "minDate", maxDate: "maxDate", ranges: "ranges" }, outputs: { valueChange: "valueChange", action: "action" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.dark-theme": "this.isDarkMode" } }, providers: [{
1005
960
  provide: NG_VALUE_ACCESSOR,
1006
961
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
1007
962
  multi: true
1008
- }], usesOnChanges: true, ngImport: i0, template: `
1009
- <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
1010
- @if (!isInlineMode) {
1011
- <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
1012
- <input type="text"
1013
- [value]="displayValue"
1014
- [placeholder]="placeholder"
1015
- readonly
1016
- [disabled]="disabled"
1017
- class="ngxsmk-display-input">
1018
- <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
1019
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
1020
- </button>
1021
- </div>
1022
- }
1023
-
1024
- @if (isCalendarVisible) {
1025
- <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
1026
- <div class="ngxsmk-datepicker-container">
1027
- @if (showRanges && rangesArray.length > 0 && mode === 'range') {
1028
- <div class="ngxsmk-ranges-container">
1029
- <ul>
1030
- @for (range of rangesArray; track trackByRange($index, range)) {
1031
- <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
1032
- }
1033
- </ul>
1034
- </div>
1035
- }
1036
- <div class="ngxsmk-calendar-container">
1037
- <div class="ngxsmk-header">
1038
- <div class="ngxsmk-month-year-selects">
1039
- <ngxsmk-custom-select class="month-select" [options]="monthOptions"
1040
- [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
1041
- <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
1042
- </div>
1043
- <div class="ngxsmk-nav-buttons">
1044
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
1045
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1046
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1047
- d="M328 112L184 256l144 144"/>
1048
- </svg>
1049
- </button>
1050
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
1051
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1052
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1053
- d="M184 112l144 144-144 144"/>
1054
- </svg>
1055
- </button>
1056
- </div>
1057
- </div>
1058
- <div class="ngxsmk-days-grid-wrapper">
1059
- <div class="ngxsmk-days-grid">
1060
- @for (day of weekDays; track day) {
1061
- <div class="ngxsmk-day-name">{{ day }}</div>
1062
- }
1063
- @for (day of daysInMonth; track trackByDay($index, day)) {
1064
- <div class="ngxsmk-day-cell"
1065
- [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1066
- [class.today]="isSameDayMemo(day, today)"
1067
- [class.holiday]="isHolidayMemo(day)"
1068
- [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1069
- [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1070
- [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1071
- [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1072
- [class.in-range]="mode === 'range' && isInRange(day)"
1073
- [class.preview-range]="isPreviewInRange(day)"
1074
- (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1075
- @if (day) {
1076
- <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1077
- }
1078
- </div>
1079
- }
1080
- </div>
1081
- </div>
1082
-
1083
- @if (showTime) {
1084
- <div class="ngxsmk-time-selection">
1085
- <span class="ngxsmk-time-label">Time:</span>
1086
- <ngxsmk-custom-select
1087
- class="hour-select"
1088
- [options]="hourOptions"
1089
- [(value)]="currentDisplayHour"
1090
- (valueChange)="onTimeChange()"
1091
- [disabled]="disabled"
1092
- ></ngxsmk-custom-select>
1093
- <span class="ngxsmk-time-separator">:</span>
1094
- <ngxsmk-custom-select
1095
- class="minute-select"
1096
- [options]="minuteOptions"
1097
- [(value)]="currentMinute"
1098
- (valueChange)="onTimeChange()"
1099
- [disabled]="disabled"
1100
- ></ngxsmk-custom-select>
1101
- <ngxsmk-custom-select
1102
- class="ampm-select"
1103
- [options]="ampmOptions"
1104
- [(value)]="isPm"
1105
- (valueChange)="onTimeChange()"
1106
- [disabled]="disabled"
1107
- ></ngxsmk-custom-select>
1108
- </div>
1109
- }
1110
-
1111
- <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1112
- <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1113
- Clear
1114
- </button>
1115
- <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1116
- Close
1117
- </button>
1118
- </div>
1119
- </div>
1120
- </div>
1121
- </div>
1122
- }
1123
- </div>
963
+ }], usesOnChanges: true, ngImport: i0, template: `
964
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
965
+ @if (!isInlineMode) {
966
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
967
+ <input type="text"
968
+ [value]="displayValue"
969
+ [placeholder]="placeholder"
970
+ readonly
971
+ [disabled]="disabled"
972
+ class="ngxsmk-display-input">
973
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
974
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
975
+ </button>
976
+ </div>
977
+ }
978
+
979
+ @if (isCalendarVisible) {
980
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
981
+ <div class="ngxsmk-datepicker-container">
982
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
983
+ <div class="ngxsmk-ranges-container">
984
+ <ul>
985
+ @for (range of rangesArray; track trackByRange($index, range)) {
986
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
987
+ }
988
+ </ul>
989
+ </div>
990
+ }
991
+ <div class="ngxsmk-calendar-container">
992
+ <div class="ngxsmk-header">
993
+ <div class="ngxsmk-month-year-selects">
994
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
995
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
996
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
997
+ </div>
998
+ <div class="ngxsmk-nav-buttons">
999
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
1000
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1001
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1002
+ d="M328 112L184 256l144 144"/>
1003
+ </svg>
1004
+ </button>
1005
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
1006
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1007
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1008
+ d="M184 112l144 144-144 144"/>
1009
+ </svg>
1010
+ </button>
1011
+ </div>
1012
+ </div>
1013
+ <div class="ngxsmk-days-grid-wrapper">
1014
+ <div class="ngxsmk-days-grid">
1015
+ @for (day of weekDays; track day) {
1016
+ <div class="ngxsmk-day-name">{{ day }}</div>
1017
+ }
1018
+ @for (day of daysInMonth; track trackByDay($index, day)) {
1019
+ <div class="ngxsmk-day-cell"
1020
+ [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1021
+ [class.today]="isSameDayMemo(day, today)"
1022
+ [class.holiday]="isHolidayMemo(day)"
1023
+ [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1024
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1025
+ [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1026
+ [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1027
+ [class.in-range]="mode === 'range' && isInRange(day)"
1028
+ [class.preview-range]="isPreviewInRange(day)"
1029
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1030
+ @if (day) {
1031
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1032
+ }
1033
+ </div>
1034
+ }
1035
+ </div>
1036
+ </div>
1037
+
1038
+ @if (showTime) {
1039
+ <div class="ngxsmk-time-selection">
1040
+ <span class="ngxsmk-time-label">Time:</span>
1041
+ <ngxsmk-custom-select
1042
+ class="hour-select"
1043
+ [options]="hourOptions"
1044
+ [(value)]="currentDisplayHour"
1045
+ (valueChange)="onTimeChange()"
1046
+ [disabled]="disabled"
1047
+ ></ngxsmk-custom-select>
1048
+ <span class="ngxsmk-time-separator">:</span>
1049
+ <ngxsmk-custom-select
1050
+ class="minute-select"
1051
+ [options]="minuteOptions"
1052
+ [(value)]="currentMinute"
1053
+ (valueChange)="onTimeChange()"
1054
+ [disabled]="disabled"
1055
+ ></ngxsmk-custom-select>
1056
+ <ngxsmk-custom-select
1057
+ class="ampm-select"
1058
+ [options]="ampmOptions"
1059
+ [(value)]="isPm"
1060
+ (valueChange)="onTimeChange()"
1061
+ [disabled]="disabled"
1062
+ ></ngxsmk-custom-select>
1063
+ </div>
1064
+ }
1065
+
1066
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1067
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1068
+ Clear
1069
+ </button>
1070
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1071
+ Close
1072
+ </button>
1073
+ </div>
1074
+ </div>
1075
+ </div>
1076
+ </div>
1077
+ }
1078
+ </div>
1124
1079
  `, isInline: true, styles: [":host{--datepicker-primary-color: #6d28d9;--datepicker-primary-contrast: #ffffff;--datepicker-range-background: #f5f3ff;--datepicker-background: #ffffff;--datepicker-text-color: #222428;--datepicker-subtle-text-color: #9ca3af;--datepicker-border-color: #e9e9e9;--datepicker-hover-background: #f0f0f0;--datepicker-font-size-base: 14px;--datepicker-font-size-sm: 12px;--datepicker-font-size-lg: 16px;--datepicker-font-size-xl: 18px;--datepicker-line-height: 1.4;--datepicker-spacing-xs: 4px;--datepicker-spacing-sm: 8px;--datepicker-spacing-md: 12px;--datepicker-spacing-lg: 16px;--datepicker-spacing-xl: 20px;display:inline-block;position:relative}:host(.dark-theme){--datepicker-range-background: rgba(139, 92, 246, .2);--datepicker-background: #1f2937;--datepicker-text-color: #d1d5db;--datepicker-subtle-text-color: #6b7280;--datepicker-border-color: #4b5563;--datepicker-hover-background: #374151}.ngxsmk-datepicker-wrapper{position:relative}.ngxsmk-input-group{display:flex;align-items:center;cursor:pointer;width:100%;min-width:150px;border:1px solid var(--datepicker-border-color, #ccc);border-radius:4px;background:var(--datepicker-background);transition:all .2s ease;position:relative;overflow:hidden}.ngxsmk-input-group:focus-within{border-color:var(--datepicker-primary-color);box-shadow:0 0 0 2px #6d28d91a}.ngxsmk-input-group:hover:not(.disabled){border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.has-value{border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.error{border-color:#dc2626;box-shadow:0 0 0 2px #dc26261a}.ngxsmk-input-group.success{border-color:#16a34a;box-shadow:0 0 0 2px #16a34a1a}.ngxsmk-input-group.disabled{cursor:not-allowed;opacity:.7}.ngxsmk-display-input{flex-grow:1;padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-sm);font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);color:var(--datepicker-text-color, #333);background:transparent;border:none;outline:none;cursor:pointer;transition:all .2s ease;min-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ngxsmk-display-input:disabled{background:var(--datepicker-hover-background, #f0f0f0);cursor:not-allowed;opacity:.6}.ngxsmk-display-input:focus{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-display-input::placeholder{color:var(--datepicker-subtle-text-color);font-style:italic}.ngxsmk-input-group:focus-within .ngxsmk-display-input{color:var(--datepicker-primary-color)}.ngxsmk-input-group:hover:not(.disabled) .ngxsmk-display-input{color:var(--datepicker-text-color)}.ngxsmk-input-group.has-value .ngxsmk-display-input{font-weight:500;color:var(--datepicker-text-color)}.ngxsmk-input-group:not(.has-value) .ngxsmk-display-input{color:var(--datepicker-subtle-text-color)}.ngxsmk-input-group.error .ngxsmk-display-input{color:#dc2626;border-color:#dc2626}.ngxsmk-input-group.success .ngxsmk-display-input{color:#16a34a;border-color:#16a34a}.ngxsmk-input-group.compact{min-width:120px;padding:var(--datepicker-spacing-xs)}.ngxsmk-input-group.compact .ngxsmk-display-input{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs)}.ngxsmk-input-group.large{min-width:200px;padding:var(--datepicker-spacing-md)}.ngxsmk-input-group.large .ngxsmk-display-input{font-size:var(--datepicker-font-size-lg);padding:var(--datepicker-spacing-md)}.ngxsmk-input-group.with-icon .ngxsmk-display-input{padding-left:32px}.ngxsmk-input-group .ngxsmk-input-icon{position:absolute;left:var(--datepicker-spacing-sm);top:50%;transform:translateY(-50%);color:var(--datepicker-subtle-text-color);pointer-events:none}.ngxsmk-input-group.loading .ngxsmk-display-input{color:var(--datepicker-subtle-text-color);cursor:wait}.ngxsmk-input-group.loading:after{content:\"\";position:absolute;right:var(--datepicker-spacing-sm);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--datepicker-border-color);border-top:2px solid var(--datepicker-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.ngxsmk-clear-button{background:none;border:none;padding:0 8px;cursor:pointer;color:var(--datepicker-subtle-text-color);line-height:1}.ngxsmk-clear-button svg{width:14px;height:14px}.ngxsmk-clear-button:hover{color:var(--datepicker-text-color)}.ngxsmk-popover-container{position:absolute;top:100%;left:0;z-index:10000;margin-top:8px}.ngxsmk-popover-container.ngxsmk-inline-container{position:static;margin-top:0}.ngxsmk-datepicker-wrapper.ngxsmk-inline-mode{display:block}.ngxsmk-datepicker-wrapper.ngxsmk-inline-mode .ngxsmk-datepicker-container{box-shadow:none}.ngxsmk-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:8px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-clear-button-footer,.ngxsmk-close-button{padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-md);border-radius:6px;font-size:var(--datepicker-font-size-sm);line-height:var(--datepicker-line-height);cursor:pointer;transition:background-color .2s;border:1px solid var(--datepicker-border-color)}.ngxsmk-clear-button-footer{background:none;color:var(--datepicker-subtle-text-color)}.ngxsmk-close-button{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast);border-color:var(--datepicker-primary-color)}.ngxsmk-close-button:hover:not(:disabled){opacity:.9}.ngxsmk-clear-button-footer:hover:not(:disabled){background-color:var(--datepicker-hover-background)}.ngxsmk-datepicker-container{display:flex;flex-direction:column;width:100%}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);border-radius:10px;padding:var(--datepicker-spacing-md);background:var(--datepicker-background);box-shadow:0 4px 10px #0000001a}.ngxsmk-ranges-container{width:100%;padding:var(--datepicker-spacing-md);border-right:none;background:var(--datepicker-hover-background);border-radius:10px}.ngxsmk-ranges-container ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-sm);margin-bottom:0;font-size:var(--datepicker-font-size-sm);line-height:var(--datepicker-line-height);border:1px solid var(--datepicker-border-color);border-radius:6px;cursor:pointer;transition:background-color .15s ease;flex-shrink:0}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-ranges-container li.disabled{cursor:not-allowed;opacity:.5;background-color:transparent!important;color:var(--datepicker-subtle-text-color, #9ca3af)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative;z-index:2;gap:4px}.ngxsmk-month-year-selects{display:flex;gap:4px}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 100px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 75px}.ngxsmk-nav-buttons{display:flex}.ngxsmk-nav-button{padding:6px;background:none;border:none;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover:not(:disabled){background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button:disabled{cursor:not-allowed;opacity:.5}.ngxsmk-nav-button svg{width:16px;height:16px}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-sm) 0;color:var(--datepicker-subtle-text-color);font-weight:600;line-height:var(--datepicker-line-height)}.ngxsmk-day-cell{height:32px;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-cell.holiday .ngxsmk-day-number{color:var(--datepicker-primary-color);text-decoration:underline dotted}.ngxsmk-day-number{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);position:relative;z-index:1}.ngxsmk-time-selection{display:flex;align-items:center;gap:var(--datepicker-spacing-xs);flex-wrap:wrap;margin-top:var(--datepicker-spacing-md);padding-top:var(--datepicker-spacing-sm);border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);color:var(--datepicker-subtle-text-color);margin-right:var(--datepicker-spacing-xs)}.ngxsmk-time-separator{font-weight:600;color:var(--datepicker-text-color)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 75px;height:28px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 75px}.ngxsmk-time-selection .hour-select,.ngxsmk-time-selection .minute-select,.ngxsmk-time-selection .ampm-select{--custom-select-width: 75px;--custom-select-height: 28px}.ngxsmk-time-selection app-custom-select:hover{border-color:var(--datepicker-primary-color)}.ngxsmk-time-selection app-custom-select:focus-within{border-color:var(--datepicker-primary-color);box-shadow:0 0 0 2px #6d28d933}.ngxsmk-time-selection .time-select-compact{--custom-select-width: 60px;--custom-select-height: 24px;font-size:var(--datepicker-font-size-sm)}.ngxsmk-time-selection .time-select-large{--custom-select-width: 90px;--custom-select-height: 36px;font-size:var(--datepicker-font-size-lg)}.ngxsmk-time-selection .time-select-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ngxsmk-time-selection app-custom-select{transition:border-color .2s ease,box-shadow .2s ease}.ngxsmk-time-selection app-custom-select.ngxsmk-time-select-animated{transition:all .2s cubic-bezier(.4,0,.2,1)}.ngxsmk-day-cell:not(.disabled):not(.empty):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number,.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{border:1px dashed var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected:hover .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.empty{opacity:1}.ngxsmk-day-cell.empty .ngxsmk-day-number{color:var(--datepicker-subtle-text-color)}:host(.dark-theme) .ngxsmk-day-cell.empty .ngxsmk-day-number{color:#6b7280}.ngxsmk-day-cell.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}@media(min-width:600px){.ngxsmk-datepicker-container{display:flex;flex-direction:row}.ngxsmk-calendar-container{padding:var(--datepicker-spacing-lg);box-shadow:0 4px 10px #0000001a;width:auto;border-radius:10px;min-height:280px}.ngxsmk-ranges-container{width:180px;padding:var(--datepicker-spacing-lg);border-bottom:none;background:var(--datepicker-background);border-radius:10px 0 0 10px}.ngxsmk-ranges-container ul{flex-direction:column;justify-content:flex-start;gap:0}.ngxsmk-ranges-container li{padding:var(--datepicker-spacing-sm);margin-bottom:var(--datepicker-spacing-sm);border:none;font-size:var(--datepicker-font-size-lg)}.ngxsmk-header{margin-bottom:var(--datepicker-spacing-md);gap:var(--datepicker-spacing-xs)}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.ngxsmk-nav-button{padding:var(--datepicker-spacing-sm)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-day-name{font-size:var(--datepicker-font-size-base);padding:var(--datepicker-spacing-sm) 0}.ngxsmk-day-cell{height:42px}.ngxsmk-day-number{width:38px;height:38px;font-size:var(--datepicker-font-size-lg)}.ngxsmk-time-selection{margin-top:var(--datepicker-spacing-lg);padding-top:var(--datepicker-spacing-md)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}.ngxsmk-time-selection .hour-select,.ngxsmk-time-selection .minute-select{--custom-select-width: 60px;--custom-select-height: 30px}.ngxsmk-time-selection .ampm-select{--custom-select-width: 70px;--custom-select-height: 30px}}@media(prefers-reduced-motion:reduce){.ngxsmk-days-grid{transition:none}.ngxsmk-days-grid.animate-forward,.ngxsmk-days-grid.animate-backward{transform:none;opacity:1}}@media(prefers-contrast:high){:host{--datepicker-border-color: #000000;--datepicker-text-color: #000000;--datepicker-subtle-text-color: #666666}.ngxsmk-day-cell.disabled{opacity:.3}}@media print{.ngxsmk-datepicker-wrapper{display:none}}.ngxsmk-day-cell:focus-visible .ngxsmk-day-number{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-nav-button:focus-visible,.ngxsmk-clear-button:focus-visible,.ngxsmk-clear-button-footer:focus-visible,.ngxsmk-close-button:focus-visible{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-day-cell,.ngxsmk-nav-button,.ngxsmk-clear-button{will-change:auto;transform:translateZ(0)}.ngxsmk-days-grid{contain:layout style paint;transform:translateZ(0)}.ngxsmk-day-cell{contain:layout style}.ngxsmk-day-number{contain:layout style paint}@media(max-width:480px){.ngxsmk-day-cell{height:28px}.ngxsmk-day-number{width:26px;height:26px;font-size:var(--datepicker-font-size-sm)}.ngxsmk-day-name{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs) 0}.ngxsmk-calendar-container{padding:var(--datepicker-spacing-sm)}.ngxsmk-header{margin-bottom:var(--datepicker-spacing-sm)}.ngxsmk-input-group{min-width:120px}.ngxsmk-display-input{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs)}.ngxsmk-clear-button{padding:0 var(--datepicker-spacing-xs)}.ngxsmk-clear-button svg{width:12px;height:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CustomSelectComponent, selector: "ngxsmk-custom-select", inputs: ["options", "value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1125
1080
  }
1126
1081
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
@@ -1129,122 +1084,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ng
1129
1084
  provide: NG_VALUE_ACCESSOR,
1130
1085
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
1131
1086
  multi: true
1132
- }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1133
- <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
1134
- @if (!isInlineMode) {
1135
- <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
1136
- <input type="text"
1137
- [value]="displayValue"
1138
- [placeholder]="placeholder"
1139
- readonly
1140
- [disabled]="disabled"
1141
- class="ngxsmk-display-input">
1142
- <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
1143
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
1144
- </button>
1145
- </div>
1146
- }
1147
-
1148
- @if (isCalendarVisible) {
1149
- <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
1150
- <div class="ngxsmk-datepicker-container">
1151
- @if (showRanges && rangesArray.length > 0 && mode === 'range') {
1152
- <div class="ngxsmk-ranges-container">
1153
- <ul>
1154
- @for (range of rangesArray; track trackByRange($index, range)) {
1155
- <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
1156
- }
1157
- </ul>
1158
- </div>
1159
- }
1160
- <div class="ngxsmk-calendar-container">
1161
- <div class="ngxsmk-header">
1162
- <div class="ngxsmk-month-year-selects">
1163
- <ngxsmk-custom-select class="month-select" [options]="monthOptions"
1164
- [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
1165
- <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
1166
- </div>
1167
- <div class="ngxsmk-nav-buttons">
1168
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
1169
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1170
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1171
- d="M328 112L184 256l144 144"/>
1172
- </svg>
1173
- </button>
1174
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
1175
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1176
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1177
- d="M184 112l144 144-144 144"/>
1178
- </svg>
1179
- </button>
1180
- </div>
1181
- </div>
1182
- <div class="ngxsmk-days-grid-wrapper">
1183
- <div class="ngxsmk-days-grid">
1184
- @for (day of weekDays; track day) {
1185
- <div class="ngxsmk-day-name">{{ day }}</div>
1186
- }
1187
- @for (day of daysInMonth; track trackByDay($index, day)) {
1188
- <div class="ngxsmk-day-cell"
1189
- [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1190
- [class.today]="isSameDayMemo(day, today)"
1191
- [class.holiday]="isHolidayMemo(day)"
1192
- [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1193
- [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1194
- [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1195
- [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1196
- [class.in-range]="mode === 'range' && isInRange(day)"
1197
- [class.preview-range]="isPreviewInRange(day)"
1198
- (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1199
- @if (day) {
1200
- <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1201
- }
1202
- </div>
1203
- }
1204
- </div>
1205
- </div>
1206
-
1207
- @if (showTime) {
1208
- <div class="ngxsmk-time-selection">
1209
- <span class="ngxsmk-time-label">Time:</span>
1210
- <ngxsmk-custom-select
1211
- class="hour-select"
1212
- [options]="hourOptions"
1213
- [(value)]="currentDisplayHour"
1214
- (valueChange)="onTimeChange()"
1215
- [disabled]="disabled"
1216
- ></ngxsmk-custom-select>
1217
- <span class="ngxsmk-time-separator">:</span>
1218
- <ngxsmk-custom-select
1219
- class="minute-select"
1220
- [options]="minuteOptions"
1221
- [(value)]="currentMinute"
1222
- (valueChange)="onTimeChange()"
1223
- [disabled]="disabled"
1224
- ></ngxsmk-custom-select>
1225
- <ngxsmk-custom-select
1226
- class="ampm-select"
1227
- [options]="ampmOptions"
1228
- [(value)]="isPm"
1229
- (valueChange)="onTimeChange()"
1230
- [disabled]="disabled"
1231
- ></ngxsmk-custom-select>
1232
- </div>
1233
- }
1234
-
1235
- <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1236
- <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1237
- Clear
1238
- </button>
1239
- <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1240
- Close
1241
- </button>
1242
- </div>
1243
- </div>
1244
- </div>
1245
- </div>
1246
- }
1247
- </div>
1087
+ }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1088
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
1089
+ @if (!isInlineMode) {
1090
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
1091
+ <input type="text"
1092
+ [value]="displayValue"
1093
+ [placeholder]="placeholder"
1094
+ readonly
1095
+ [disabled]="disabled"
1096
+ class="ngxsmk-display-input">
1097
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
1098
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
1099
+ </button>
1100
+ </div>
1101
+ }
1102
+
1103
+ @if (isCalendarVisible) {
1104
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
1105
+ <div class="ngxsmk-datepicker-container">
1106
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
1107
+ <div class="ngxsmk-ranges-container">
1108
+ <ul>
1109
+ @for (range of rangesArray; track trackByRange($index, range)) {
1110
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
1111
+ }
1112
+ </ul>
1113
+ </div>
1114
+ }
1115
+ <div class="ngxsmk-calendar-container">
1116
+ <div class="ngxsmk-header">
1117
+ <div class="ngxsmk-month-year-selects">
1118
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
1119
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
1120
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
1121
+ </div>
1122
+ <div class="ngxsmk-nav-buttons">
1123
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
1124
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1125
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1126
+ d="M328 112L184 256l144 144"/>
1127
+ </svg>
1128
+ </button>
1129
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
1130
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1131
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1132
+ d="M184 112l144 144-144 144"/>
1133
+ </svg>
1134
+ </button>
1135
+ </div>
1136
+ </div>
1137
+ <div class="ngxsmk-days-grid-wrapper">
1138
+ <div class="ngxsmk-days-grid">
1139
+ @for (day of weekDays; track day) {
1140
+ <div class="ngxsmk-day-name">{{ day }}</div>
1141
+ }
1142
+ @for (day of daysInMonth; track trackByDay($index, day)) {
1143
+ <div class="ngxsmk-day-cell"
1144
+ [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1145
+ [class.today]="isSameDayMemo(day, today)"
1146
+ [class.holiday]="isHolidayMemo(day)"
1147
+ [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1148
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1149
+ [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1150
+ [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1151
+ [class.in-range]="mode === 'range' && isInRange(day)"
1152
+ [class.preview-range]="isPreviewInRange(day)"
1153
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1154
+ @if (day) {
1155
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1156
+ }
1157
+ </div>
1158
+ }
1159
+ </div>
1160
+ </div>
1161
+
1162
+ @if (showTime) {
1163
+ <div class="ngxsmk-time-selection">
1164
+ <span class="ngxsmk-time-label">Time:</span>
1165
+ <ngxsmk-custom-select
1166
+ class="hour-select"
1167
+ [options]="hourOptions"
1168
+ [(value)]="currentDisplayHour"
1169
+ (valueChange)="onTimeChange()"
1170
+ [disabled]="disabled"
1171
+ ></ngxsmk-custom-select>
1172
+ <span class="ngxsmk-time-separator">:</span>
1173
+ <ngxsmk-custom-select
1174
+ class="minute-select"
1175
+ [options]="minuteOptions"
1176
+ [(value)]="currentMinute"
1177
+ (valueChange)="onTimeChange()"
1178
+ [disabled]="disabled"
1179
+ ></ngxsmk-custom-select>
1180
+ <ngxsmk-custom-select
1181
+ class="ampm-select"
1182
+ [options]="ampmOptions"
1183
+ [(value)]="isPm"
1184
+ (valueChange)="onTimeChange()"
1185
+ [disabled]="disabled"
1186
+ ></ngxsmk-custom-select>
1187
+ </div>
1188
+ }
1189
+
1190
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1191
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1192
+ Clear
1193
+ </button>
1194
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1195
+ Close
1196
+ </button>
1197
+ </div>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+ }
1202
+ </div>
1248
1203
  `, styles: [":host{--datepicker-primary-color: #6d28d9;--datepicker-primary-contrast: #ffffff;--datepicker-range-background: #f5f3ff;--datepicker-background: #ffffff;--datepicker-text-color: #222428;--datepicker-subtle-text-color: #9ca3af;--datepicker-border-color: #e9e9e9;--datepicker-hover-background: #f0f0f0;--datepicker-font-size-base: 14px;--datepicker-font-size-sm: 12px;--datepicker-font-size-lg: 16px;--datepicker-font-size-xl: 18px;--datepicker-line-height: 1.4;--datepicker-spacing-xs: 4px;--datepicker-spacing-sm: 8px;--datepicker-spacing-md: 12px;--datepicker-spacing-lg: 16px;--datepicker-spacing-xl: 20px;display:inline-block;position:relative}:host(.dark-theme){--datepicker-range-background: rgba(139, 92, 246, .2);--datepicker-background: #1f2937;--datepicker-text-color: #d1d5db;--datepicker-subtle-text-color: #6b7280;--datepicker-border-color: #4b5563;--datepicker-hover-background: #374151}.ngxsmk-datepicker-wrapper{position:relative}.ngxsmk-input-group{display:flex;align-items:center;cursor:pointer;width:100%;min-width:150px;border:1px solid var(--datepicker-border-color, #ccc);border-radius:4px;background:var(--datepicker-background);transition:all .2s ease;position:relative;overflow:hidden}.ngxsmk-input-group:focus-within{border-color:var(--datepicker-primary-color);box-shadow:0 0 0 2px #6d28d91a}.ngxsmk-input-group:hover:not(.disabled){border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.has-value{border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.error{border-color:#dc2626;box-shadow:0 0 0 2px #dc26261a}.ngxsmk-input-group.success{border-color:#16a34a;box-shadow:0 0 0 2px #16a34a1a}.ngxsmk-input-group.disabled{cursor:not-allowed;opacity:.7}.ngxsmk-display-input{flex-grow:1;padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-sm);font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);color:var(--datepicker-text-color, #333);background:transparent;border:none;outline:none;cursor:pointer;transition:all .2s ease;min-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ngxsmk-display-input:disabled{background:var(--datepicker-hover-background, #f0f0f0);cursor:not-allowed;opacity:.6}.ngxsmk-display-input:focus{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-display-input::placeholder{color:var(--datepicker-subtle-text-color);font-style:italic}.ngxsmk-input-group:focus-within .ngxsmk-display-input{color:var(--datepicker-primary-color)}.ngxsmk-input-group:hover:not(.disabled) .ngxsmk-display-input{color:var(--datepicker-text-color)}.ngxsmk-input-group.has-value .ngxsmk-display-input{font-weight:500;color:var(--datepicker-text-color)}.ngxsmk-input-group:not(.has-value) .ngxsmk-display-input{color:var(--datepicker-subtle-text-color)}.ngxsmk-input-group.error .ngxsmk-display-input{color:#dc2626;border-color:#dc2626}.ngxsmk-input-group.success .ngxsmk-display-input{color:#16a34a;border-color:#16a34a}.ngxsmk-input-group.compact{min-width:120px;padding:var(--datepicker-spacing-xs)}.ngxsmk-input-group.compact .ngxsmk-display-input{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs)}.ngxsmk-input-group.large{min-width:200px;padding:var(--datepicker-spacing-md)}.ngxsmk-input-group.large .ngxsmk-display-input{font-size:var(--datepicker-font-size-lg);padding:var(--datepicker-spacing-md)}.ngxsmk-input-group.with-icon .ngxsmk-display-input{padding-left:32px}.ngxsmk-input-group .ngxsmk-input-icon{position:absolute;left:var(--datepicker-spacing-sm);top:50%;transform:translateY(-50%);color:var(--datepicker-subtle-text-color);pointer-events:none}.ngxsmk-input-group.loading .ngxsmk-display-input{color:var(--datepicker-subtle-text-color);cursor:wait}.ngxsmk-input-group.loading:after{content:\"\";position:absolute;right:var(--datepicker-spacing-sm);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--datepicker-border-color);border-top:2px solid var(--datepicker-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.ngxsmk-clear-button{background:none;border:none;padding:0 8px;cursor:pointer;color:var(--datepicker-subtle-text-color);line-height:1}.ngxsmk-clear-button svg{width:14px;height:14px}.ngxsmk-clear-button:hover{color:var(--datepicker-text-color)}.ngxsmk-popover-container{position:absolute;top:100%;left:0;z-index:10000;margin-top:8px}.ngxsmk-popover-container.ngxsmk-inline-container{position:static;margin-top:0}.ngxsmk-datepicker-wrapper.ngxsmk-inline-mode{display:block}.ngxsmk-datepicker-wrapper.ngxsmk-inline-mode .ngxsmk-datepicker-container{box-shadow:none}.ngxsmk-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:8px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-clear-button-footer,.ngxsmk-close-button{padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-md);border-radius:6px;font-size:var(--datepicker-font-size-sm);line-height:var(--datepicker-line-height);cursor:pointer;transition:background-color .2s;border:1px solid var(--datepicker-border-color)}.ngxsmk-clear-button-footer{background:none;color:var(--datepicker-subtle-text-color)}.ngxsmk-close-button{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast);border-color:var(--datepicker-primary-color)}.ngxsmk-close-button:hover:not(:disabled){opacity:.9}.ngxsmk-clear-button-footer:hover:not(:disabled){background-color:var(--datepicker-hover-background)}.ngxsmk-datepicker-container{display:flex;flex-direction:column;width:100%}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);border-radius:10px;padding:var(--datepicker-spacing-md);background:var(--datepicker-background);box-shadow:0 4px 10px #0000001a}.ngxsmk-ranges-container{width:100%;padding:var(--datepicker-spacing-md);border-right:none;background:var(--datepicker-hover-background);border-radius:10px}.ngxsmk-ranges-container ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:var(--datepicker-spacing-sm) var(--datepicker-spacing-sm);margin-bottom:0;font-size:var(--datepicker-font-size-sm);line-height:var(--datepicker-line-height);border:1px solid var(--datepicker-border-color);border-radius:6px;cursor:pointer;transition:background-color .15s ease;flex-shrink:0}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-ranges-container li.disabled{cursor:not-allowed;opacity:.5;background-color:transparent!important;color:var(--datepicker-subtle-text-color, #9ca3af)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative;z-index:2;gap:4px}.ngxsmk-month-year-selects{display:flex;gap:4px}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 100px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 75px}.ngxsmk-nav-buttons{display:flex}.ngxsmk-nav-button{padding:6px;background:none;border:none;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover:not(:disabled){background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button:disabled{cursor:not-allowed;opacity:.5}.ngxsmk-nav-button svg{width:16px;height:16px}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-sm) 0;color:var(--datepicker-subtle-text-color);font-weight:600;line-height:var(--datepicker-line-height)}.ngxsmk-day-cell{height:32px;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-cell.holiday .ngxsmk-day-number{color:var(--datepicker-primary-color);text-decoration:underline dotted}.ngxsmk-day-number{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);position:relative;z-index:1}.ngxsmk-time-selection{display:flex;align-items:center;gap:var(--datepicker-spacing-xs);flex-wrap:wrap;margin-top:var(--datepicker-spacing-md);padding-top:var(--datepicker-spacing-sm);border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:var(--datepicker-font-size-base);line-height:var(--datepicker-line-height);color:var(--datepicker-subtle-text-color);margin-right:var(--datepicker-spacing-xs)}.ngxsmk-time-separator{font-weight:600;color:var(--datepicker-text-color)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 75px;height:28px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 75px}.ngxsmk-time-selection .hour-select,.ngxsmk-time-selection .minute-select,.ngxsmk-time-selection .ampm-select{--custom-select-width: 75px;--custom-select-height: 28px}.ngxsmk-time-selection app-custom-select:hover{border-color:var(--datepicker-primary-color)}.ngxsmk-time-selection app-custom-select:focus-within{border-color:var(--datepicker-primary-color);box-shadow:0 0 0 2px #6d28d933}.ngxsmk-time-selection .time-select-compact{--custom-select-width: 60px;--custom-select-height: 24px;font-size:var(--datepicker-font-size-sm)}.ngxsmk-time-selection .time-select-large{--custom-select-width: 90px;--custom-select-height: 36px;font-size:var(--datepicker-font-size-lg)}.ngxsmk-time-selection .time-select-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ngxsmk-time-selection app-custom-select{transition:border-color .2s ease,box-shadow .2s ease}.ngxsmk-time-selection app-custom-select.ngxsmk-time-select-animated{transition:all .2s cubic-bezier(.4,0,.2,1)}.ngxsmk-day-cell:not(.disabled):not(.empty):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number,.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{border:1px dashed var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected:hover .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.empty{opacity:1}.ngxsmk-day-cell.empty .ngxsmk-day-number{color:var(--datepicker-subtle-text-color)}:host(.dark-theme) .ngxsmk-day-cell.empty .ngxsmk-day-number{color:#6b7280}.ngxsmk-day-cell.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}@media(min-width:600px){.ngxsmk-datepicker-container{display:flex;flex-direction:row}.ngxsmk-calendar-container{padding:var(--datepicker-spacing-lg);box-shadow:0 4px 10px #0000001a;width:auto;border-radius:10px;min-height:280px}.ngxsmk-ranges-container{width:180px;padding:var(--datepicker-spacing-lg);border-bottom:none;background:var(--datepicker-background);border-radius:10px 0 0 10px}.ngxsmk-ranges-container ul{flex-direction:column;justify-content:flex-start;gap:0}.ngxsmk-ranges-container li{padding:var(--datepicker-spacing-sm);margin-bottom:var(--datepicker-spacing-sm);border:none;font-size:var(--datepicker-font-size-lg)}.ngxsmk-header{margin-bottom:var(--datepicker-spacing-md);gap:var(--datepicker-spacing-xs)}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.ngxsmk-nav-button{padding:var(--datepicker-spacing-sm)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-day-name{font-size:var(--datepicker-font-size-base);padding:var(--datepicker-spacing-sm) 0}.ngxsmk-day-cell{height:42px}.ngxsmk-day-number{width:38px;height:38px;font-size:var(--datepicker-font-size-lg)}.ngxsmk-time-selection{margin-top:var(--datepicker-spacing-lg);padding-top:var(--datepicker-spacing-md)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}.ngxsmk-time-selection .hour-select,.ngxsmk-time-selection .minute-select{--custom-select-width: 60px;--custom-select-height: 30px}.ngxsmk-time-selection .ampm-select{--custom-select-width: 70px;--custom-select-height: 30px}}@media(prefers-reduced-motion:reduce){.ngxsmk-days-grid{transition:none}.ngxsmk-days-grid.animate-forward,.ngxsmk-days-grid.animate-backward{transform:none;opacity:1}}@media(prefers-contrast:high){:host{--datepicker-border-color: #000000;--datepicker-text-color: #000000;--datepicker-subtle-text-color: #666666}.ngxsmk-day-cell.disabled{opacity:.3}}@media print{.ngxsmk-datepicker-wrapper{display:none}}.ngxsmk-day-cell:focus-visible .ngxsmk-day-number{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-nav-button:focus-visible,.ngxsmk-clear-button:focus-visible,.ngxsmk-clear-button-footer:focus-visible,.ngxsmk-close-button:focus-visible{outline:2px solid var(--datepicker-primary-color);outline-offset:2px}.ngxsmk-day-cell,.ngxsmk-nav-button,.ngxsmk-clear-button{will-change:auto;transform:translateZ(0)}.ngxsmk-days-grid{contain:layout style paint;transform:translateZ(0)}.ngxsmk-day-cell{contain:layout style}.ngxsmk-day-number{contain:layout style paint}@media(max-width:480px){.ngxsmk-day-cell{height:28px}.ngxsmk-day-number{width:26px;height:26px;font-size:var(--datepicker-font-size-sm)}.ngxsmk-day-name{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs) 0}.ngxsmk-calendar-container{padding:var(--datepicker-spacing-sm)}.ngxsmk-header{margin-bottom:var(--datepicker-spacing-sm)}.ngxsmk-input-group{min-width:120px}.ngxsmk-display-input{font-size:var(--datepicker-font-size-sm);padding:var(--datepicker-spacing-xs)}.ngxsmk-clear-button{padding:0 var(--datepicker-spacing-xs)}.ngxsmk-clear-button svg{width:12px;height:12px}}\n"] }]
1249
1204
  }], propDecorators: { mode: [{
1250
1205
  type: Input