ngxsmk-datepicker 1.4.10 → 1.4.11

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 (4) hide show
  1. package/README.md +272 -289
  2. package/fesm2022/ngxsmk-datepicker.mjs +238 -235
  3. package/fesm2022/ngxsmk-datepicker.mjs.map +1 -1
  4. package/package.json +1 -5
package/fesm2022/ngxsmk-datepicker.mjs CHANGED
@@ -691,7 +691,10 @@ class NgxsmkDatepickerComponent {
691
691
  this.action.emit({ type: 'timeChanged', payload: { hour: this.currentHour, minute: this.currentMinute } });
692
692
  }
693
693
  onDateClick(day) {
694
- if (!day || this.isDateDisabled(day) || this.disabled)
694
+ if (!day || this.disabled)
695
+ return;
696
+ // Only check isDateDisabled for current month days
697
+ if (this.isCurrentMonth(day) && this.isDateDisabled(day))
695
698
  return;
696
699
  const dateToToggle = getStartOfDay(day);
697
700
  if (this.mode === 'single') {
@@ -830,123 +833,123 @@ class NgxsmkDatepickerComponent {
830
833
  provide: NG_VALUE_ACCESSOR,
831
834
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
832
835
  multi: true
833
- }], usesOnChanges: true, ngImport: i0, template: `
834
- <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
835
- @if (!isInlineMode) {
836
- <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
837
- <input type="text"
838
- [value]="displayValue"
839
- [placeholder]="placeholder"
840
- readonly
841
- [disabled]="disabled"
842
- class="ngxsmk-display-input">
843
- <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
844
- <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>
845
- </button>
846
- </div>
847
- }
848
-
849
- @if (isCalendarVisible) {
850
- <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
851
- <div class="ngxsmk-datepicker-container">
852
- @if (showRanges && rangesArray.length > 0 && mode === 'range') {
853
- <div class="ngxsmk-ranges-container">
854
- <ul>
855
- @for (range of rangesArray; track range.key) {
856
- <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
857
- }
858
- </ul>
859
- </div>
860
- }
861
- <div class="ngxsmk-calendar-container">
862
- <div class="ngxsmk-header">
863
- <div class="ngxsmk-month-year-selects">
864
- <ngxsmk-custom-select class="month-select" [options]="monthOptions"
865
- [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
866
- <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
867
- </div>
868
- <div class="ngxsmk-nav-buttons">
869
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
870
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
871
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
872
- d="M328 112L184 256l144 144"/>
873
- </svg>
874
- </button>
875
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
876
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
877
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
878
- d="M184 112l144 144-144 144"/>
879
- </svg>
880
- </button>
881
- </div>
882
- </div>
883
- <div class="ngxsmk-days-grid-wrapper">
884
- <div class="ngxsmk-days-grid">
885
- @for (day of weekDays; track day) {
886
- <div class="ngxsmk-day-name">{{ day }}</div>
887
- }
888
- @for (day of daysInMonth; track $index) {
889
- <div class="ngxsmk-day-cell"
890
- [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)"
891
- [class.today]="isSameDay(day, today)"
892
- [class.holiday]="isHoliday(day)"
893
- [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
894
- [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
895
- [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
896
- [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
897
- [class.in-range]="mode === 'range' && isInRange(day)"
898
- [class.preview-range]="isPreviewInRange(day)"
899
- (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
900
- @if (day) {
901
- <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
902
- }
903
- </div>
904
- }
905
- </div>
906
- </div>
907
-
908
- @if (showTime) {
909
- <div class="ngxsmk-time-selection">
910
- <span class="ngxsmk-time-label">Time:</span>
911
- <ngxsmk-custom-select
912
- class="hour-select"
913
- [options]="hourOptions"
914
- [(value)]="currentDisplayHour"
915
- (valueChange)="onTimeChange()"
916
- [disabled]="disabled"
917
- ></ngxsmk-custom-select>
918
- <span class="ngxsmk-time-separator">:</span>
919
- <ngxsmk-custom-select
920
- class="minute-select"
921
- [options]="minuteOptions"
922
- [(value)]="currentMinute"
923
- (valueChange)="onTimeChange()"
924
- [disabled]="disabled"
925
- ></ngxsmk-custom-select>
926
- <ngxsmk-custom-select
927
- class="ampm-select"
928
- [options]="ampmOptions"
929
- [(value)]="isPm"
930
- (valueChange)="onTimeChange()"
931
- [disabled]="disabled"
932
- ></ngxsmk-custom-select>
933
- </div>
934
- }
935
-
936
- <div class="ngxsmk-footer" *ngIf="!isInlineMode">
937
- <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
938
- Clear
939
- </button>
940
- <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
941
- Close
942
- </button>
943
- </div>
944
- </div>
945
- </div>
946
- </div>
947
- }
948
- </div>
949
- `, 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;width:100%}.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):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:.6}.ngxsmk-day-cell.empty.disabled{cursor:not-allowed;pointer-events:none}.ngxsmk-day-cell.empty .ngxsmk-day-number{color:var(--datepicker-subtle-text-color);font-weight:400}: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:38px}.ngxsmk-day-number{width:36px;height:36px;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}.ngxsmk-days-grid{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 }); }
836
+ }], usesOnChanges: true, ngImport: i0, template: `
837
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
838
+ @if (!isInlineMode) {
839
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
840
+ <input type="text"
841
+ [value]="displayValue"
842
+ [placeholder]="placeholder"
843
+ readonly
844
+ [disabled]="disabled"
845
+ class="ngxsmk-display-input">
846
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
847
+ <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>
848
+ </button>
849
+ </div>
850
+ }
851
+
852
+ @if (isCalendarVisible) {
853
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
854
+ <div class="ngxsmk-datepicker-container">
855
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
856
+ <div class="ngxsmk-ranges-container">
857
+ <ul>
858
+ @for (range of rangesArray; track range.key) {
859
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
860
+ }
861
+ </ul>
862
+ </div>
863
+ }
864
+ <div class="ngxsmk-calendar-container">
865
+ <div class="ngxsmk-header">
866
+ <div class="ngxsmk-month-year-selects">
867
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
868
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
869
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
870
+ </div>
871
+ <div class="ngxsmk-nav-buttons">
872
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
873
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
874
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
875
+ d="M328 112L184 256l144 144"/>
876
+ </svg>
877
+ </button>
878
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
879
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
880
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
881
+ d="M184 112l144 144-144 144"/>
882
+ </svg>
883
+ </button>
884
+ </div>
885
+ </div>
886
+ <div class="ngxsmk-days-grid-wrapper">
887
+ <div class="ngxsmk-days-grid">
888
+ @for (day of weekDays; track day) {
889
+ <div class="ngxsmk-day-name">{{ day }}</div>
890
+ }
891
+ @for (day of daysInMonth; track $index) {
892
+ <div class="ngxsmk-day-cell"
893
+ [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)"
894
+ [class.today]="isSameDay(day, today)"
895
+ [class.holiday]="isHoliday(day)"
896
+ [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
897
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
898
+ [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
899
+ [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
900
+ [class.in-range]="mode === 'range' && isInRange(day)"
901
+ [class.preview-range]="isPreviewInRange(day)"
902
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
903
+ @if (day) {
904
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
905
+ }
906
+ </div>
907
+ }
908
+ </div>
909
+ </div>
910
+
911
+ @if (showTime) {
912
+ <div class="ngxsmk-time-selection">
913
+ <span class="ngxsmk-time-label">Time:</span>
914
+ <ngxsmk-custom-select
915
+ class="hour-select"
916
+ [options]="hourOptions"
917
+ [(value)]="currentDisplayHour"
918
+ (valueChange)="onTimeChange()"
919
+ [disabled]="disabled"
920
+ ></ngxsmk-custom-select>
921
+ <span class="ngxsmk-time-separator">:</span>
922
+ <ngxsmk-custom-select
923
+ class="minute-select"
924
+ [options]="minuteOptions"
925
+ [(value)]="currentMinute"
926
+ (valueChange)="onTimeChange()"
927
+ [disabled]="disabled"
928
+ ></ngxsmk-custom-select>
929
+ <ngxsmk-custom-select
930
+ class="ampm-select"
931
+ [options]="ampmOptions"
932
+ [(value)]="isPm"
933
+ (valueChange)="onTimeChange()"
934
+ [disabled]="disabled"
935
+ ></ngxsmk-custom-select>
936
+ </div>
937
+ }
938
+
939
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode">
940
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
941
+ Clear
942
+ </button>
943
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
944
+ Close
945
+ </button>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ }
951
+ </div>
952
+ `, 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);font-weight:500}.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);font-weight:500}: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}.ngxsmk-days-grid{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 }); }
950
953
  }
