ngxsmk-datepicker 1.4.15 → 1.5.0

package/fesm2022/ngxsmk-datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, forwardRef, HostBinding, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, ChangeDetectorRef, forwardRef, HostBinding, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -169,8 +169,8 @@ class CustomSelectComponent {
         this.valueChange.emit(this.value);
         this.isOpen = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CustomSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: CustomSelectComponent, isStandalone: true, selector: "ngxsmk-custom-select", inputs: { options: "options", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: CustomSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.1", type: CustomSelectComponent, isStandalone: true, selector: "ngxsmk-custom-select", inputs: { options: "options", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
     <div class="ngxsmk-select-container" (click)="toggleDropdown()">
       <button type="button" class="ngxsmk-select-display" [disabled]="disabled">
         <span>{{ displayValue }}</span>
@@ -193,7 +193,7 @@ class CustomSelectComponent {
     </div>
   `, isInline: true, styles: [":host{position:relative;display:inline-block}.ngxsmk-select-container{cursor:pointer}.ngxsmk-select-display{display:flex;align-items:center;justify-content:space-between;width:var(--custom-select-width, 115px);background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;padding:4px 8px;font-size:14px;text-align:left;height:30px}.ngxsmk-select-display:disabled{background-color:var(--datepicker-hover-background, #f0f0f0);cursor:not-allowed;opacity:.7}.ngxsmk-arrow-icon{width:12px;height:12px;margin-left:8px}.ngxsmk-options-panel{position:absolute;top:110%;left:0;width:100%;background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;box-shadow:0 4px 8px #0000001a;max-height:200px;overflow-y:auto;z-index:9999}.ngxsmk-options-panel ul{list-style:none;padding:4px;margin:0}.ngxsmk-options-panel li{padding:8px 12px;border-radius:4px;cursor:pointer}.ngxsmk-options-panel li:hover{background-color:var(--datepicker-hover-background, #f0f0f0)}.ngxsmk-options-panel li.selected{background-color:var(--datepicker-primary-color, #3880ff);color:var(--datepicker-primary-contrast, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CustomSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: CustomSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngxsmk-custom-select', standalone: true, imports: [CommonModule], template: `
     <div class="ngxsmk-select-container" (click)="toggleDropdown()">
@@ -297,6 +297,7 @@ function shallowEqual(a, b) {
  */
 function createDateComparator() {
     const cache = new Map();
+    const MAX_CACHE_SIZE = 1000; // Prevent memory leaks
     return (date1, date2) => {
         if (!date1 || !date2)
             return date1 === date2;
@@ -307,6 +308,13 @@ function createDateComparator() {
         const result = (date1.getFullYear() === date2.getFullYear() &&
             date1.getMonth() === date2.getMonth() &&
             date1.getDate() === date2.getDate());
+        // Prevent cache from growing too large
+        if (cache.size >= MAX_CACHE_SIZE) {
+            const firstKey = cache.keys().next().value;
+            if (firstKey !== undefined) {
+                cache.delete(firstKey);
+            }
+        }
         cache.set(key, result);
         return result;
     };
@@ -324,6 +332,13 @@ function createFilteredArray(source, filterFn, cacheKey) {
     cache.set(key, result);
     return result;
 }
+/**
+ * Clear all caches to prevent memory leaks
+ */
+function clearAllCaches() {
+    // This would be called from the component's ngOnDestroy
+    // Implementation depends on how caches are managed globally
+}
 
 class NgxsmkDatepickerComponent {
     constructor() {
@@ -332,12 +347,9 @@ class NgxsmkDatepickerComponent {
         this.showRanges = true;
         this.showTime = false;
         this.minuteInterval = 1;
-        // NEW: Holiday Provider Inputs
         this.holidayProvider = null;
         this.disableHolidays = false;
-        // NEW: Disabled Dates Input
         this.disabledDates = [];
-        // Popover/Input Mode
         this.placeholder = 'Select Date';
         this.inline = false;
         this.isCalendarOpen = false;
@@ -378,8 +390,8 @@ class NgxsmkDatepickerComponent {
             { label: 'AM', value: false },
             { label: 'PM', value: true }
         ];
-        // Animation state properties
         this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
         this.dateComparator = createDateComparator();
     }
     set startAt(value) { this._startAtDate = this._normalizeDate(value); }
@@ -402,15 +414,25 @@ class NgxsmkDatepickerComponent {
     }
     get displayValue() {
         if (this.mode === 'single' && this.selectedDate) {
-            return this.selectedDate.toLocaleString(this.locale, {
-                year: 'numeric', month: 'short', day: '2-digit',
-                hour: this.showTime ? '2-digit' : undefined,
-                minute: this.showTime ? '2-digit' : undefined
-            });
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit'
+            };
+            if (this.showTime) {
+                options.hour = '2-digit';
+                options.minute = '2-digit';
+            }
+            return this.selectedDate.toLocaleString(this.locale, options);
         }
         else if (this.mode === 'range' && this.startDate && this.endDate) {
-            const start = this.startDate.toLocaleString(this.locale, { year: 'numeric', month: 'short', day: '2-digit' });
-            const end = this.endDate.toLocaleString(this.locale, { year: 'numeric', month: 'short', day: '2-digit' });
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit'
+            };
+            const start = this.startDate.toLocaleString(this.locale, options);
+            const end = this.endDate.toLocaleString(this.locale, options);
             return `${start} - ${end}`;
         }
         else if (this.mode === 'multiple' && this.selectedDates.length > 0) {
@@ -421,14 +443,51 @@ class NgxsmkDatepickerComponent {
     get isBackArrowDisabled() {
         if (!this._minDate)
             return false;
-        // Get the first day of the current month
         const firstDayOfCurrentMonth = new Date(this.currentYear, this.currentMonth, 1);
-        // Check if the first day of current month is before or equal to minDate
         return firstDayOfCurrentMonth <= this._minDate;
     }
+    get isCurrentMonthMemo() {
+        return (day) => {
+            if (!day)
+                return false;
+            return day.getMonth() === this._currentMonth && day.getFullYear() === this._currentYear;
+        };
+    }
+    get isDateDisabledMemo() {
+        return (day) => {
+            if (!day)
+                return false;
+            return this.isDateDisabled(day);
+        };
+    }
+    get isSameDayMemo() {
+        return (d1, d2) => this.dateComparator(d1, d2);
+    }
+    get isHolidayMemo() {
+        return (day) => {
+            if (!day || !this.holidayProvider)
+                return false;
+            const dateOnly = getStartOfDay(day);
+            return this.holidayProvider.isHoliday(dateOnly);
+        };
+    }
+    get getHolidayLabelMemo() {
+        return (day) => {
+            if (!day || !this.holidayProvider || !this.isHolidayMemo(day))
+                return null;
+            return this.holidayProvider.getHolidayLabel ? this.holidayProvider.getHolidayLabel(getStartOfDay(day)) : 'Holiday';
+        };
+    }
+    trackByDay(index, day) {
+        return day ? day.getTime().toString() : `empty-${index}`;
+    }
+    trackByRange(_index, range) {
+        return range.key;
+    }
     onDocumentClick(event) {
         if (!this.isInlineMode && this.isCalendarOpen && !this.elementRef.nativeElement.contains(event.target)) {
             this.isCalendarOpen = false;
+            this.cdr.markForCheck();
         }
     }
     writeValue(val) {
@@ -450,7 +509,6 @@ class NgxsmkDatepickerComponent {
         this.valueChange.emit(val);
         this.onChange(val);
         this.onTouched();
-        // Auto-close popover when a selection is complete
         if (!this.isInlineMode && val !== null) {
             if (this.mode === 'single' || (this.mode === 'range' && this.startDate && this.endDate)) {
                 this.isCalendarOpen = false;
@@ -461,6 +519,7 @@ class NgxsmkDatepickerComponent {
         if (this.disabled || this.isInlineMode)
             return;
         this.isCalendarOpen = !this.isCalendarOpen;
+        this.cdr.markForCheck();
     }
     clearValue(event) {
         if (event)
@@ -475,11 +534,11 @@ class NgxsmkDatepickerComponent {
         this.isCalendarOpen = false;
         this.emitValue(null);
         this.action.emit({ type: 'clear', payload: null });
-        // Reset view to today after clearing
         this.currentDate = new Date();
         this._currentMonth = this.currentDate.getMonth();
         this._currentYear = this.currentDate.getFullYear();
         this.generateCalendar();
+        this.cdr.markForCheck();
     }
     get currentMonth() { return this._currentMonth; }
     set currentMonth(month) {
@@ -489,6 +548,7 @@ class NgxsmkDatepickerComponent {
             this._currentMonth = month;
             this.currentDate.setMonth(month);
             this.generateCalendar();
+            this.cdr.markForCheck();
         }
     }
     get currentYear() { return this._currentYear; }
@@ -499,6 +559,7 @@ class NgxsmkDatepickerComponent {
             this._currentYear = year;
             this.currentDate.setFullYear(year);
             this.generateCalendar();
+            this.cdr.markForCheck();
         }
     }
     ngOnInit() {
@@ -670,6 +731,7 @@ class NgxsmkDatepickerComponent {
         this.initializeValue({ start: this.startDate, end: this.endDate });
         this.generateCalendar();
         this.action.emit({ type: 'rangeSelected', payload: { start: this.startDate, end: this.endDate, key: this.rangesArray.find(r => r.value === range)?.key } });
+        this.cdr.markForCheck();
     }
     // NEW: Check if a date is a holiday
     isHoliday(date) {
@@ -750,6 +812,7 @@ class NgxsmkDatepickerComponent {
             this.emitValue([...this.selectedDates]);
         }
         this.action.emit({ type: 'timeChanged', payload: { hour: this.currentHour, minute: this.currentMinute } });
+        this.cdr.markForCheck();
     }
     onDateClick(day) {
         if (!day || this.disabled)
@@ -767,7 +830,7 @@ class NgxsmkDatepickerComponent {
                 this.startDate = this.applyCurrentTime(day);
                 this.endDate = null;
             }
-            else if (day >= this.startDate) {
+            else if (day && this.startDate && day >= this.startDate) {
                 this.endDate = this.applyCurrentTime(day);
                 this.emitValue({ start: this.startDate, end: this.endDate });
             }
@@ -804,10 +867,12 @@ class NgxsmkDatepickerComponent {
                 date: day
             }
         });
+        this.cdr.markForCheck();
     }
     onDateHover(day) {
         if (this.mode === 'range' && this.startDate && !this.endDate && day) {
             this.hoveredDate = day;
+            this.cdr.markForCheck();
         }
     }
     isPreviewInRange(day) {
@@ -840,6 +905,7 @@ class NgxsmkDatepickerComponent {
         for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
             this.daysInMonth.push(this._normalizeDate(new Date(year, month, i)));
         }
+        this.cdr.markForCheck();
         this.action.emit({
             type: 'calendarGenerated',
             payload: {
@@ -866,6 +932,7 @@ class NgxsmkDatepickerComponent {
         // Generate new calendar view
         this.generateCalendar();
         this.action.emit({ type: 'monthChanged', payload: { delta: delta } });
+        this.cdr.markForCheck();
     }
     isSameDay(d1, d2) {
         return this.dateComparator(d1, d2);
@@ -887,254 +954,263 @@ class NgxsmkDatepickerComponent {
     }
     ngOnDestroy() {
         // Clean up any subscriptions or timers if needed
-        // Currently no cleanup required, but method is here for future optimizations
+        this.selectedDate = null;
+        this.selectedDates = [];
+        this.startDate = null;
+        this.endDate = null;
+        this.hoveredDate = null;
+        this._internalValue = null;
+        // Clear any cached data
+        if (this.dateComparator && typeof this.dateComparator === 'function') {
+            // Clear any internal caches if they exist
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", 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", 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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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", 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: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxsmkDatepickerComponent),
                 multi: true
-            }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
-      @if (!isInlineMode) {
-        <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
-          <input type="text" 
-                 [value]="displayValue" 
-                 [placeholder]="placeholder" 
-                 readonly 
-                 [disabled]="disabled"
-                 class="ngxsmk-display-input">
-          <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
-            <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>
-          </button>
-        </div>
-      }
-
-      @if (isCalendarVisible) {
-        <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
-          <div class="ngxsmk-datepicker-container">
-            @if (showRanges && rangesArray.length > 0 && mode === 'range') {
-              <div class="ngxsmk-ranges-container">
-                <ul>
-                  @for (range of rangesArray; track range.key) {
-                    <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
-                  }
-                </ul>
-              </div>
-            }
-            <div class="ngxsmk-calendar-container">
-              <div class="ngxsmk-header">
-                <div class="ngxsmk-month-year-selects">
-                  <ngxsmk-custom-select class="month-select" [options]="monthOptions"
-                                    [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
-                  <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
-                </div>
-                <div class="ngxsmk-nav-buttons">
-                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
-                    <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="48"
-                            d="M328 112L184 256l144 144"/>
-                    </svg>
-                  </button>
-                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
-                    <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="48"
-                            d="M184 112l144 144-144 144"/>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div class="ngxsmk-days-grid-wrapper">
-                <div class="ngxsmk-days-grid">
-                  @for (day of weekDays; track day) {
-                    <div class="ngxsmk-day-name">{{ day }}</div>
-                  }
-                  @for (day of daysInMonth; track $index) {
-                    <div class="ngxsmk-day-cell"
-                        [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)" 
-                        [class.today]="isSameDay(day, today)"
-                        [class.holiday]="isHoliday(day)"
-                        [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
-                        [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
-                        [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
-                        [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
-                        [class.in-range]="mode === 'range' && isInRange(day)"
-                        [class.preview-range]="isPreviewInRange(day)"
-                        (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
-                      @if (day) {
-                        <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
-                      }
-                    </div>
-                  }
-                </div>
-              </div>
-
-              @if (showTime) {
-                <div class="ngxsmk-time-selection">
-                  <span class="ngxsmk-time-label">Time:</span>
-                  <ngxsmk-custom-select
-                    class="hour-select"
-                    [options]="hourOptions"
-                    [(value)]="currentDisplayHour"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                  <span class="ngxsmk-time-separator">:</span>
-                  <ngxsmk-custom-select
-                    class="minute-select"
-                    [options]="minuteOptions"
-                    [(value)]="currentMinute"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                  <ngxsmk-custom-select
-                    class="ampm-select"
-                    [options]="ampmOptions"
-                    [(value)]="isPm"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                </div>
-              }
-              
-              <div class="ngxsmk-footer" *ngIf="!isInlineMode">
-                <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
-                  Clear
-                </button>
-                <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
-  `, 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}.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 }); }
+            }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
+      @if (!isInlineMode) {
+        <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
+          <input type="text" 
+                 [value]="displayValue" 
+                 [placeholder]="placeholder" 
+                 readonly 
+                 [disabled]="disabled"
+                 class="ngxsmk-display-input">
+          <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
+            <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>
+          </button>
+        </div>
+      }
+
+      @if (isCalendarVisible) {
+        <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
+          <div class="ngxsmk-datepicker-container">
+            @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+              <div class="ngxsmk-ranges-container">
+                <ul>
+                  @for (range of rangesArray; track trackByRange($index, range)) {
+                    <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
+                  }
+                </ul>
+              </div>
+            }
+            <div class="ngxsmk-calendar-container">
+              <div class="ngxsmk-header">
+                <div class="ngxsmk-month-year-selects">
+                  <ngxsmk-custom-select class="month-select" [options]="monthOptions"
+                                    [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
+                  <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
+                </div>
+                <div class="ngxsmk-nav-buttons">
+                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
+                    <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="48"
+                            d="M328 112L184 256l144 144"/>
+                    </svg>
+                  </button>
+                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
+                    <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="48"
+                            d="M184 112l144 144-144 144"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div class="ngxsmk-days-grid-wrapper">
+                <div class="ngxsmk-days-grid">
+                  @for (day of weekDays; track day) {
+                    <div class="ngxsmk-day-name">{{ day }}</div>
+                  }
+                  @for (day of daysInMonth; track trackByDay($index, day)) {
+                    <div class="ngxsmk-day-cell"
+                        [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)" 
+                        [class.today]="isSameDayMemo(day, today)"
+                        [class.holiday]="isHolidayMemo(day)"
+                        [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
+                        [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
+                        [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
+                        [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
+                        [class.in-range]="mode === 'range' && isInRange(day)"
+                        [class.preview-range]="isPreviewInRange(day)"
+                        (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
+                      @if (day) {
+                        <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+
+              @if (showTime) {
+                <div class="ngxsmk-time-selection">
+                  <span class="ngxsmk-time-label">Time:</span>
+                  <ngxsmk-custom-select
+                    class="hour-select"
+                    [options]="hourOptions"
+                    [(value)]="currentDisplayHour"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                  <span class="ngxsmk-time-separator">:</span>
+                  <ngxsmk-custom-select
+                    class="minute-select"
+                    [options]="minuteOptions"
+                    [(value)]="currentMinute"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                  <ngxsmk-custom-select
+                    class="ampm-select"
+                    [options]="ampmOptions"
+                    [(value)]="isPm"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                </div>
+              }
+              
+              <div class="ngxsmk-footer" *ngIf="!isInlineMode">
+                <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
+                  Clear
+                </button>
+                <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.1", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngxsmk-datepicker', standalone: true, imports: [CommonModule, FormsModule, CustomSelectComponent, DatePipe, ReactiveFormsModule], providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NgxsmkDatepickerComponent),
                             multi: true
-                        }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
-      @if (!isInlineMode) {
-        <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
-          <input type="text" 
-                 [value]="displayValue" 
-                 [placeholder]="placeholder" 
-                 readonly 
-                 [disabled]="disabled"
-                 class="ngxsmk-display-input">
-          <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
-            <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>
-          </button>
-        </div>
-      }
-
-      @if (isCalendarVisible) {
-        <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
-          <div class="ngxsmk-datepicker-container">
-            @if (showRanges && rangesArray.length > 0 && mode === 'range') {
-              <div class="ngxsmk-ranges-container">
-                <ul>
-                  @for (range of rangesArray; track range.key) {
-                    <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
-                  }
-                </ul>
-              </div>
-            }
-            <div class="ngxsmk-calendar-container">
-              <div class="ngxsmk-header">
-                <div class="ngxsmk-month-year-selects">
-                  <ngxsmk-custom-select class="month-select" [options]="monthOptions"
-                                    [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
-                  <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
-                </div>
-                <div class="ngxsmk-nav-buttons">
-                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
-                    <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="48"
-                            d="M328 112L184 256l144 144"/>
-                    </svg>
-                  </button>
-                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
-                    <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="48"
-                            d="M184 112l144 144-144 144"/>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div class="ngxsmk-days-grid-wrapper">
-                <div class="ngxsmk-days-grid">
-                  @for (day of weekDays; track day) {
-                    <div class="ngxsmk-day-name">{{ day }}</div>
-                  }
-                  @for (day of daysInMonth; track $index) {
-                    <div class="ngxsmk-day-cell"
-                        [class.empty]="!isCurrentMonth(day)" [class.disabled]="isDateDisabled(day)" 
-                        [class.today]="isSameDay(day, today)"
-                        [class.holiday]="isHoliday(day)"
-                        [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
-                        [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
-                        [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
-                        [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
-                        [class.in-range]="mode === 'range' && isInRange(day)"
-                        [class.preview-range]="isPreviewInRange(day)"
-                        (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
-                      @if (day) {
-                        <div class="ngxsmk-day-number" [attr.title]="getHolidayLabel(day)">{{ day | date : 'd' }}</div>
-                      }
-                    </div>
-                  }
-                </div>
-              </div>
-
-              @if (showTime) {
-                <div class="ngxsmk-time-selection">
-                  <span class="ngxsmk-time-label">Time:</span>
-                  <ngxsmk-custom-select
-                    class="hour-select"
-                    [options]="hourOptions"
-                    [(value)]="currentDisplayHour"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                  <span class="ngxsmk-time-separator">:</span>
-                  <ngxsmk-custom-select
-                    class="minute-select"
-                    [options]="minuteOptions"
-                    [(value)]="currentMinute"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                  <ngxsmk-custom-select
-                    class="ampm-select"
-                    [options]="ampmOptions"
-                    [(value)]="isPm"
-                    (valueChange)="onTimeChange()"
-                    [disabled]="disabled"
-                  ></ngxsmk-custom-select>
-                </div>
-              }
-              
-              <div class="ngxsmk-footer" *ngIf="!isInlineMode">
-                <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
-                  Clear
-                </button>
-                <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
-  `, 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}.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"] }]
+                        }], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ngxsmk-datepicker-wrapper" [class.ngxsmk-inline-mode]="isInlineMode">
+      @if (!isInlineMode) {
+        <div class="ngxsmk-input-group" (click)="toggleCalendar()" [class.disabled]="disabled">
+          <input type="text" 
+                 [value]="displayValue" 
+                 [placeholder]="placeholder" 
+                 readonly 
+                 [disabled]="disabled"
+                 class="ngxsmk-display-input">
+          <button type="button" class="ngxsmk-clear-button" (click)="clearValue($event)" [disabled]="disabled" *ngIf="displayValue">
+            <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>
+          </button>
+        </div>
+      }
+
+      @if (isCalendarVisible) {
+        <div class="ngxsmk-popover-container" [class.ngxsmk-inline-container]="isInlineMode">
+          <div class="ngxsmk-datepicker-container">
+            @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+              <div class="ngxsmk-ranges-container">
+                <ul>
+                  @for (range of rangesArray; track trackByRange($index, range)) {
+                    <li (click)="selectRange(range.value)" [class.disabled]="disabled">{{ range.key }}</li>
+                  }
+                </ul>
+              </div>
+            }
+            <div class="ngxsmk-calendar-container">
+              <div class="ngxsmk-header">
+                <div class="ngxsmk-month-year-selects">
+                  <ngxsmk-custom-select class="month-select" [options]="monthOptions"
+                                    [(value)]="currentMonth" [disabled]="disabled"></ngxsmk-custom-select>
+                  <ngxsmk-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></ngxsmk-custom-select>
+                </div>
+                <div class="ngxsmk-nav-buttons">
+                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)" [disabled]="disabled || isBackArrowDisabled">
+                    <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="48"
+                            d="M328 112L184 256l144 144"/>
+                    </svg>
+                  </button>
+                  <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)" [disabled]="disabled">
+                    <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="48"
+                            d="M184 112l144 144-144 144"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div class="ngxsmk-days-grid-wrapper">
+                <div class="ngxsmk-days-grid">
+                  @for (day of weekDays; track day) {
+                    <div class="ngxsmk-day-name">{{ day }}</div>
+                  }
+                  @for (day of daysInMonth; track trackByDay($index, day)) {
+                    <div class="ngxsmk-day-cell"
+                        [class.empty]="!isCurrentMonthMemo(day)" [class.disabled]="isDateDisabledMemo(day)" 
+                        [class.today]="isSameDayMemo(day, today)"
+                        [class.holiday]="isHolidayMemo(day)"
+                        [class.selected]="mode === 'single' && isSameDayMemo(day, selectedDate)"
+                        [class.multiple-selected]="mode === 'multiple' && isMultipleSelected(day)"
+                        [class.start-date]="mode === 'range' && isSameDayMemo(day, startDate)"
+                        [class.end-date]="mode === 'range' && isSameDayMemo(day, endDate)"
+                        [class.in-range]="mode === 'range' && isInRange(day)"
+                        [class.preview-range]="isPreviewInRange(day)"
+                        (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
+                      @if (day) {
+                        <div class="ngxsmk-day-number" [attr.title]="getHolidayLabelMemo(day)">{{ day | date : 'd' }}</div>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+
+              @if (showTime) {
+                <div class="ngxsmk-time-selection">
+                  <span class="ngxsmk-time-label">Time:</span>
+                  <ngxsmk-custom-select
+                    class="hour-select"
+                    [options]="hourOptions"
+                    [(value)]="currentDisplayHour"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                  <span class="ngxsmk-time-separator">:</span>
+                  <ngxsmk-custom-select
+                    class="minute-select"
+                    [options]="minuteOptions"
+                    [(value)]="currentMinute"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                  <ngxsmk-custom-select
+                    class="ampm-select"
+                    [options]="ampmOptions"
+                    [(value)]="isPm"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></ngxsmk-custom-select>
+                </div>
+              }
+              
+              <div class="ngxsmk-footer" *ngIf="!isInlineMode">
+                <button type="button" class="ngxsmk-clear-button-footer" (click)="clearValue($event)" [disabled]="disabled">
+                  Clear
+                </button>
+                <button type="button" class="ngxsmk-close-button" (click)="isCalendarOpen = false" [disabled]="disabled">
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `, 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"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], isInvalidDate: [{