ngxsmk-datepicker 1.3.6 → 1.3.8

package/fesm2022/ngxsmk-datepicker.mjs

@@ -1,9 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, forwardRef, HostBinding } from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, 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';
 
+/**
+ * Date utility functions for ngxsmk-datepicker
+ * Extracted to improve tree-shaking and reduce bundle size
+ */
 function getStartOfDay(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
 }
@@ -26,6 +30,119 @@ function getStartOfMonth(d) {
 function getEndOfMonth(d) {
     return new Date(d.getFullYear(), d.getMonth() + 1, 0);
 }
+function isSameDay(d1, d2) {
+    if (!d1 || !d2)
+        return false;
+    return (d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate());
+}
+function normalizeDate(date) {
+    if (!date)
+        return null;
+    const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date.toDate ? date.toDate() : date);
+    if (isNaN(d.getTime()))
+        return null;
+    return d;
+}
+
+/**
+ * Calendar utility functions for ngxsmk-datepicker
+ * Optimized for performance and tree-shaking
+ */
+/**
+ * Generate month options for dropdown
+ */
+function generateMonthOptions(locale, year) {
+    return Array.from({ length: 12 }).map((_, i) => ({
+        label: new Date(year, i, 1).toLocaleDateString(locale, { month: 'long' }),
+        value: i,
+    }));
+}
+/**
+ * Generate year options for dropdown
+ */
+function generateYearOptions(currentYear, range = 10) {
+    const startYear = currentYear - range;
+    const endYear = currentYear + range;
+    const options = [];
+    for (let i = startYear; i <= endYear; i++) {
+        options.push({ label: `${i}`, value: i });
+    }
+    return options;
+}
+/**
+ * Generate time options for hour/minute dropdowns
+ */
+function generateTimeOptions(minuteInterval = 1) {
+    const hourOptions = Array.from({ length: 12 }).map((_, i) => ({
+        label: (i + 1).toString().padStart(2, '0'),
+        value: i + 1,
+    }));
+    const minuteOptions = [];
+    for (let i = 0; i < 60; i += minuteInterval) {
+        minuteOptions.push({
+            label: i.toString().padStart(2, '0'),
+            value: i,
+        });
+    }
+    return { hourOptions, minuteOptions };
+}
+/**
+ * Generate week days for calendar header
+ */
+function generateWeekDays(locale, firstDayOfWeek = 0) {
+    const day = new Date(2024, 0, 7 + firstDayOfWeek);
+    return Array.from({ length: 7 }).map(() => {
+        const weekDay = new Date(day).toLocaleDateString(locale, { weekday: 'short' });
+        day.setDate(day.getDate() + 1);
+        return weekDay;
+    });
+}
+/**
+ * Get first day of week for locale
+ */
+function getFirstDayOfWeek(locale) {
+    try {
+        return (new Intl.Locale(locale).weekInfo?.firstDay || 0) % 7;
+    }
+    catch (e) {
+        return 0;
+    }
+}
+/**
+ * Convert 12-hour to 24-hour format
+ */
+function get24Hour(displayHour, isPm) {
+    if (isPm) {
+        return displayHour === 12 ? 12 : displayHour + 12;
+    }
+    return displayHour === 12 ? 0 : displayHour;
+}
+/**
+ * Convert 24-hour to 12-hour format
+ */
+function update12HourState(fullHour) {
+    return {
+        isPm: fullHour >= 12,
+        displayHour: fullHour % 12 || 12
+    };
+}
+/**
+ * Process date ranges input
+ */
+function processDateRanges(ranges) {
+    if (!ranges)
+        return null;
+    return Object.entries(ranges).reduce((acc, [key, dates]) => {
+        const start = normalizeDate(dates[0]);
+        const end = normalizeDate(dates[1]);
+        if (start && end)
+            acc[key] = [start, end];
+        return acc;
+    }, {});
+}
+
 class CustomSelectComponent {
     constructor() {
         this.options = [];
@@ -53,7 +170,7 @@ 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", disabled: "disabled" }, 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: "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>
@@ -78,7 +195,7 @@ class CustomSelectComponent {
 }
 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: `
+            args: [{ selector: 'ngxsmk-custom-select', standalone: true, imports: [CommonModule], template: `
     <div class="ngxsmk-select-container" (click)="toggleDropdown()">
       <button type="button" class="ngxsmk-select-display" [disabled]="disabled">
         <span>{{ displayValue }}</span>
@@ -112,6 +229,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
+
+/**
+ * Performance utilities for ngxsmk-datepicker
+ * Optimized for better runtime performance
+ */
+/**
+ * Memoization decorator for expensive computations
+ */
+function memoize(fn, keyGenerator) {
+    const cache = new Map();
+    return ((...args) => {
+        const key = keyGenerator ? keyGenerator(...args) : JSON.stringify(args);
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = fn(...args);
+        cache.set(key, result);
+        return result;
+    });
+}
+/**
+ * Debounce function for performance optimization
+ */
+function debounce(func, wait) {
+    let timeout = null;
+    return (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = window.setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+}
+/**
+ * Throttle function for performance optimization
+ */
+function throttle(func, limit) {
+    let inThrottle = false;
+    return (...args) => {
+        if (!inThrottle) {
+            func(...args);
+            inThrottle = true;
+            window.setTimeout(() => (inThrottle = false), limit);
+        }
+    };
+}
+/**
+ * Create a shallow comparison function for objects
+ */
+function shallowEqual(a, b) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    for (const key of keysA) {
+        if (a[key] !== b[key]) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Optimized date comparison for calendar rendering
+ */
+function createDateComparator() {
+    const cache = new Map();
+    return (date1, date2) => {
+        if (!date1 || !date2)
+            return date1 === date2;
+        const key = `${date1.getTime()}-${date2.getTime()}`;
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+        cache.set(key, result);
+        return result;
+    };
+}
+/**
+ * Optimized array filtering with caching
+ */
+function createFilteredArray(source, filterFn, cacheKey) {
+    const cache = new Map();
+    const key = cacheKey || JSON.stringify(source);
+    if (cache.has(key)) {
+        return cache.get(key);
+    }
+    const result = source.filter(filterFn);
+    cache.set(key, result);
+    return result;
+}
+
 class NgxsmkDatepickerComponent {
     constructor() {
         this.mode = 'single';
@@ -167,6 +380,7 @@ class NgxsmkDatepickerComponent {
         this.animateForward = false;
         this.animateBackward = false;
         this.elementRef = inject(ElementRef);
+        this.dateComparator = createDateComparator();
     }
     set startAt(value) { this._startAtDate = this._normalizeDate(value); }
     set locale(value) { this._locale = value; }
@@ -176,18 +390,7 @@ class NgxsmkDatepickerComponent {
     set minDate(value) { this._minDate = this._normalizeDate(value); }
     set maxDate(value) { this._maxDate = this._normalizeDate(value); }
     set ranges(value) {
-        if (!value) {
-            this._ranges = null;
-        }
-        else {
-            this._ranges = Object.entries(value).reduce((acc, [key, dates]) => {
-                const start = this._normalizeDate(dates[0]);
-                const end = this._normalizeDate(dates[1]);
-                if (start && end)
-                    acc[key] = [start, end];
-                return acc;
-            }, {});
-        }
+        this._ranges = processDateRanges(value);
         this.updateRangesArray();
     }
     get isInlineMode() {
@@ -342,14 +545,12 @@ class NgxsmkDatepickerComponent {
         }
     }
     get24Hour(displayHour, isPm) {
-        if (isPm) {
-            return displayHour === 12 ? 12 : displayHour + 12;
-        }
-        return displayHour === 12 ? 0 : displayHour;
+        return get24Hour(displayHour, isPm);
     }
     update12HourState(fullHour) {
-        this.isPm = fullHour >= 12;
-        this.currentDisplayHour = fullHour % 12 || 12;
+        const state = update12HourState(fullHour);
+        this.isPm = state.isPm;
+        this.currentDisplayHour = state.displayHour;
     }
     applyCurrentTime(date) {
         this.currentHour = this.get24Hour(this.currentDisplayHour, this.isPm);
@@ -389,44 +590,18 @@ class NgxsmkDatepickerComponent {
         }
     }
     _normalizeDate(date) {
-        if (!date)
-            return null;
-        const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date.toDate ? date.toDate() : date);
-        if (isNaN(d.getTime()))
-            return null;
-        return d;
+        return normalizeDate(date);
     }
     generateTimeOptions() {
-        this.hourOptions = Array.from({ length: 12 }).map((_, i) => ({
-            label: (i + 1).toString().padStart(2, '0'),
-            value: i + 1,
-        }));
-        this.minuteOptions = [];
-        for (let i = 0; i < 60; i += this.minuteInterval) {
-            this.minuteOptions.push({
-                label: i.toString().padStart(2, '0'),
-                value: i,
-            });
-        }
+        const { hourOptions, minuteOptions } = generateTimeOptions(this.minuteInterval);
+        this.hourOptions = hourOptions;
+        this.minuteOptions = minuteOptions;
     }
     generateLocaleData() {
         const year = new Date().getFullYear();
-        this.monthOptions = Array.from({ length: 12 }).map((_, i) => ({
-            label: new Date(year, i, 1).toLocaleDateString(this.locale, { month: 'long' }),
-            value: i,
-        }));
-        try {
-            this.firstDayOfWeek = (new Intl.Locale(this.locale).weekInfo?.firstDay || 0) % 7;
-        }
-        catch (e) {
-            this.firstDayOfWeek = 0;
-        }
-        const day = new Date(year, 0, 7 + this.firstDayOfWeek);
-        this.weekDays = Array.from({ length: 7 }).map(() => {
-            const weekDay = new Date(day).toLocaleDateString(this.locale, { weekday: 'short' });
-            day.setDate(day.getDate() + 1);
-            return weekDay;
-        });
+        this.monthOptions = generateMonthOptions(this.locale, year);
+        this.firstDayOfWeek = getFirstDayOfWeek(this.locale);
+        this.weekDays = generateWeekDays(this.locale, this.firstDayOfWeek);
     }
     updateRangesArray() {
         this.rangesArray = this._ranges ? Object.entries(this._ranges).map(([key, value]) => ({ key, value })) : [];
@@ -604,12 +779,7 @@ class NgxsmkDatepickerComponent {
         });
     }
     generateDropdownOptions() {
-        const startYear = this._currentYear - 10;
-        const endYear = this._currentYear + 10;
-        this.yearOptions = [];
-        for (let i = startYear; i <= endYear; i++) {
-            this.yearOptions.push({ label: `${i}`, value: i });
-        }
+        this.yearOptions = generateYearOptions(this._currentYear);
     }
     changeMonth(delta) {
         if (this.disabled)
@@ -639,11 +809,7 @@ class NgxsmkDatepickerComponent {
         this.action.emit({ type: 'monthChanged', payload: { delta: delta } });
     }
     isSameDay(d1, d2) {
-        if (!d1 || !d2)
-            return false;
-        return (d1.getFullYear() === d2.getFullYear() &&
-            d1.getMonth() === d2.getMonth() &&
-            d1.getDate() === d2.getDate());
+        return this.dateComparator(d1, d2);
     }
     isInRange(d) {
         if (!d || !this.startDate || !this.endDate)
@@ -655,6 +821,10 @@ class NgxsmkDatepickerComponent {
         const endTime = Math.max(startDayTime, endDayTime);
         return dTime > startTime && dTime < endTime;
     }
+    ngOnDestroy() {
+        // Clean up any subscriptions or timers if needed
+        // Currently no cleanup required, but method is here for future optimizations
+    }
     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", 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,
@@ -691,9 +861,9 @@ class NgxsmkDatepickerComponent {
             <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>
+                  <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">
@@ -740,28 +910,28 @@ class NgxsmkDatepickerComponent {
               @if (showTime) {
                 <div class="ngxsmk-time-selection">
                   <span class="ngxsmk-time-label">Time:</span>
-                  <app-custom-select
+                  <ngxsmk-custom-select
                     class="hour-select"
                     [options]="hourOptions"
                     [(value)]="currentDisplayHour"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
+                  ></ngxsmk-custom-select>
                   <span class="ngxsmk-time-separator">:</span>
-                  <app-custom-select
+                  <ngxsmk-custom-select
                     class="minute-select"
                     [options]="minuteOptions"
                     [(value)]="currentMinute"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
-                  <app-custom-select
+                  ></ngxsmk-custom-select>
+                  <ngxsmk-custom-select
                     class="ampm-select"
                     [options]="ampmOptions"
                     [(value)]="isPm"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
+                  ></ngxsmk-custom-select>
                 </div>
               }
               
@@ -778,7 +948,7 @@ class NgxsmkDatepickerComponent {
         </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;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" }] }); }
+  `, 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: "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.4", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
             type: Component,
@@ -786,7 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NgxsmkDatepickerComponent),
                             multi: true
-                        }], template: `
+                        }], 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">
@@ -817,9 +987,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             <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>
+                  <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">
@@ -866,28 +1036,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
               @if (showTime) {
                 <div class="ngxsmk-time-selection">
                   <span class="ngxsmk-time-label">Time:</span>
-                  <app-custom-select
+                  <ngxsmk-custom-select
                     class="hour-select"
                     [options]="hourOptions"
                     [(value)]="currentDisplayHour"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
+                  ></ngxsmk-custom-select>
                   <span class="ngxsmk-time-separator">:</span>
-                  <app-custom-select
+                  <ngxsmk-custom-select
                     class="minute-select"
                     [options]="minuteOptions"
                     [(value)]="currentMinute"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
-                  <app-custom-select
+                  ></ngxsmk-custom-select>
+                  <ngxsmk-custom-select
                     class="ampm-select"
                     [options]="ampmOptions"
                     [(value)]="isPm"
                     (valueChange)="onTimeChange()"
                     [disabled]="disabled"
-                  ></app-custom-select>
+                  ></ngxsmk-custom-select>
                 </div>
               }
               
@@ -957,5 +1127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CustomSelectComponent, NgxsmkDatepickerComponent };
+export { CustomSelectComponent, NgxsmkDatepickerComponent, addMonths, generateMonthOptions, generateTimeOptions, generateWeekDays, generateYearOptions, get24Hour, getEndOfDay, getEndOfMonth, getFirstDayOfWeek, getStartOfDay, getStartOfMonth, isSameDay, normalizeDate, processDateRanges, subtractDays, update12HourState };
 //# sourceMappingURL=ngxsmk-datepicker.mjs.map