ngxsmk-datepicker 1.3.4 → 1.3.6

package/fesm2022/ngxsmk-datepicker.mjs

@@ -1,12 +1,35 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, HostBinding } from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, forwardRef, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { CommonModule, DatePipe } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
+function getStartOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+function getEndOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+}
+function addMonths(d, months) {
+    const newDate = new Date(d);
+    newDate.setMonth(d.getMonth() + months);
+    return newDate;
+}
+function subtractDays(d, days) {
+    const newDate = new Date(d);
+    newDate.setDate(d.getDate() - days);
+    return newDate;
+}
+function getStartOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function getEndOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
 class CustomSelectComponent {
     constructor() {
         this.options = [];
+        this.disabled = false;
         this.valueChange = new EventEmitter();
         this.isOpen = false;
         this.elementRef = inject(ElementRef);
@@ -20,6 +43,8 @@ class CustomSelectComponent {
         return selectedOption ? selectedOption.label : '';
     }
     toggleDropdown() {
+        if (this.disabled)
+            return;
         this.isOpen = !this.isOpen;
     }
     selectOption(option) {
@@ -28,9 +53,9 @@ class CustomSelectComponent {
         this.isOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CustomSelectComponent, isStandalone: true, selector: "app-custom-select", inputs: { options: "options", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CustomSelectComponent, isStandalone: true, selector: "app-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">
+      <button type="button" class="ngxsmk-select-display" [disabled]="disabled">
         <span>{{ displayValue }}</span>
         <svg class="ngxsmk-arrow-icon" 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"
@@ -49,13 +74,13 @@ class CustomSelectComponent {
         </div>
       }
     </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-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 }] }); }
+  `, 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.4", ngImport: i0, type: CustomSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-custom-select', standalone: true, imports: [CommonModule], template: `
     <div class="ngxsmk-select-container" (click)="toggleDropdown()">
-      <button type="button" class="ngxsmk-select-display">
+      <button type="button" class="ngxsmk-select-display" [disabled]="disabled">
         <span>{{ displayValue }}</span>
         <svg class="ngxsmk-arrow-icon" 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"
@@ -74,11 +99,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         </div>
       }
     </div>
-  `, 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-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"] }]
+  `, 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"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], value: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onDocumentClick: [{
@@ -92,19 +119,31 @@ class NgxsmkDatepickerComponent {
         this.showRanges = true;
         this.showTime = false;
         this.minuteInterval = 1;
-        this.value = null;
+        // NEW: Holiday Provider Inputs
+        this.holidayProvider = null;
+        this.disableHolidays = false;
+        // Popover/Input Mode
+        this.placeholder = 'Select Date';
+        this.inline = false;
+        this.isCalendarOpen = false;
+        this._internalValue = null;
         this._startAtDate = null;
         this._locale = 'en-US';
         this.theme = 'light';
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.disabled = false;
         this.valueChange = new EventEmitter();
+        this.action = new EventEmitter();
         this._minDate = null;
         this._maxDate = null;
         this._ranges = null;
         this.currentDate = new Date();
         this.daysInMonth = [];
         this.weekDays = [];
-        this.today = new Date();
+        this.today = getStartOfDay(new Date());
         this.selectedDate = null;
+        this.selectedDates = [];
         this.startDate = null;
         this.endDate = null;
         this.hoveredDate = null;
@@ -124,11 +163,16 @@ class NgxsmkDatepickerComponent {
             { label: 'AM', value: false },
             { label: 'PM', value: true }
         ];
+        // Animation state properties
+        this.animateForward = false;
+        this.animateBackward = false;
+        this.elementRef = inject(ElementRef);
     }
     set startAt(value) { this._startAtDate = this._normalizeDate(value); }
     set locale(value) { this._locale = value; }
     get locale() { return this._locale; }
     get isDarkMode() { return this.theme === 'dark'; }