951
954
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
952
955
  type: Component,
@@ -954,123 +957,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
954
957
  provide: NG_VALUE_ACCESSOR,
955
958
  useExisting: forwardRef(() => NgxsmkDatepickerComponent),
956
959
  multi: true
957
- }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
958
- <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
959
- @if (!isInlineMode) {
960
- <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
961
- <input type="text"
962
- [value]="displayValue"
963
- [placeholder]="placeholder"
964
- readonly
965
- [disabled]="disabled"
966
- class="ngxsmk-display-input">
967
- <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
968
- <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>
969
- </button>
970
- </div>
971
- }
972
-
973
- @if (isCalendarVisible) {
974
- <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
975
- <div class="ngxsmk-datepicker-container">
976
- @if (showRanges && rangesArray.length > 0 && mode === 'range') {
977
- <div class="ngxsmk-ranges-container">
978
- <ul>
979
- @for (range of rangesArray; track range.key) {
980
- <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
981
- }
982
- </ul>
983
- </div>
984
- }
985
- <div class="ngxsmk-calendar-container">
986
- <div class="ngxsmk-header">
987
- <div class="ngxsmk-month-year-selects">
988
- <ngxsmk-custom-select class="month-select" [options]="monthOptions"
989
- [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
990
- <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
991
- </div>
992
- <div class="ngxsmk-nav-buttons">
993
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
994
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
995
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
996
- d="M328 112L184 256l144 144"/>
997
- </svg>
998
- </button>
999
- <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
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="M184 112l144 144-144 144"/>
1003
- </svg>
1004
- </button>
1005
- </div>
1006
- </div>
1007
- <div class="ngxsmk-days-grid-wrapper">
1008
- <div class="ngxsmk-days-grid">
1009
- @for (day of weekDays; track day) {
1010
- <div class="ngxsmk-day-name">{{ day }}</div>
1011
- }
1012
- @for (day of daysInMonth; track $index) {
1013
- <div class="ngxsmk-day-cell"
1014
- [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)"
1015
- [class.today]="isSameDay(day, today)"
1016
- [class.holiday]="isHoliday(day)"
1017
- [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
1018
- [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1019
- [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
1020
- [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
1021
- [class.in-range]="mode === 'range' && isInRange(day)"
1022
- [class.preview-range]="isPreviewInRange(day)"
1023
- (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1024
- @if (day) {
1025
- <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
1026
- }
1027
- </div>
1028
- }
1029
- </div>
1030
- </div>
1031
-
1032
- @if (showTime) {
1033
- <div class="ngxsmk-time-selection">
1034
- <span class="ngxsmk-time-label">Time:</span>
1035
- <ngxsmk-custom-select
1036
- class="hour-select"
1037
- [options]="hourOptions"
1038
- [(value)]="currentDisplayHour"
1039
- (valueChange)="onTimeChange()"
1040
- [disabled]="disabled"
1041
- ></ngxsmk-custom-select>
1042
- <span class="ngxsmk-time-separator">:</span>
1043
- <ngxsmk-custom-select
1044
- class="minute-select"
1045
- [options]="minuteOptions"
1046
- [(value)]="currentMinute"
1047
- (valueChange)="onTimeChange()"
1048
- [disabled]="disabled"
1049
- ></ngxsmk-custom-select>
1050
- <ngxsmk-custom-select
1051
- class="ampm-select"
1052
- [options]="ampmOptions"
1053
- [(value)]="isPm"
1054
- (valueChange)="onTimeChange()"
1055
- [disabled]="disabled"
1056
- ></ngxsmk-custom-select>
1057
- </div>
1058
- }
1059
-
1060
- <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1061
- <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1062
- Clear
1063
- </button>
1064
- <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1065
- Close
1066
- </button>
1067
- </div>
1068
- </div>
1069
- </div>
1070
- </div>
1071
- }
1072
- </div>
1073
- `, 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;width:100%}.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):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:.6}.ngxsmk-day-cell.empty.disabled{cursor:not-allowed;pointer-events:none}.ngxsmk-day-cell.empty .ngxsmk-day-number{color:var(--datepicker-subtle-text-color);font-weight:400}: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:38px}.ngxsmk-day-number{width:36px;height:36px;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}.ngxsmk-days-grid{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"] }]
960
+ }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
961
+ <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
962
+ @if (!isInlineMode) {
963
+ <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
964
+ <input type="text"
965
+ [value]="displayValue"
966
+ [placeholder]="placeholder"
967
+ readonly
968
+ [disabled]="disabled"
969
+ class="ngxsmk-display-input">
970
+ <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
971
+ <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>
972
+ </button>
973
+ </div>
974
+ }
975
+
976
+ @if (isCalendarVisible) {
977
+ <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
978
+ <div class="ngxsmk-datepicker-container">
979
+ @if (showRanges && rangesArray.length > 0 && mode === 'range') {
980
+ <div class="ngxsmk-ranges-container">
981
+ <ul>
982
+ @for (range of rangesArray; track range.key) {
983
+ <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
984
+ }
985
+ </ul>
986
+ </div>
987
+ }
988
+ <div class="ngxsmk-calendar-container">
989
+ <div class="ngxsmk-header">
990
+ <div class="ngxsmk-month-year-selects">
991
+ <ngxsmk-custom-select class="month-select" [options]="monthOptions"
992
+ [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
993
+ <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
994
+ </div>
995
+ <div class="ngxsmk-nav-buttons">
996
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
997
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
998
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
999
+ d="M328 112L184 256l144 144"/>
1000
+ </svg>
1001
+ </button>
1002
+ <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
1003
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1004
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
1005
+ d="M184 112l144 144-144 144"/>
1006
+ </svg>
1007
+ </button>
1008
+ </div>
1009
+ </div>
1010
+ <div class="ngxsmk-days-grid-wrapper">
1011
+ <div class="ngxsmk-days-grid">
1012
+ @for (day of weekDays; track day) {
1013
+ <div class="ngxsmk-day-name">{{ day }}</div>
1014
+ }
1015
+ @for (day of daysInMonth; track $index) {
1016
+ <div class="ngxsmk-day-cell"
1017
+ [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)"
1018
+ [class.today]="isSameDay(day, today)"
1019
+ [class.holiday]="isHoliday(day)"
1020
+ [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
1021
+ [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
1022
+ [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
1023
+ [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
1024
+ [class.in-range]="mode === 'range' && isInRange(day)"
1025
+ [class.preview-range]="isPreviewInRange(day)"
1026
+ (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
1027
+ @if (day) {
1028
+ <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
1029
+ }
1030
+ </div>
1031
+ }
1032
+ </div>
1033
+ </div>
1034
+
1035
+ @if (showTime) {
1036
+ <div class="ngxsmk-time-selection">
1037
+ <span class="ngxsmk-time-label">Time:</span>
1038
+ <ngxsmk-custom-select
1039
+ class="hour-select"
1040
+ [options]="hourOptions"
1041
+ [(value)]="currentDisplayHour"
1042
+ (valueChange)="onTimeChange()"
1043
+ [disabled]="disabled"
1044
+ ></ngxsmk-custom-select>
1045
+ <span class="ngxsmk-time-separator">:</span>
1046
+ <ngxsmk-custom-select
1047
+ class="minute-select"
1048
+ [options]="minuteOptions"
1049
+ [(value)]="currentMinute"
1050
+ (valueChange)="onTimeChange()"
1051
+ [disabled]="disabled"
1052
+ ></ngxsmk-custom-select>
1053
+ <ngxsmk-custom-select
1054
+ class="ampm-select"
1055
+ [options]="ampmOptions"
1056
+ [(value)]="isPm"
1057
+ (valueChange)="onTimeChange()"
1058
+ [disabled]="disabled"
1059
+ ></ngxsmk-custom-select>
1060
+ </div>
1061
+ }
1062
+
1063
+ <div class="ngxsmk-footer" *ngIf="!isInlineMode">
1064
+ <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
1065
+ Clear
1066
+ </button>
1067
+ <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
1068
+ Close
1069
+ </button>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ }
1075
+ </div>
1076
+ `, 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);font-weight:500}.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);font-weight:500}: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}.ngxsmk-days-grid{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"] }]
1074
1077
  }], propDecorators: { mode: [{
1075
1078
  type: Input
1076
1079
  }], isInvalidDate: [{