ngxsmk-datepicker 1.7.0 → 1.8.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 (16) hide show
  1. package/README.md +9 -2
  2. package/fesm2022/ngxsmk-datepicker.mjs +279 -236
  3. package/fesm2022/ngxsmk-datepicker.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ngxsmk-datepicker.d.ts +24 -1
  6. package/fesm2022/ngxsmk-datepicker-export.utils-Eh4TSHKj.mjs +0 -101
  7. package/fesm2022/ngxsmk-datepicker-export.utils-Eh4TSHKj.mjs.map +0 -1
  8. package/fesm2022/ngxsmk-datepicker-format.utils-Bs1hnKRl.mjs +0 -49
  9. package/fesm2022/ngxsmk-datepicker-format.utils-Bs1hnKRl.mjs.map +0 -1
  10. package/fesm2022/ngxsmk-datepicker-timezone.utils-Cs2JyF49.mjs +0 -33
  11. package/fesm2022/ngxsmk-datepicker-timezone.utils-Cs2JyF49.mjs.map +0 -1
  12. package/fesm2022/ngxsmk-datepicker-validation.utils-CzyS3x6d.mjs +0 -51
  13. package/fesm2022/ngxsmk-datepicker-validation.utils-CzyS3x6d.mjs.map +0 -1
  14. package/fesm2022/ngxsmk-datepicker-week.utils-_wX9h6Cc.mjs +0 -41
  15. package/fesm2022/ngxsmk-datepicker-week.utils-_wX9h6Cc.mjs.map +0 -1
  16. package/index.d.ts +0 -665