+    set disabledState(isDisabled) { this.disabled = isDisabled; }
     set minDate(value) { this._minDate = this._normalizeDate(value); }
     set maxDate(value) { this._maxDate = this._normalizeDate(value); }
     set ranges(value) {
@@ -146,30 +190,114 @@ class NgxsmkDatepickerComponent {
         }
         this.updateRangesArray();
     }
+    get isInlineMode() {
+        return this.inline === true || this.inline === 'always' ||
+            (this.inline === 'auto' && typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches);
+    }
+    get isCalendarVisible() {
+        return this.isInlineMode || this.isCalendarOpen;
+    }
+    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
+            });
+        }
+        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' });
+            return `${start} - ${end}`;
+        }
+        else if (this.mode === 'multiple' && this.selectedDates.length > 0) {
+            return `${this.selectedDates.length} dates selected`;
+        }
+        return '';
+    }
+    onDocumentClick(event) {
+        if (!this.isInlineMode && this.isCalendarOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isCalendarOpen = false;
+        }
+    }
+    writeValue(val) {
+        this._internalValue = val;
+        this.initializeValue(val);
+        this.generateCalendar();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    emitValue(val) {
+        this._internalValue = val;
+        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;
+            }
+        }
+    }
+    toggleCalendar() {
+        if (this.disabled || this.isInlineMode)
+            return;
+        this.isCalendarOpen = !this.isCalendarOpen;
+    }
+    clearValue(event) {
+        if (event)
+            event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.selectedDate = null;
+        this.selectedDates = [];
+        this.startDate = null;
+        this.endDate = null;
+        this.hoveredDate = null;
+        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();
+    }
     get currentMonth() { return this._currentMonth; }
     set currentMonth(month) {
+        if (this.disabled)
+            return;
         if (this._currentMonth !== month) {
             this._currentMonth = month;
             this.currentDate.setMonth(month);
-            this.generateCalendar();
+            this.generateCalendar(true);
         }
     }
     get currentYear() { return this._currentYear; }
     set currentYear(year) {
+        if (this.disabled)
+            return;
         if (this._currentYear !== year) {
             this._currentYear = year;
             this.currentDate.setFullYear(year);
-            this.generateCalendar();
+            this.generateCalendar(true);
         }
     }
     ngOnInit() {
-        if (this._locale === 'en-US') {
+        if (this._locale === 'en-US' && typeof navigator !== 'undefined') {
             this._locale = navigator.language;
         }
         this.today.setHours(0, 0, 0, 0);
         this.generateLocaleData();
         this.generateTimeOptions();
-        if (this.showTime && !this.value) {
+        if (this.showTime && !this._internalValue) {
             const now = new Date();
             this.currentHour = now.getHours();
             this.currentMinute = Math.floor(now.getMinutes() / this.minuteInterval) * this.minuteInterval;
@@ -179,8 +307,8 @@ class NgxsmkDatepickerComponent {
             }
             this.update12HourState(this.currentHour);
         }
-        if (this.value) {
-            this.initializeValue(this.value);
+        if (this._internalValue) {
+            this.initializeValue(this._internalValue);
         }
         else if (this._startAtDate) {
             this.initializeValue(null);
@@ -198,11 +326,14 @@ class NgxsmkDatepickerComponent {
             this.onTimeChange();
         }
         if (changes['value'] && changes['value'].currentValue !== changes['value'].previousValue) {
-            this.initializeValue(changes['value'].currentValue);
+            this.writeValue(changes['value'].currentValue);
+        }
+        // Rerun calendar generation if provider changes to refresh disabled states
+        if (changes['holidayProvider'] || changes['disableHolidays']) {
             this.generateCalendar();
         }
         if (changes['startAt']) {
-            if (!this.value && this._startAtDate) {
+            if (!this._internalValue && this._startAtDate) {
                 this.currentDate = new Date(this._startAtDate);
                 this._currentMonth = this.currentDate.getMonth();
                 this._currentYear = this.currentDate.getFullYear();
@@ -227,6 +358,10 @@ class NgxsmkDatepickerComponent {
     }
     initializeValue(value) {
         let initialDate = null;
+        this.selectedDate = null;
+        this.startDate = null;
+        this.endDate = null;
+        this.selectedDates = [];
         if (value) {
             if (this.mode === 'single' && value instanceof Date) {
                 this.selectedDate = this._normalizeDate(value);
@@ -237,11 +372,10 @@ class NgxsmkDatepickerComponent {
                 this.endDate = this._normalizeDate(value.end);
                 initialDate = this.startDate;
             }
-        }
-        else {
-            this.selectedDate = null;
-            this.startDate = null;
-            this.endDate = null;
+            else if (this.mode === 'multiple' && Array.isArray(value)) {
+                this.selectedDates = value.map(d => this._normalizeDate(d)).filter((d) => d !== null);
+                initialDate = this.selectedDates.length > 0 ? this.selectedDates[this.selectedDates.length - 1] : null;
+            }
         }
         const viewCenterDate = initialDate || this._startAtDate || new Date();
         if (viewCenterDate) {
@@ -257,7 +391,7 @@ class NgxsmkDatepickerComponent {
     _normalizeDate(date) {
         if (!date)
             return null;
-        const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date);
+        const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date.toDate ? date.toDate() : date);
         if (isNaN(d.getTime()))
             return null;
         return d;
@@ -298,60 +432,99 @@ class NgxsmkDatepickerComponent {
         this.rangesArray = this._ranges ? Object.entries(this._ranges).map(([key, value]) => ({ key, value })) : [];
     }
     selectRange(range) {
+        if (this.disabled)
+            return;
         this.startDate = this.applyCurrentTime(range[0]);
         this.endDate = this.applyCurrentTime(range[1]);
         if (this.startDate && this.endDate) {
-            this.valueChange.emit({ start: this.startDate, end: this.endDate });
+            this.emitValue({ start: this.startDate, end: this.endDate });
         }
         this.currentDate = new Date(this.startDate);
         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 } });
+    }
+    // NEW: Check if a date is a holiday
+    isHoliday(date) {
+        if (!date || !this.holidayProvider)
+            return false;
+        const dateOnly = getStartOfDay(date);
+        return this.holidayProvider.isHoliday(dateOnly);
+    }
+    // NEW: Get holiday label
+    getHolidayLabel(date) {
+        if (!date || !this.holidayProvider || !this.isHoliday(date))
+            return null;
+        return this.holidayProvider.getHolidayLabel ? this.holidayProvider.getHolidayLabel(getStartOfDay(date)) : 'Holiday';
     }
     isDateDisabled(date) {
         if (!date)
             return false;
-        const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        const dateOnly = getStartOfDay(date);
+        // 1. Check holiday provider for disabling
+        if (this.holidayProvider && this.disableHolidays && this.holidayProvider.isHoliday(dateOnly)) {
+            return true;
+        }
+        // 2. Check min/max date
         if (this._minDate) {
-            const minDateOnly = new Date(this._minDate.getFullYear(), this._minDate.getMonth(), this._minDate.getDate());
-            if (dateOnly < minDateOnly)
+            const minDateOnly = getStartOfDay(this._minDate);
+            if (dateOnly.getTime() < minDateOnly.getTime())
                 return true;
         }
         if (this._maxDate) {
-            const maxDateOnly = new Date(this._maxDate.getFullYear(), this._maxDate.getMonth(), this._maxDate.getDate());
-            if (dateOnly > maxDateOnly)
+            const maxDateOnly = getStartOfDay(this._maxDate);
+            if (dateOnly.getTime() > maxDateOnly.getTime())
                 return true;
         }
+        // 3. Check custom invalid date function
         return this.isInvalidDate(date);
     }
+    isMultipleSelected(d) {
+        if (!d || this.mode !== 'multiple')
+            return false;
+        const dTime = getStartOfDay(d).getTime();
+        return this.selectedDates.some(selected => getStartOfDay(selected).getTime() === dTime);
+    }
     onTimeChange() {
+        if (this.disabled)
+            return;
         if (this.mode === 'single' && this.selectedDate) {
             this.selectedDate = this.applyCurrentTime(this.selectedDate);
-            this.valueChange.emit(this.selectedDate);
+            this.emitValue(this.selectedDate);
         }
         else if (this.mode === 'range' && this.startDate && this.endDate) {
             this.startDate = this.applyCurrentTime(this.startDate);
             this.endDate = this.applyCurrentTime(this.endDate);
-            this.valueChange.emit({ start: this.startDate, end: this.endDate });
+            this.emitValue({ start: this.startDate, end: this.endDate });
         }
         else if (this.mode === 'range' && this.startDate && !this.endDate) {
             this.startDate = this.applyCurrentTime(this.startDate);
         }
+        else if (this.mode === 'multiple') {
+            this.selectedDates = this.selectedDates.map(date => {
+                const newDate = getStartOfDay(date);
+                return this.applyCurrentTime(newDate);
+            });
+            this.emitValue([...this.selectedDates]);
+        }
+        this.action.emit({ type: 'timeChanged', payload: { hour: this.currentHour, minute: this.currentMinute } });
     }
     onDateClick(day) {
-        if (!day || this.isDateDisabled(day))
+        if (!day || this.isDateDisabled(day) || this.disabled)
             return;
+        const dateToToggle = getStartOfDay(day);
         if (this.mode === 'single') {
             this.selectedDate = this.applyCurrentTime(day);
-            this.valueChange.emit(this.selectedDate);
+            this.emitValue(this.selectedDate);
         }
-        else {
+        else if (this.mode === 'range') {
             if (!this.startDate || (this.startDate && this.endDate)) {
                 this.startDate = this.applyCurrentTime(day);
                 this.endDate = null;
             }
             else if (day >= this.startDate) {
                 this.endDate = this.applyCurrentTime(day);
-                this.valueChange.emit({ start: this.startDate, end: this.endDate });
+                this.emitValue({ start: this.startDate, end: this.endDate });
             }
             else {
                 this.startDate = this.applyCurrentTime(day);
@@ -359,14 +532,33 @@ class NgxsmkDatepickerComponent {
             }
             this.hoveredDate = null;
         }
-        if (this.mode === 'single' && this.selectedDate) {
-            this.update12HourState(this.selectedDate.getHours());
-            this.currentMinute = this.selectedDate.getMinutes();
-        }
-        else if (this.mode === 'range' && this.startDate) {
-            this.update12HourState(this.startDate.getHours());
-            this.currentMinute = this.startDate.getMinutes();
-        }
+        else if (this.mode === 'multiple') {
+            const existingIndex = this.selectedDates.findIndex(d => this.isSameDay(d, dateToToggle));
+            if (existingIndex > -1) {
+                this.selectedDates.splice(existingIndex, 1);
+            }
+            else {
+                const dateWithTime = this.applyCurrentTime(dateToToggle);
+                this.selectedDates.push(dateWithTime);
+                this.selectedDates.sort((a, b) => a.getTime() - b.getTime());
+            }
+            this.emitValue([...this.selectedDates]);
+        }
+        const dateToSync = this.mode === 'single' ? this.selectedDate :
+            this.mode === 'range' ? this.startDate :
+                this.mode === 'multiple' && this.selectedDates.length > 0 ? this.selectedDates[this.selectedDates.length - 1] : null;
+        if (dateToSync) {
+            this.update12HourState(dateToSync.getHours());
+            this.currentMinute = dateToSync.getMinutes();
+        }
+        this.action.emit({
+            type: 'dateSelected',
+            payload: {
+                mode: this.mode,
+                value: this._internalValue,
+                date: day
+            }
+        });
     }
     onDateHover(day) {
         if (this.mode === 'range' && this.startDate && !this.endDate && day) {
@@ -376,12 +568,12 @@ class NgxsmkDatepickerComponent {
     isPreviewInRange(day) {
         if (this.mode !== 'range' || !this.startDate || this.endDate || !this.hoveredDate || !day)
             return false;
-        const start = this.startDate.getTime();
-        const end = this.hoveredDate.getTime();
-        const time = day.getTime();
+        const start = getStartOfDay(this.startDate).getTime();
+        const end = getStartOfDay(this.hoveredDate).getTime();
+        const time = getStartOfDay(day).getTime();
         return time > Math.min(start, end) && time < Math.max(start, end);
     }
-    generateCalendar() {
+    generateCalendar(resetAnimation = true) {
         this.daysInMonth = [];
         const year = this.currentDate.getFullYear();
         const month = this.currentDate.getMonth();
@@ -398,6 +590,18 @@ class NgxsmkDatepickerComponent {
         for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
             this.daysInMonth.push(this._normalizeDate(new Date(year, month, i)));
         }
+        if (resetAnimation) {
+            this.animateForward = false;
+            this.animateBackward = false;
+        }
+        this.action.emit({
+            type: 'calendarGenerated',
+            payload: {
+                month: month,
+                year: year,
+                days: this.daysInMonth.filter(d => d !== null)
+            }
+        });
     }
     generateDropdownOptions() {
         const startYear = this._currentYear - 10;
@@ -408,8 +612,31 @@ class NgxsmkDatepickerComponent {
         }
     }
     changeMonth(delta) {
-        this.currentDate.setMonth(this.currentDate.getMonth() + delta);
-        this.generateCalendar();
+        if (this.disabled)
+            return;
+        // 1. Set the animation class (triggers slide-out)
+        if (delta > 0) {
+            this.animateForward = true;
+            this.animateBackward = false;
+        }
+        else {
+            this.animateBackward = true;
+            this.animateForward = false;
+        }
+        const newDate = addMonths(this.currentDate, delta);
+        // 2. Wait for the slide-out transition to complete (300ms)
+        setTimeout(() => {
+            // 3. Update the data
+            this.currentDate = newDate;
+            this._currentMonth = newDate.getMonth();
+            this._currentYear = newDate.getFullYear();
+            // Generate new calendar view but tell it *not* to reset animation flags yet.
+            this.generateCalendar(false);
+            // 4. Reset the animation flags to false (triggers slide-in of the new content)
+            this.animateForward = false;
+            this.animateBackward = false;
+        }, 300); // Wait time should match the CSS transition duration (0.3s)
+        this.action.emit({ type: 'monthChanged', payload: { delta: delta } });
     }
     isSameDay(d1, d2) {
         if (!d1 || !d2)
@@ -421,183 +648,263 @@ class NgxsmkDatepickerComponent {
     isInRange(d) {
         if (!d || !this.startDate || !this.endDate)
             return false;
-        const dTime = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-        const startDayTime = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate()).getTime();
-        const endDayTime = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate()).getTime();
+        const dTime = getStartOfDay(d).getTime();
+        const startDayTime = getStartOfDay(this.startDate).getTime();
+        const endDayTime = getStartOfDay(this.endDate).getTime();
         const startTime = Math.min(startDayTime, endDayTime);
         const endTime = Math.max(startDayTime, endDayTime);
         return dTime > startTime && dTime < endTime;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: NgxsmkDatepickerComponent, isStandalone: true, selector: "ngxsmk-datepicker", inputs: { mode: "mode", isInvalidDate: "isInvalidDate", showRanges: "showRanges", showTime: "showTime", minuteInterval: "minuteInterval", value: "value", startAt: "startAt", locale: "locale", theme: "theme", minDate: "minDate", maxDate: "maxDate", ranges: "ranges" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.dark-theme": "this.isDarkMode" } }, usesOnChanges: true, ngImport: i0, template: `
-    <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)">{{ range.key }}</li>
-            }
-          </ul>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: NgxsmkDatepickerComponent, isStandalone: true, selector: "ngxsmk-datepicker", inputs: { mode: "mode", isInvalidDate: "isInvalidDate", showRanges: "showRanges", showTime: "showTime", minuteInterval: "minuteInterval", holidayProvider: "holidayProvider", disableHolidays: "disableHolidays", 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>
       }
-      <div class="ngxsmk-calendar-container">
-        <div class="ngxsmk-header">
-          <div class="ngxsmk-month-year-selects">
-            <app-custom-select class="month-select" [options]="monthOptions"
-                               [(value)]="currentMonth"></app-custom-select>
-            <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear"></app-custom-select>
-          </div>
-          <div class="ngxsmk-nav-buttons">
-            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)">
-              <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)">
-              <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]="!day" [class.disabled]="isDateDisabled(day)" [class.today]="isSameDay(day, today)"
-                   [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
-                   [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">{{ day | date : 'd' }}</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>
-        </div>
+            <div class="ngxsmk-calendar-container">
+              <div class="ngxsmk-header">
+                <div class="ngxsmk-month-year-selects">
+                  <app-custom-select class="month-select" [options]="monthOptions"
+                                    [(value)]="currentMonth" [disabled]="disabled"></app-custom-select>
+                  <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></app-custom-select>
+                </div>
+                <div class="ngxsmk-nav-buttons">
+                  <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="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"
+                    [class.animate-forward]="animateForward" 
+                    [class.animate-backward]="animateBackward">
+                  @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]="!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>
-            <app-custom-select
-              class="hour-select"
-              [options]="hourOptions"
-              [(value)]="currentDisplayHour"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
-            <span class="ngxsmk-time-separator">:</span>
-            <app-custom-select
-              class="minute-select"
-              [options]="minuteOptions"
-              [(value)]="currentMinute"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
-            <app-custom-select
-              class="ampm-select"
-              [options]="ampmOptions"
-              [(value)]="isPm"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
+              @if (showTime) {
+                <div class="ngxsmk-time-selection">
+                  <span class="ngxsmk-time-label">Time:</span>
+                  <app-custom-select
+                    class="hour-select"
+                    [options]="hourOptions"
+                    [(value)]="currentDisplayHour"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-custom-select>
+                  <span class="ngxsmk-time-separator">:</span>
+                  <app-custom-select
+                    class="minute-select"
+                    [options]="minuteOptions"
+                    [(value)]="currentMinute"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-custom-select>
+                  <app-custom-select
+                    class="ampm-select"
+                    [options]="ampmOptions"
+                    [(value)]="isPm"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-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>
+      }
     </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}: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-container{display:flex}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:10px;padding:16px;background:var(--datepicker-background)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2;gap:5px}.ngxsmk-month-year-selects{display:flex;gap:5px}.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-buttons{display:flex}.ngxsmk-nav-button{background:none;border:none;padding:8px;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-days-grid-wrapper{position:relative}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.ngxsmk-day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-number{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);position:relative;z-index:1}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number{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.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ngxsmk-ranges-container ul{list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-time-selection{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.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-separator{font-weight:600;font-size:1.1rem;color:var(--datepicker-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CustomSelectComponent, selector: "app-custom-select", inputs: ["options", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+  `, 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;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:border-color .15s ease}.ngxsmk-input-group:hover:not(.disabled){border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.disabled{cursor:not-allowed;opacity:.7}.ngxsmk-display-input{flex-grow:1;padding:6px 8px;font-size:14px;color:var(--datepicker-text-color, #333);background:transparent;border:none;outline:none;cursor:pointer}.ngxsmk-display-input:disabled{background:var(--datepicker-hover-background, #f0f0f0);cursor:not-allowed}.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;border:1px solid var(--datepicker-border-color)}.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:6px 12px;border-radius:6px;font-size:.9rem;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;border-radius:10px;padding:12px;background:var(--datepicker-background);box-shadow:0 4px 10px #0000001a;width:100%}.ngxsmk-ranges-container{width:100%;padding:12px;border-right:none;border-bottom:1px solid var(--datepicker-border-color);background:var(--datepicker-hover-background);border-radius:10px 10px 0 0}.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:6px 10px;margin-bottom:0;font-size:.85rem;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-wrapper{overflow-x:hidden}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0;transition:transform .3s ease-out,opacity .15s ease-out .15s}.ngxsmk-days-grid.animate-forward{transform:translate(-100%);opacity:0}.ngxsmk-days-grid.animate-backward{transform:translate(100%);opacity:0}.ngxsmk-day-name{font-size:.75rem;padding:6px 0;color:var(--datepicker-subtle-text-color);font-weight:600}.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:.9rem;position:relative;z-index:1}.ngxsmk-time-selection{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px;padding-top:8px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.ngxsmk-time-separator{font-weight:600;color:var(--datepicker-text-color)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 55px;height:28px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 65px}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number,.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{border:1px dashed var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected:hover .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.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:16px;box-shadow:0 4px 10px #0000001a;width:auto;border-radius:0 10px 10px 0}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);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:10px;margin-bottom:8px;border:none;font-size:1rem}.ngxsmk-header{margin-bottom:12px;gap:5px}.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:8px}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-day-name{font-size:.8rem;padding:8px 0}.ngxsmk-day-cell{height:38px}.ngxsmk-day-number{width:36px;height:36px;font-size:1rem}.ngxsmk-time-selection{margin-top:16px;padding-top:12px}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}}\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: "app-custom-select", inputs: ["options", "value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngxsmk-datepicker', standalone: true, imports: [CommonModule, FormsModule, CustomSelectComponent], template: `
-    <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)">{{ range.key }}</li>
-            }
-          </ul>
+            args: [{ selector: 'ngxsmk-datepicker', standalone: true, imports: [CommonModule, FormsModule, CustomSelectComponent, DatePipe, ReactiveFormsModule], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxsmkDatepickerComponent),
+                            multi: true
+                        }], 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>
       }
-      <div class="ngxsmk-calendar-container">
-        <div class="ngxsmk-header">
-          <div class="ngxsmk-month-year-selects">
-            <app-custom-select class="month-select" [options]="monthOptions"
-                               [(value)]="currentMonth"></app-custom-select>
-            <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear"></app-custom-select>
-          </div>
-          <div class="ngxsmk-nav-buttons">
-            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)">
-              <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)">
-              <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]="!day" [class.disabled]="isDateDisabled(day)" [class.today]="isSameDay(day, today)"
-                   [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
-                   [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">{{ day | date : 'd' }}</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>
-        </div>
+            <div class="ngxsmk-calendar-container">
+              <div class="ngxsmk-header">
+                <div class="ngxsmk-month-year-selects">
+                  <app-custom-select class="month-select" [options]="monthOptions"
+                                    [(value)]="currentMonth" [disabled]="disabled"></app-custom-select>
+                  <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear" [disabled]="disabled"></app-custom-select>
+                </div>
+                <div class="ngxsmk-nav-buttons">
+                  <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="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"
+                    [class.animate-forward]="animateForward" 
+                    [class.animate-backward]="animateBackward">
+                  @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]="!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>
-            <app-custom-select
-              class="hour-select"
-              [options]="hourOptions"
-              [(value)]="currentDisplayHour"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
-            <span class="ngxsmk-time-separator">:</span>
-            <app-custom-select
-              class="minute-select"
-              [options]="minuteOptions"
-              [(value)]="currentMinute"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
-            <app-custom-select
-              class="ampm-select"
-              [options]="ampmOptions"
-              [(value)]="isPm"
-              (valueChange)="onTimeChange()"
-            ></app-custom-select>
+              @if (showTime) {
+                <div class="ngxsmk-time-selection">
+                  <span class="ngxsmk-time-label">Time:</span>
+                  <app-custom-select
+                    class="hour-select"
+                    [options]="hourOptions"
+                    [(value)]="currentDisplayHour"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-custom-select>
+                  <span class="ngxsmk-time-separator">:</span>
+                  <app-custom-select
+                    class="minute-select"
+                    [options]="minuteOptions"
+                    [(value)]="currentMinute"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-custom-select>
+                  <app-custom-select
+                    class="ampm-select"
+                    [options]="ampmOptions"
+                    [(value)]="isPm"
+                    (valueChange)="onTimeChange()"
+                    [disabled]="disabled"
+                  ></app-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>
+      }
     </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}: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-container{display:flex}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:10px;padding:16px;background:var(--datepicker-background)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2;gap:5px}.ngxsmk-month-year-selects{display:flex;gap:5px}.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-buttons{display:flex}.ngxsmk-nav-button{background:none;border:none;padding:8px;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-days-grid-wrapper{position:relative}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.ngxsmk-day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-number{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);position:relative;z-index:1}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number{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.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ngxsmk-ranges-container ul{list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-time-selection{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.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-separator{font-weight:600;font-size:1.1rem;color:var(--datepicker-text-color)}\n"] }]
+  `, 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;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:border-color .15s ease}.ngxsmk-input-group:hover:not(.disabled){border-color:var(--datepicker-primary-color)}.ngxsmk-input-group.disabled{cursor:not-allowed;opacity:.7}.ngxsmk-display-input{flex-grow:1;padding:6px 8px;font-size:14px;color:var(--datepicker-text-color, #333);background:transparent;border:none;outline:none;cursor:pointer}.ngxsmk-display-input:disabled{background:var(--datepicker-hover-background, #f0f0f0);cursor:not-allowed}.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;border:1px solid var(--datepicker-border-color)}.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:6px 12px;border-radius:6px;font-size:.9rem;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;border-radius:10px;padding:12px;background:var(--datepicker-background);box-shadow:0 4px 10px #0000001a;width:100%}.ngxsmk-ranges-container{width:100%;padding:12px;border-right:none;border-bottom:1px solid var(--datepicker-border-color);background:var(--datepicker-hover-background);border-radius:10px 10px 0 0}.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:6px 10px;margin-bottom:0;font-size:.85rem;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-wrapper{overflow-x:hidden}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0;transition:transform .3s ease-out,opacity .15s ease-out .15s}.ngxsmk-days-grid.animate-forward{transform:translate(-100%);opacity:0}.ngxsmk-days-grid.animate-backward{transform:translate(100%);opacity:0}.ngxsmk-day-name{font-size:.75rem;padding:6px 0;color:var(--datepicker-subtle-text-color);font-weight:600}.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:.9rem;position:relative;z-index:1}.ngxsmk-time-selection{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px;padding-top:8px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.ngxsmk-time-separator{font-weight:600;color:var(--datepicker-text-color)}.ngxsmk-time-selection app-custom-select{--custom-select-width: 55px;height:28px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 65px}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number,.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected .ngxsmk-day-number{border:1px dashed var(--datepicker-primary-contrast)}.ngxsmk-day-cell.multiple-selected:hover .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.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:16px;box-shadow:0 4px 10px #0000001a;width:auto;border-radius:0 10px 10px 0}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);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:10px;margin-bottom:8px;border:none;font-size:1rem}.ngxsmk-header{margin-bottom:12px;gap:5px}.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:8px}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-day-name{font-size:.8rem;padding:8px 0}.ngxsmk-day-cell{height:38px}.ngxsmk-day-number{width:36px;height:36px;font-size:1rem}.ngxsmk-time-selection{margin-top:16px;padding-top:12px}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], isInvalidDate: [{
@@ -608,7 +915,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], minuteInterval: [{
                 type: Input
-            }], value: [{
+            }], holidayProvider: [{
+                type: Input
+            }], disableHolidays: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], inline: [{
                 type: Input
             }], startAt: [{
                 type: Input
@@ -619,14 +932,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], isDarkMode: [{
                 type: HostBinding,
                 args: ['class.dark-theme']
+            }], disabledState: [{
+                type: Input
             }], valueChange: [{
                 type: Output
+            }], action: [{
+                type: Output
             }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
             }], ranges: [{
                 type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 /*