package/fesm2022/ngxsmk-datepicker.mjs CHANGED
@@ -316,6 +316,17 @@ class NgxsmkDatepickerComponent {
316
316
  this.disabledDates = [];
317
317
  this.placeholder = 'Select Date';
318
318
  this.inline = false;
319
+ // Accessibility and customization
320
+ this.clearLabel = 'Clear';
321
+ this.closeLabel = 'Close';
322
+ this.prevMonthAriaLabel = 'Previous month';
323
+ this.nextMonthAriaLabel = 'Next month';
324
+ this.clearAriaLabel = 'Clear selection';
325
+ this.closeAriaLabel = 'Close calendar';
326
+ // Localization configurability
327
+ this.weekStart = null;
328
+ // Year dropdown configurability (range before/after current year)
329
+ this.yearRange = 10;
319
330
  this.isCalendarOpen = false;
320
331
  this._internalValue = null;
321
332
  this._value = null;
@@ -567,11 +578,20 @@ class NgxsmkDatepickerComponent {
567
578
  this.generateCalendar();
568
579
  this.cdr.markForCheck();
569
580
  }
581
+ if (changes['weekStart']) {
582
+ this.generateLocaleData();
583
+ this.generateCalendar();
584
+ this.cdr.markForCheck();
585
+ }
570
586
  if (changes['minuteInterval']) {
571
587
  this.generateTimeOptions();
572
588
  this.currentMinute = Math.floor(this.currentMinute / this.minuteInterval) * this.minuteInterval;
573
589
  this.onTimeChange();
574
590
  }
591
+ if (changes['yearRange']) {
592
+ this.generateDropdownOptions();
593
+ this.cdr.markForCheck();
594
+ }
575
595
  if (changes['value']) {
576
596
  const newValue = changes['value'].currentValue;
577
597
  if (!this.isValueEqual(newValue, this._internalValue)) {
@@ -719,7 +739,10 @@ class NgxsmkDatepickerComponent {
719
739
  generateLocaleData() {
720
740
  const year = new Date().getFullYear();
721
741
  this.monthOptions = generateMonthOptions(this.locale, year);
722
- this.firstDayOfWeek = getFirstDayOfWeek(this.locale);
742
+ // If weekStart is provided, use it; otherwise derive from locale
743
+ this.firstDayOfWeek = this.weekStart !== null && this.weekStart !== undefined
744
+ ? this.weekStart
745
+ : getFirstDayOfWeek(this.locale);
723
746
  this.weekDays = generateWeekDays(this.locale, this.firstDayOfWeek);
724
747
  }
725
748
  updateRangesArray() {
@@ -914,7 +937,7 @@ class NgxsmkDatepickerComponent {
914
937
  });
915
938
  }
916
939
  generateDropdownOptions() {
917
- this.yearOptions = generateYearOptions(this._currentYear);
940
+ this.yearOptions = generateYearOptions(this._currentYear, this.yearRange);
918
941
  }
919
942
  changeMonth(delta) {
920
943
  if (this.disabled)
@@ -956,127 +979,128 @@ class NgxsmkDatepickerComponent {
956
979
  this._internalValue = null;
957
980
  }
958
981
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
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: [{
982
+ 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", clearLabel: "clearLabel", closeLabel: "closeLabel", prevMonthAriaLabel: "prevMonthAriaLabel", nextMonthAriaLabel: "nextMonthAriaLabel", clearAriaLabel: "clearAriaLabel", closeAriaLabel: "closeAriaLabel", weekStart: "weekStart", yearRange: "yearRange", value: "value", startAt: "startAt", locale: "locale", theme: "theme", classes: "classes", 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: [{
960
983
  provide: NG_VALUE_ACCESSOR,
961
984
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
962
985
  multi: true
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>
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 }); }
986
+ }], usesOnChanges: true, ngImport: i0, template: `
987
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode" [ngClass]="classes?.wrapper">
988
+ @if (!isInlineMode) {
989
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled" role="button" [attr.aria-disabled]="disabled" aria-haspopup="dialog" [ngClass]="classes?.inputGroup">
990
+ <input type="text"
991
+ [value]="displayValue"
992
+ [placeholder]="placeholder"
993
+ readonly
994
+ [disabled]="disabled"
995
+ class="ngxsmk-display-input"
996
+ [ngClass]="classes?.input">
997
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue" [attr.aria-label]="clearAriaLabel" [title]="clearLabel" [ngClass]="classes?.clearBtn">
998
+ <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>
999
+ </button>
1000
+ </div>
1001
+ }
1002
+
1003
+ @if (isCalendarVisible) {
1004
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode" [ngClass]="classes?.popover">
1005
+ <div class="ngxsmk-datepicker-container" [ngClass]="classes?.container">
1006
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
1007
+ <div class="ngxsmk-ranges-container">
1008
+ <ul>
1009
+ @for (range of rangesArray; track trackByRange($index, range)) {
1010
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
1011
+ }
1012
+ </ul>
1013
+ </div>
1014
+ }
1015
+ <div class="ngxsmk-calendar-container" [ngClass]="classes?.calendar">
1016
+ <div class="ngxsmk-header" [ngClass]="classes?.header">
1017
+ <div class="ngxsmk-month-year-selects">
1018
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
1019
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
1020
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
1021
+ </div>
1022
+ <div class="ngxsmk-nav-buttons">
1023
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled" [attr.aria-label]="prevMonthAriaLabel" [title]="prevMonthAriaLabel" [ngClass]="classes?.navPrev">
1024
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1025
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1026
+ d="M328 112L184 256l144 144"/>
1027
+ </svg>
1028
+ </button>
1029
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled" [attr.aria-label]="nextMonthAriaLabel" [title]="nextMonthAriaLabel" [ngClass]="classes?.navNext">
1030
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1031
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1032
+ d="M184 112l144 144-144 144"/>
1033
+ </svg>
1034
+ </button>
1035
+ </div>
1036
+ </div>
1037
+ <div class="ngxsmk-days-grid-wrapper">
1038
+ <div class="ngxsmk-days-grid">
1039
+ @for (day of weekDays; track day) {
1040
+ <div class="ngxsmk-day-name">{{ day }}</div>
1041
+ }
1042
+ @for (day of daysInMonth; track trackByDay($index, day)) {
1043
+ <div class="ngxsmk-day-cell" [ngClass]="classes?.dayCell"
1044
+ [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1045
+ [class.today]="isSameDayMemo(day, today)"
1046
+ [class.holiday]="isHolidayMemo(day)"
1047
+ [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1048
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1049
+ [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1050
+ [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1051
+ [class.in-range]="mode === 'range' && isInRange(day)"
1052
+ [class.preview-range]="isPreviewInRange(day)"
1053
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1054
+ @if (day) {
1055
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1056
+ }
1057
+ </div>
1058
+ }
1059
+ </div>
1060
+ </div>
1061
+
1062
+ @if (showTime) {
1063
+ <div class="ngxsmk-time-selection">
1064
+ <span class="ngxsmk-time-label">Time:</span>
1065
+ <ngxsmk-custom-select
1066
+ class="hour-select"
1067
+ [options]="hourOptions"
1068
+ [(value)]="currentDisplayHour"
1069
+ (valueChange)="onTimeChange()"
1070
+ [disabled]="disabled"
1071
+ ></ngxsmk-custom-select>
1072
+ <span class="ngxsmk-time-separator">:</span>
1073
+ <ngxsmk-custom-select
1074
+ class="minute-select"
1075
+ [options]="minuteOptions"
1076
+ [(value)]="currentMinute"
1077
+ (valueChange)="onTimeChange()"
1078
+ [disabled]="disabled"
1079
+ ></ngxsmk-custom-select>
1080
+ <ngxsmk-custom-select
1081
+ class="ampm-select"
1082
+ [options]="ampmOptions"
1083
+ [(value)]="isPm"
1084
+ (valueChange)="onTimeChange()"
1085
+ [disabled]="disabled"
1086
+ ></ngxsmk-custom-select>
1087
+ </div>
1088
+ }
1089
+
1090
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode" [ngClass]="classes?.footer">
1091
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled" [attr.aria-label]="clearAriaLabel" [ngClass]="classes?.clearBtn">
1092
+ {{ clearLabel }}
1093
+ </button>
1094
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled" [attr.aria-label]="closeAriaLabel" [ngClass]="classes?.closeBtn">
1095
+ {{ closeLabel }}
1096
+ </button>
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+ </div>
1101
+ }
1102
+ </div>
1103
+ `, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 }); }
1080
1104
  }
1081
1105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
1082
1106
  type: Component,
@@ -1084,122 +1108,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ng
1084
1108
  provide: NG_VALUE_ACCESSOR,
1085
1109
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
1086
1110
  multi: true
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>
1111
+ }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
1112
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode" [ngClass]="classes?.wrapper">
1113
+ @if (!isInlineMode) {
1114
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled" role="button" [attr.aria-disabled]="disabled" aria-haspopup="dialog" [ngClass]="classes?.inputGroup">
1115
+ <input type="text"
1116
+ [value]="displayValue"
1117
+ [placeholder]="placeholder"
1118
+ readonly
1119
+ [disabled]="disabled"
1120
+ class="ngxsmk-display-input"
1121
+ [ngClass]="classes?.input">
1122
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue" [attr.aria-label]="clearAriaLabel" [title]="clearLabel" [ngClass]="classes?.clearBtn">
1123
+ <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>
1124
+ </button>
1125
+ </div>
1126
+ }
1127
+
1128
+ @if (isCalendarVisible) {
1129
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode" [ngClass]="classes?.popover">
1130
+ <div class="ngxsmk-datepicker-container" [ngClass]="classes?.container">
1131
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
1132
+ <div class="ngxsmk-ranges-container">
1133
+ <ul>
1134
+ @for (range of rangesArray; track trackByRange($index, range)) {
1135
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
1136
+ }
1137
+ </ul>
1138
+ </div>
1139
+ }
1140
+ <div class="ngxsmk-calendar-container" [ngClass]="classes?.calendar">
1141
+ <div class="ngxsmk-header" [ngClass]="classes?.header">
1142
+ <div class="ngxsmk-month-year-selects">
1143
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
1144
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
1145
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
1146
+ </div>
1147
+ <div class="ngxsmk-nav-buttons">
1148
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled" [attr.aria-label]="prevMonthAriaLabel" [title]="prevMonthAriaLabel" [ngClass]="classes?.navPrev">
1149
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1150
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1151
+ d="M328 112L184 256l144 144"/>
1152
+ </svg>
1153
+ </button>
1154
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled" [attr.aria-label]="nextMonthAriaLabel" [title]="nextMonthAriaLabel" [ngClass]="classes?.navNext">
1155
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1156
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1157
+ d="M184 112l144 144-144 144"/>
1158
+ </svg>
1159
+ </button>
1160
+ </div>
1161
+ </div>
1162
+ <div class="ngxsmk-days-grid-wrapper">
1163
+ <div class="ngxsmk-days-grid">
1164
+ @for (day of weekDays; track day) {
1165
+ <div class="ngxsmk-day-name">{{ day }}</div>
1166
+ }
1167
+ @for (day of daysInMonth; track trackByDay($index, day)) {
1168
+ <div class="ngxsmk-day-cell" [ngClass]="classes?.dayCell"
1169
+ [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)"
1170
+ [class.today]="isSameDayMemo(day, today)"
1171
+ [class.holiday]="isHolidayMemo(day)"
1172
+ [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
1173
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1174
+ [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
1175
+ [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
1176
+ [class.in-range]="mode === 'range' && isInRange(day)"
1177
+ [class.preview-range]="isPreviewInRange(day)"
1178
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1179
+ @if (day) {
1180
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
1181
+ }
1182
+ </div>
1183
+ }
1184
+ </div>
1185
+ </div>
1186
+
1187
+ @if (showTime) {
1188
+ <div class="ngxsmk-time-selection">
1189
+ <span class="ngxsmk-time-label">Time:</span>
1190
+ <ngxsmk-custom-select
1191
+ class="hour-select"
1192
+ [options]="hourOptions"
1193
+ [(value)]="currentDisplayHour"
1194
+ (valueChange)="onTimeChange()"
1195
+ [disabled]="disabled"
1196
+ ></ngxsmk-custom-select>
1197
+ <span class="ngxsmk-time-separator">:</span>
1198
+ <ngxsmk-custom-select
1199
+ class="minute-select"
1200
+ [options]="minuteOptions"
1201
+ [(value)]="currentMinute"
1202
+ (valueChange)="onTimeChange()"
1203
+ [disabled]="disabled"
1204
+ ></ngxsmk-custom-select>
1205
+ <ngxsmk-custom-select
1206
+ class="ampm-select"
1207
+ [options]="ampmOptions"
1208
+ [(value)]="isPm"
1209
+ (valueChange)="onTimeChange()"
1210
+ [disabled]="disabled"
1211
+ ></ngxsmk-custom-select>
1212
+ </div>
1213
+ }
1214
+
1215
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode" [ngClass]="classes?.footer">
1216
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled" [attr.aria-label]="clearAriaLabel" [ngClass]="classes?.clearBtn">
1217
+ {{ clearLabel }}
1218
+ </button>
1219
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled" [attr.aria-label]="closeAriaLabel" [ngClass]="classes?.closeBtn">
1220
+ {{ closeLabel }}
1221
+ </button>
1222
+ </div>
1223
+ </div>
1224
+ </div>
1225
+ </div>
1226
+ }
1227
+ </div>
1203
1228
  `, 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"] }]
1204
1229
  }], propDecorators: { mode: [{
1205
1230
  type: Input
@@ -1221,6 +1246,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ng
1221
1246
  type: Input
1222
1247
  }], inline: [{
1223
1248
  type: Input
1249
+ }], clearLabel: [{
1250
+ type: Input
1251
+ }], closeLabel: [{
1252
+ type: Input
1253
+ }], prevMonthAriaLabel: [{
1254
+ type: Input
1255
+ }], nextMonthAriaLabel: [{
1256
+ type: Input
1257
+ }], clearAriaLabel: [{
1258
+ type: Input
1259
+ }], closeAriaLabel: [{
1260
+ type: Input
1261
+ }], weekStart: [{
1262
+ type: Input
1263
+ }], yearRange: [{
1264
+ type: Input
1224
1265
  }], value: [{
1225
1266
  type: Input
1226
1267
  }], startAt: [{
@@ -1232,6 +1273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ng
1232
1273
  }], isDarkMode: [{
1233
1274
  type: HostBinding,
1234
1275
  args: ['class.dark-theme']
1276
+ }], classes: [{
1277
+ type: Input
1235
1278
  }], disabledState: [{
1236
1279
  type: Input
1237
1280
  }], valueChange: [{