ngxsmk-datepicker 1.0.8 → 1.1.0

package/fesm2022/ngxsmk-datepicker.mjs

@@ -0,0 +1,494 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Component, PLATFORM_ID, HostBinding, Inject } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+// #####################################################################
+// ## Reusable Custom Select Component
+// #####################################################################
+class CustomSelectComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.options = [];
+        this.valueChange = new EventEmitter();
+        this.isOpen = false;
+    }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target))
+            this.isOpen = false;
+    }
+    get displayValue() {
+        const selectedOption = this.options.find((opt) => opt.value === this.value);
+        return selectedOption ? selectedOption.label : '';
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+    }
+    selectOption(option) {
+        this.value = option.value;
+        this.valueChange.emit(this.value);
+        this.isOpen = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ElementRef }], 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: `
+    <div class="custom-select-container" (click)="toggleDropdown()">
+      <button type="button" class="select-display">
+        <span>{{ displayValue }}</span>
+        <svg class="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"
+                d="M112 184l144 144 144-144"/>
+        </svg>
+      </button>
+      @if (isOpen) {
+        <div class="options-panel">
+          <ul>
+            @for (option of options; track option.value) {
+              <li [class.selected]="option.value === value" (click)="selectOption(option); $event.stopPropagation()">
+                {{ option.label }}
+              </li>
+            }
+          </ul>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{position:relative;display:inline-block}.custom-select-container{cursor:pointer}.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:1rem;text-align:left}.arrow-icon{width:12px;height:12px;margin-left:8px}.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:10}.options-panel ul{list-style:none;padding:4px;margin:0}.options-panel li{padding:8px 12px;border-radius:4px;cursor:pointer}.options-panel li:hover{background-color:var(--datepicker-hover-background, #f0f0f0)}.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="custom-select-container" (click)="toggleDropdown()">
+      <button type="button" class="select-display">
+        <span>{{ displayValue }}</span>
+        <svg class="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"
+                d="M112 184l144 144 144-144"/>
+        </svg>
+      </button>
+      @if (isOpen) {
+        <div class="options-panel">
+          <ul>
+            @for (option of options; track option.value) {
+              <li [class.selected]="option.value === value" (click)="selectOption(option); $event.stopPropagation()">
+                {{ option.label }}
+              </li>
+            }
+          </ul>
+        </div>
+      }
+    </div>
+  `, styles: [":host{position:relative;display:inline-block}.custom-select-container{cursor:pointer}.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:1rem;text-align:left}.arrow-icon{width:12px;height:12px;margin-left:8px}.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:10}.options-panel ul{list-style:none;padding:4px;margin:0}.options-panel li{padding:8px 12px;border-radius:4px;cursor:pointer}.options-panel li:hover{background-color:var(--datepicker-hover-background, #f0f0f0)}.options-panel li.selected{background-color:var(--datepicker-primary-color, #3880ff);color:var(--datepicker-primary-contrast, #fff)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+class NgxsmkDatepickerComponent {
+    set locale(value) {
+        this._locale = value;
+    }
+    get locale() {
+        return this._locale;
+    }
+    get isDarkMode() {
+        return this.theme === 'dark';
+    }
+    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.updateRangesArray();
+    }
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.mode = 'single';
+        this.isInvalidDate = () => false;
+        this.showRanges = true;
+        // New Input for initial value
+        this.value = null;
+        this._locale = 'en-US';
+        this.theme = 'light';
+        this.valueChange = new EventEmitter();
+        this._minDate = null;
+        this._maxDate = null;
+        this._ranges = null;
+        this.currentDate = new Date();
+        this.daysInMonth = [];
+        this.weekDays = [];
+        this.today = new Date();
+        this.selectedDate = null;
+        this.startDate = null;
+        this.endDate = null;
+        this.hoveredDate = null;
+        this.rangesArray = [];
+        this.monthOptions = [];
+        this.yearOptions = [];
+        this.firstDayOfWeek = 0;
+        if (isPlatformBrowser(this.platformId)) {
+            this._locale = navigator.language;
+        }
+    }
+    get currentMonth() {
+        return this._currentMonth;
+    }
+    set currentMonth(month) {
+        if (this._currentMonth !== month) {
+            this._currentMonth = month;
+            this.currentDate.setMonth(month);
+            this.generateCalendar();
+        }
+    }
+    get currentYear() {
+        return this._currentYear;
+    }
+    set currentYear(year) {
+        if (this._currentYear !== year) {
+            this._currentYear = year;
+            this.currentDate.setFullYear(year);
+            this.generateCalendar();
+        }
+    }
+    ngOnInit() {
+        this.today.setHours(0, 0, 0, 0);
+        this.generateLocaleData();
+        // Initialize current date based on pre-selected value if available
+        if (this.value) {
+            this.initializeValue(this.value);
+        }
+        this.generateCalendar();
+    }
+    ngOnChanges(changes) {
+        if (changes['locale']) {
+            this.generateLocaleData();
+            this.generateCalendar();
+        }
+        // Handle external value change (e.g., when the modal is first opened)
+        if (changes['value'] && changes['value'].currentValue !== changes['value'].previousValue) {
+            this.initializeValue(changes['value'].currentValue);
+            this.generateCalendar(); // Regenerate to update highlights
+        }
+    }
+    initializeValue(value) {
+        if (!value) {
+            this.selectedDate = null;
+            this.startDate = null;
+            this.endDate = null;
+            return;
+        }
+        if (this.mode === 'single' && value instanceof Date) {
+            this.selectedDate = this._normalizeDate(value);
+            if (this.selectedDate) {
+                this.currentDate = new Date(this.selectedDate);
+            }
+        }
+        else if (this.mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {
+            this.startDate = this._normalizeDate(value.start);
+            this.endDate = this._normalizeDate(value.end);
+            if (this.startDate) {
+                this.currentDate = new Date(this.startDate);
+            }
+        }
+    }
+    _normalizeDate(date) {
+        if (!date)
+            return null;
+        const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date);
+        if (isNaN(d.getTime()))
+            return null;
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    generateLocaleData() {
+        this.monthOptions = Array.from({ length: 12 }).map((_, i) => ({
+            label: new Date(2024, 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(2024, 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;
+        });
+    }
+    updateRangesArray() {
+        this.rangesArray = this._ranges ? Object.entries(this._ranges).map(([key, value]) => ({ key, value })) : [];
+    }
+    selectRange(range) {
+        this.startDate = range[0];
+        this.endDate = range[1];
+        this.valueChange.emit({ start: this.startDate, end: this.endDate });
+        this.currentDate = new Date(this.startDate);
+        this.generateCalendar();
+    }
+    isDateDisabled(date) {
+        if (!date)
+            return false;
+        if (this._minDate && date < this._minDate)
+            return true;
+        if (this._maxDate && date > this._maxDate)
+            return true;
+        if (this.isInvalidDate(date))
+            return true;
+        return false;
+    }
+    onDateClick(day) {
+        if (!day || this.isDateDisabled(day))
+            return;
+        if (this.mode === 'single') {
+            this.selectedDate = day;
+            this.valueChange.emit(this.selectedDate);
+        }
+        else {
+            if (!this.startDate || (this.startDate && this.endDate)) {
+                this.startDate = day;
+                this.endDate = null;
+            }
+            else if (day >= this.startDate) {
+                this.endDate = day;
+                this.valueChange.emit({ start: this.startDate, end: this.endDate });
+            }
+            else {
+                this.startDate = day;
+                this.endDate = null;
+            }
+            this.hoveredDate = null;
+        }
+    }
+    onDateHover(day) {
+        if (this.mode === 'range' && this.startDate && !this.endDate && day) {
+            this.hoveredDate = day;
+        }
+    }
+    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();
+        return time > Math.min(start, end) && time < Math.max(start, end);
+    }
+    generateCalendar() {
+        this.daysInMonth = [];
+        const year = this.currentDate.getFullYear();
+        const month = this.currentDate.getMonth();
+        this._currentMonth = month;
+        this._currentYear = year;
+        this.generateDropdownOptions();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        const startDayOfWeek = firstDayOfMonth.getDay();
+        const emptyCellCount = (startDayOfWeek - this.firstDayOfWeek + 7) % 7;
+        for (let i = 0; i < emptyCellCount; i++) {
+            this.daysInMonth.push(null);
+        }
+        for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+            this.daysInMonth.push(this._normalizeDate(new Date(year, month, i)));
+        }
+    }
+    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 });
+        }
+    }
+    changeMonth(delta) {
+        this.currentDate.setMonth(this.currentDate.getMonth() + delta);
+        this.generateCalendar();
+    }
+    isSameDay(d1, d2) {
+        if (!d1 || !d2)
+            return false;
+        return (d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate());
+    }
+    isInRange(d) {
+        if (!d || !this.startDate || !this.endDate)
+            return false;
+        return (d.getTime() > this.startDate.getTime() &&
+            d.getTime() < this.endDate.getTime());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [{ token: PLATFORM_ID }], 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", value: "value", 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="datepicker-container">
+      @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+        <div class="ranges-container">
+          <ul>
+            @for (range of rangesArray; track range.key) {
+              <li (click)="selectRange(range.value)">{{ range.key }}</li>
+            }
+          </ul>
+        </div>
+      }
+      <div class="calendar-container">
+        <div class="header">
+          <div class="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="nav-buttons">
+            <button type="button" class="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="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="days-grid-wrapper">
+          <div class="days-grid">
+            @for (day of weekDays; track day) {
+              <div class="day-name">{{ day }}</div>
+            }
+            @for (day of daysInMonth; track $index) {
+              <div class="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="day-number">{{ day | date : 'd' }}</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}.datepicker-container{display:flex}.calendar-container{width:320px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border:1px solid var(--datepicker-border-color);border-radius:10px;padding:16px;background:var(--datepicker-background);overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2}.month-year-selects{display:flex;gap:8px}.month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.nav-buttons{display:flex}.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)}.nav-button:hover{background-color:var(--datepicker-hover-background)}.nav-button svg{width:18px;height:18px}.days-grid-wrapper{position:relative}.days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.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}.day-cell:not(.disabled):hover .day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.day-cell.start-date .day-number,.day-cell.end-date .day-number,.day-cell.selected .day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.day-cell.in-range,.day-cell.start-date,.day-cell.end-date,.day-cell.preview-range{background-color:var(--datepicker-range-background)}.day-cell.start-date{border-top-left-radius:50px;border-bottom-left-radius:50px}.day-cell.end-date{border-top-right-radius:50px;border-bottom-right-radius:50px}.day-cell.start-date.end-date{border-radius:50px}.day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.day-cell.today .day-number{border:1px solid var(--datepicker-primary-color)}.ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ranges-container ul{list-style:none;padding:0;margin:0}.ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ranges-container li:hover{background-color:var(--datepicker-hover-background)}\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" }] }); }
+}
+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="datepicker-container">
+      @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+        <div class="ranges-container">
+          <ul>
+            @for (range of rangesArray; track range.key) {
+              <li (click)="selectRange(range.value)">{{ range.key }}</li>
+            }
+          </ul>
+        </div>
+      }
+      <div class="calendar-container">
+        <div class="header">
+          <div class="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="nav-buttons">
+            <button type="button" class="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="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="days-grid-wrapper">
+          <div class="days-grid">
+            @for (day of weekDays; track day) {
+              <div class="day-name">{{ day }}</div>
+            }
+            @for (day of daysInMonth; track $index) {
+              <div class="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="day-number">{{ day | date : 'd' }}</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}.datepicker-container{display:flex}.calendar-container{width:320px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border:1px solid var(--datepicker-border-color);border-radius:10px;padding:16px;background:var(--datepicker-background);overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2}.month-year-selects{display:flex;gap:8px}.month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.nav-buttons{display:flex}.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)}.nav-button:hover{background-color:var(--datepicker-hover-background)}.nav-button svg{width:18px;height:18px}.days-grid-wrapper{position:relative}.days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.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}.day-cell:not(.disabled):hover .day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.day-cell.start-date .day-number,.day-cell.end-date .day-number,.day-cell.selected .day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.day-cell.in-range,.day-cell.start-date,.day-cell.end-date,.day-cell.preview-range{background-color:var(--datepicker-range-background)}.day-cell.start-date{border-top-left-radius:50px;border-bottom-left-radius:50px}.day-cell.end-date{border-top-right-radius:50px;border-bottom-right-radius:50px}.day-cell.start-date.end-date{border-radius:50px}.day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.day-cell.today .day-number{border:1px solid var(--datepicker-primary-color)}.ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ranges-container ul{list-style:none;padding:0;margin:0}.ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ranges-container li:hover{background-color:var(--datepicker-hover-background)}\n"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { mode: [{
+                type: Input
+            }], isInvalidDate: [{
+                type: Input
+            }], showRanges: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], isDarkMode: [{
+                type: HostBinding,
+                args: ['class.dark-theme']
+            }], valueChange: [{
+                type: Output
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], ranges: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ngxsmk-datepicker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomSelectComponent, NgxsmkDatepickerComponent };
+//# sourceMappingURL=ngxsmk-datepicker.mjs.map

package/fesm2022/ngxsmk-datepicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngxsmk-datepicker.mjs","sources":["../../../projects/ngxsmk-datepicker/src/lib/ngxsmk-datepicker.ts","../../../projects/ngxsmk-datepicker/src/public-api.ts","../../../projects/ngxsmk-datepicker/src/ngxsmk-datepicker.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  HostBinding,\r\n  HostListener,\r\n  Inject,\r\n  Input,\r\n  OnChanges,\r\n  OnInit,\r\n  Output,\r\n  PLATFORM_ID,\r\n  SimpleChanges,\r\n} from '@angular/core';\r\nimport {CommonModule, isPlatformBrowser} from '@angular/common';\r\nimport {FormsModule} from '@angular/forms';\r\n\r\n// #####################################################################\r\n// ## Reusable Custom Select Component\r\n// #####################################################################\r\n@Component({\r\n  selector: 'app-custom-select',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  template: `\r\n    <div class=\"custom-select-container\" (click)=\"toggleDropdown()\">\r\n      <button type=\"button\" class=\"select-display\">\r\n        <span>{{ displayValue }}</span>\r\n        <svg class=\"arrow-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n          <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"48\"\r\n                d=\"M112 184l144 144 144-144\"/>\r\n        </svg>\r\n      </button>\r\n      @if (isOpen) {\r\n        <div class=\"options-panel\">\r\n          <ul>\r\n            @for (option of options; track option.value) {\r\n              <li [class.selected]=\"option.value === value\" (click)=\"selectOption(option); $event.stopPropagation()\">\r\n                {{ option.label }}\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    :host {\r\n      position: relative;\r\n      display: inline-block;\r\n    }\r\n\r\n    .custom-select-container {\r\n      cursor: pointer;\r\n    }\r\n\r\n    .select-display {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      width: var(--custom-select-width, 115px);\r\n      background: var(--datepicker-background, #fff);\r\n      border: 1px solid var(--datepicker-border-color, #ccc);\r\n      color: var(--datepicker-text-color, #333);\r\n      border-radius: 4px;\r\n      padding: 4px 8px;\r\n      font-size: 1rem;\r\n      text-align: left;\r\n    }\r\n\r\n    .arrow-icon {\r\n      width: 12px;\r\n      height: 12px;\r\n      margin-left: 8px;\r\n    }\r\n\r\n    .options-panel {\r\n      position: absolute;\r\n      top: 110%;\r\n      left: 0;\r\n      width: 100%;\r\n      background: var(--datepicker-background, #fff);\r\n      border: 1px solid var(--datepicker-border-color, #ccc);\r\n      color: var(--datepicker-text-color, #333);\r\n      border-radius: 4px;\r\n      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n      max-height: 200px;\r\n      overflow-y: auto;\r\n      z-index: 10;\r\n    }\r\n\r\n    .options-panel ul {\r\n      list-style: none;\r\n      padding: 4px;\r\n      margin: 0;\r\n    }\r\n\r\n    .options-panel li {\r\n      padding: 8px 12px;\r\n      border-radius: 4px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .options-panel li:hover {\r\n      background-color: var(--datepicker-hover-background, #f0f0f0);\r\n    }\r\n\r\n    .options-panel li.selected {\r\n      background-color: var(--datepicker-primary-color, #3880ff);\r\n      color: var(--datepicker-primary-contrast, #fff);\r\n    }\r\n  `],\r\n})\r\nexport class CustomSelectComponent {\r\n  @Input() options: { label: string; value: any }[] = [];\r\n  @Input() value: any;\r\n  @Output() valueChange = new EventEmitter<any>();\r\n  public isOpen = false;\r\n\r\n  constructor(private readonly elementRef: ElementRef) {\r\n  }\r\n\r\n  @HostListener('document:click', ['$event'])\r\n  onDocumentClick(event: MouseEvent): void {\r\n    if (!this.elementRef.nativeElement.contains(event.target)) this.isOpen = false;\r\n  }\r\n\r\n  get displayValue(): string {\r\n    const selectedOption = this.options.find((opt) => opt.value === this.value);\r\n    return selectedOption ? selectedOption.label : '';\r\n  }\r\n\r\n  toggleDropdown(): void {\r\n    this.isOpen = !this.isOpen;\r\n  }\r\n\r\n  selectOption(option: { label: string; value: any }): void {\r\n    this.value = option.value;\r\n    this.valueChange.emit(this.value);\r\n    this.isOpen = false;\r\n  }\r\n}\r\n\r\n// #####################################################################\r\n// ## Datepicker Component\r\n// #####################################################################\r\nexport type DateInput = Date | string | { toDate: () => Date; _isAMomentObject?: boolean; $d?: Date };\r\n\r\nexport interface DateRange {\r\n  [key: string]: [DateInput, DateInput];\r\n}\r\n\r\n@Component({\r\n  selector: 'ngxsmk-datepicker',\r\n  standalone: true,\r\n  imports: [CommonModule, FormsModule, CustomSelectComponent],\r\n  template: `\r\n    <div class=\"datepicker-container\">\r\n      @if (showRanges && rangesArray.length > 0 && mode === 'range') {\r\n        <div class=\"ranges-container\">\r\n          <ul>\r\n            @for (range of rangesArray; track range.key) {\r\n              <li (click)=\"selectRange(range.value)\">{{ range.key }}</li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n      <div class=\"calendar-container\">\r\n        <div class=\"header\">\r\n          <div class=\"month-year-selects\">\r\n            <app-custom-select class=\"month-select\" [options]=\"monthOptions\"\r\n                               [(value)]=\"currentMonth\"></app-custom-select>\r\n            <app-custom-select class=\"year-select\" [options]=\"yearOptions\" [(value)]=\"currentYear\"></app-custom-select>\r\n          </div>\r\n          <div class=\"nav-buttons\">\r\n            <button type=\"button\" class=\"nav-button\" (click)=\"changeMonth(-1)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n                <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"48\"\r\n                      d=\"M328 112L184 256l144 144\"/>\r\n              </svg>\r\n            </button>\r\n            <button type=\"button\" class=\"nav-button\" (click)=\"changeMonth(1)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n                <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"48\"\r\n                      d=\"M184 112l144 144-144 144\"/>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <div class=\"days-grid-wrapper\">\r\n          <div class=\"days-grid\">\r\n            @for (day of weekDays; track day) {\r\n              <div class=\"day-name\">{{ day }}</div>\r\n            }\r\n            @for (day of daysInMonth; track $index) {\r\n              <div class=\"day-cell\"\r\n                   [class.empty]=\"!day\" [class.disabled]=\"isDateDisabled(day)\" [class.today]=\"isSameDay(day, today)\"\r\n                   [class.selected]=\"mode === 'single' && isSameDay(day, selectedDate)\"\r\n                   [class.start-date]=\"mode === 'range' && isSameDay(day, startDate)\"\r\n                   [class.end-date]=\"mode === 'range' && isSameDay(day, endDate)\"\r\n                   [class.in-range]=\"mode === 'range' && isInRange(day)\"\r\n                   [class.preview-range]=\"isPreviewInRange(day)\"\r\n                   (click)=\"onDateClick(day)\" (mouseenter)=\"onDateHover(day)\">\r\n                @if (day) {\r\n                  <div class=\"day-number\">{{ day | date : 'd' }}</div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    :host {\r\n      --datepicker-primary-color: #6d28d9;\r\n      --datepicker-primary-contrast: #ffffff;\r\n      --datepicker-range-background: #f5f3ff;\r\n      --datepicker-background: #ffffff;\r\n      --datepicker-text-color: #222428;\r\n      --datepicker-subtle-text-color: #9ca3af;\r\n      --datepicker-border-color: #e9e9e9;\r\n      --datepicker-hover-background: #f0f0f0;\r\n    }\r\n\r\n    :host(.dark-theme) {\r\n      --datepicker-range-background: rgba(139, 92, 246, 0.2);\r\n      --datepicker-background: #1f2937;\r\n      --datepicker-text-color: #d1d5db;\r\n      --datepicker-subtle-text-color: #6b7280;\r\n      --datepicker-border-color: #4b5563;\r\n      --datepicker-hover-background: #374151;\r\n    }\r\n\r\n    .datepicker-container {\r\n      display: flex;\r\n    }\r\n\r\n    .calendar-container {\r\n      width: 320px;\r\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n      border: 1px solid var(--datepicker-border-color);\r\n      border-radius: 10px;\r\n      padding: 16px;\r\n      background: var(--datepicker-background);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .header {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      margin-bottom: 12px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .month-year-selects {\r\n      display: flex;\r\n      gap: 8px;\r\n    }\r\n\r\n    .month-year-selects app-custom-select.month-select {\r\n      --custom-select-width: 120px;\r\n    }\r\n\r\n    .month-year-selects app-custom-select.year-select {\r\n      --custom-select-width: 90px;\r\n    }\r\n\r\n    .nav-buttons {\r\n      display: flex;\r\n    }\r\n\r\n    .nav-button {\r\n      background: none;\r\n      border: none;\r\n      padding: 8px;\r\n      cursor: pointer;\r\n      border-radius: 50%;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--datepicker-text-color);\r\n    }\r\n\r\n    .nav-button:hover {\r\n      background-color: var(--datepicker-hover-background);\r\n    }\r\n\r\n    .nav-button svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .days-grid-wrapper {\r\n      position: relative;\r\n    }\r\n\r\n    .days-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(7, 1fr);\r\n      text-align: center;\r\n      gap: 0;\r\n    }\r\n\r\n    .day-name {\r\n      font-weight: 600;\r\n      font-size: 0.8rem;\r\n      color: var(--datepicker-subtle-text-color);\r\n      padding: 8px 0;\r\n    }\r\n\r\n    .day-cell {\r\n      position: relative;\r\n      height: 38px;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      cursor: pointer;\r\n      border-radius: 0;\r\n    }\r\n\r\n    .day-number {\r\n      width: 36px;\r\n      height: 36px;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 50%;\r\n      color: var(--datepicker-text-color);\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n\r\n    .day-cell:not(.disabled):hover .day-number {\r\n      background-color: var(--datepicker-hover-background);\r\n      color: var(--datepicker-primary-color);\r\n    }\r\n\r\n    .day-cell.start-date .day-number,\r\n    .day-cell.end-date .day-number,\r\n    .day-cell.selected .day-number {\r\n      background-color: var(--datepicker-primary-color);\r\n      color: var(--datepicker-primary-contrast);\r\n    }\r\n\r\n    .day-cell.in-range, .day-cell.start-date, .day-cell.end-date, .day-cell.preview-range {\r\n      background-color: var(--datepicker-range-background);\r\n    }\r\n\r\n    .day-cell.start-date {\r\n      border-top-left-radius: 50px;\r\n      border-bottom-left-radius: 50px;\r\n    }\r\n\r\n    .day-cell.end-date {\r\n      border-top-right-radius: 50px;\r\n      border-bottom-right-radius: 50px;\r\n    }\r\n\r\n    .day-cell.start-date.end-date {\r\n      border-radius: 50px;\r\n    }\r\n\r\n    .day-cell.disabled {\r\n      background-color: transparent !important;\r\n      color: #4b5563;\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n      opacity: 0.5;\r\n    }\r\n\r\n    .day-cell.today .day-number {\r\n      border: 1px solid var(--datepicker-primary-color);\r\n    }\r\n\r\n    .ranges-container {\r\n      width: 180px;\r\n      padding: 16px;\r\n      border-right: 1px solid var(--datepicker-border-color);\r\n      background: var(--datepicker-background);\r\n    }\r\n\r\n    .ranges-container ul {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0;\r\n    }\r\n\r\n    .ranges-container li {\r\n      padding: 10px;\r\n      margin-bottom: 8px;\r\n      border-radius: 6px;\r\n      cursor: pointer;\r\n      color: var(--datepicker-text-color);\r\n    }\r\n\r\n    .ranges-container li:hover {\r\n      background-color: var(--datepicker-hover-background);\r\n    }\r\n  `],\r\n})\r\nexport class NgxsmkDatepickerComponent implements OnInit, OnChanges {\r\n  @Input() mode: 'single' | 'range' = 'single';\r\n  @Input() isInvalidDate: (date: Date) => boolean = () => false;\r\n  @Input() showRanges: boolean = true;\r\n\r\n  // New Input for initial value\r\n  @Input() value: Date | { start: Date, end: Date } | null = null;\r\n\r\n  private _locale: string = 'en-US';\r\n\r\n  @Input() set locale(value: string) {\r\n    this._locale = value;\r\n  }\r\n\r\n  get locale(): string {\r\n    return this._locale;\r\n  }\r\n\r\n  @Input() theme: 'light' | 'dark' = 'light';\r\n\r\n  @HostBinding('class.dark-theme') get isDarkMode() {\r\n    return this.theme === 'dark';\r\n  }\r\n\r\n  @Output() valueChange = new EventEmitter<Date | { start: Date; end: Date }>();\r\n\r\n  private _minDate: Date | null = null;\r\n\r\n  @Input() set minDate(value: DateInput | null) {\r\n    this._minDate = this._normalizeDate(value);\r\n  }\r\n\r\n  private _maxDate: Date | null = null;\r\n\r\n  @Input() set maxDate(value: DateInput | null) {\r\n    this._maxDate = this._normalizeDate(value);\r\n  }\r\n\r\n  private _ranges: { [key: string]: [Date, Date] } | null = null;\r\n\r\n  @Input() set ranges(value: DateRange | null) {\r\n    if (!value) {\r\n      this._ranges = null;\r\n    } else {\r\n      this._ranges = Object.entries(value).reduce((acc, [key, dates]) => {\r\n        const start = this._normalizeDate(dates[0]);\r\n        const end = this._normalizeDate(dates[1]);\r\n        if (start && end) acc[key] = [start, end];\r\n        return acc;\r\n      }, {} as { [key: string]: [Date, Date] });\r\n    }\r\n    this.updateRangesArray();\r\n  }\r\n\r\n  public currentDate: Date = new Date();\r\n  public daysInMonth: (Date | null)[] = [];\r\n  public weekDays: string[] = [];\r\n  public readonly today: Date = new Date();\r\n  public selectedDate: Date | null = null;\r\n  public startDate: Date | null = null;\r\n  public endDate: Date | null = null;\r\n  public hoveredDate: Date | null = null;\r\n  public rangesArray: { key: string; value: [Date, Date] }[] = [];\r\n  private _currentMonth!: number;\r\n  private _currentYear!: number;\r\n  public monthOptions: { label: string; value: number }[] = [];\r\n  public yearOptions: { label: string; value: number }[] = [];\r\n  private firstDayOfWeek: number = 0;\r\n\r\n  constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {\r\n    if (isPlatformBrowser(this.platformId)) {\r\n      this._locale = navigator.language;\r\n    }\r\n  }\r\n\r\n  get currentMonth(): number {\r\n    return this._currentMonth;\r\n  }\r\n\r\n  set currentMonth(month: number) {\r\n    if (this._currentMonth !== month) {\r\n      this._currentMonth = month;\r\n      this.currentDate.setMonth(month);\r\n      this.generateCalendar();\r\n    }\r\n  }\r\n\r\n  get currentYear(): number {\r\n    return this._currentYear;\r\n  }\r\n\r\n  set currentYear(year: number) {\r\n    if (this._currentYear !== year) {\r\n      this._currentYear = year;\r\n      this.currentDate.setFullYear(year);\r\n      this.generateCalendar();\r\n    }\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.today.setHours(0, 0, 0, 0);\r\n    this.generateLocaleData();\r\n    // Initialize current date based on pre-selected value if available\r\n    if (this.value) {\r\n      this.initializeValue(this.value);\r\n    }\r\n    this.generateCalendar();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['locale']) {\r\n      this.generateLocaleData();\r\n      this.generateCalendar();\r\n    }\r\n\r\n    // Handle external value change (e.g., when the modal is first opened)\r\n    if (changes['value'] && changes['value'].currentValue !== changes['value'].previousValue) {\r\n      this.initializeValue(changes['value'].currentValue);\r\n      this.generateCalendar(); // Regenerate to update highlights\r\n    }\r\n  }\r\n\r\n  private initializeValue(value: Date | { start: Date, end: Date } | null): void {\r\n    if (!value) {\r\n      this.selectedDate = null;\r\n      this.startDate = null;\r\n      this.endDate = null;\r\n      return;\r\n    }\r\n\r\n    if (this.mode === 'single' && value instanceof Date) {\r\n      this.selectedDate = this._normalizeDate(value);\r\n      if (this.selectedDate) {\r\n        this.currentDate = new Date(this.selectedDate);\r\n      }\r\n    } else if (this.mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {\r\n      this.startDate = this._normalizeDate(value.start);\r\n      this.endDate = this._normalizeDate(value.end);\r\n\r\n      if (this.startDate) {\r\n        this.currentDate = new Date(this.startDate);\r\n      }\r\n    }\r\n  }\r\n\r\n  private _normalizeDate(date: DateInput | null): Date | null {\r\n    if (!date) return null;\r\n    const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date as any);\r\n    if (isNaN(d.getTime())) return null;\r\n    d.setHours(0, 0, 0, 0);\r\n    return d;\r\n  }\r\n\r\n  private generateLocaleData(): void {\r\n    this.monthOptions = Array.from({length: 12}).map((_, i) => ({\r\n      label: new Date(2024, i, 1).toLocaleDateString(this.locale, {month: 'long'}),\r\n      value: i,\r\n    }));\r\n    try {\r\n      this.firstDayOfWeek = ((new Intl.Locale(this.locale) as any).weekInfo?.firstDay || 0) % 7;\r\n    } catch (e) {\r\n      this.firstDayOfWeek = 0;\r\n    }\r\n    const day = new Date(2024, 0, 7 + this.firstDayOfWeek);\r\n    this.weekDays = Array.from({length: 7}).map(() => {\r\n      const weekDay = new Date(day).toLocaleDateString(this.locale, {weekday: 'short'});\r\n      day.setDate(day.getDate() + 1);\r\n      return weekDay;\r\n    });\r\n  }\r\n\r\n  private updateRangesArray(): void {\r\n    this.rangesArray = this._ranges ? Object.entries(this._ranges).map(([key, value]) => ({key, value})) : [];\r\n  }\r\n\r\n  public selectRange(range: [Date, Date]): void {\r\n    this.startDate = range[0];\r\n    this.endDate = range[1];\r\n    this.valueChange.emit({start: this.startDate, end: this.endDate});\r\n    this.currentDate = new Date(this.startDate);\r\n    this.generateCalendar();\r\n  }\r\n\r\n  public isDateDisabled(date: Date | null): boolean {\r\n    if (!date) return false;\r\n    if (this._minDate && date < this._minDate) return true;\r\n    if (this._maxDate && date > this._maxDate) return true;\r\n    if (this.isInvalidDate(date)) return true;\r\n    return false;\r\n  }\r\n\r\n  public onDateClick(day: Date | null): void {\r\n    if (!day || this.isDateDisabled(day)) return;\r\n    if (this.mode === 'single') {\r\n      this.selectedDate = day;\r\n      this.valueChange.emit(this.selectedDate);\r\n    } else {\r\n      if (!this.startDate || (this.startDate && this.endDate)) {\r\n        this.startDate = day;\r\n        this.endDate = null;\r\n      } else if (day >= this.startDate) {\r\n        this.endDate = day;\r\n        this.valueChange.emit({start: this.startDate, end: this.endDate});\r\n      } else {\r\n        this.startDate = day;\r\n        this.endDate = null;\r\n      }\r\n      this.hoveredDate = null;\r\n    }\r\n  }\r\n\r\n  public onDateHover(day: Date | null): void {\r\n    if (this.mode === 'range' && this.startDate && !this.endDate && day) {\r\n      this.hoveredDate = day;\r\n    }\r\n  }\r\n\r\n  public isPreviewInRange(day: Date | null): boolean {\r\n    if (this.mode !== 'range' || !this.startDate || this.endDate || !this.hoveredDate || !day) return false;\r\n    const start = this.startDate.getTime();\r\n    const end = this.hoveredDate.getTime();\r\n    const time = day.getTime();\r\n    return time > Math.min(start, end) && time < Math.max(start, end);\r\n  }\r\n\r\n  public generateCalendar(): void {\r\n    this.daysInMonth = [];\r\n    const year = this.currentDate.getFullYear();\r\n    const month = this.currentDate.getMonth();\r\n    this._currentMonth = month;\r\n    this._currentYear = year;\r\n    this.generateDropdownOptions();\r\n    const firstDayOfMonth = new Date(year, month, 1);\r\n    const lastDayOfMonth = new Date(year, month + 1, 0);\r\n    const startDayOfWeek = firstDayOfMonth.getDay();\r\n    const emptyCellCount = (startDayOfWeek - this.firstDayOfWeek + 7) % 7;\r\n\r\n    for (let i = 0; i < emptyCellCount; i++) {\r\n      this.daysInMonth.push(null);\r\n    }\r\n    for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {\r\n      this.daysInMonth.push(this._normalizeDate(new Date(year, month, i)));\r\n    }\r\n  }\r\n\r\n  private generateDropdownOptions(): void {\r\n    const startYear = this._currentYear - 10;\r\n    const endYear = this._currentYear + 10;\r\n    this.yearOptions = [];\r\n    for (let i = startYear; i <= endYear; i++) {\r\n      this.yearOptions.push({label: `${i}`, value: i});\r\n    }\r\n  }\r\n\r\n  public changeMonth(delta: number): void {\r\n    this.currentDate.setMonth(this.currentDate.getMonth() + delta);\r\n    this.generateCalendar();\r\n  }\r\n\r\n  public isSameDay(d1: Date | null, d2: Date | null): boolean {\r\n    if (!d1 || !d2) return false;\r\n    return (\r\n      d1.getFullYear() === d2.getFullYear() &&\r\n      d1.getMonth() === d2.getMonth() &&\r\n      d1.getDate() === d2.getDate()\r\n    );\r\n  }\r\n\r\n  public isInRange(d: Date | null): boolean {\r\n    if (!d || !this.startDate || !this.endDate) return false;\r\n    return (\r\n      d.getTime() > this.startDate.getTime() &&\r\n      d.getTime() < this.endDate.getTime()\r\n    );\r\n  }\r\n}\r\n","/*\r\n * Public API Surface of ngxsmk-datepicker\r\n */\r\n\r\nexport * from './lib/ngxsmk-datepicker';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAiBA;AACA;AACA;MA8Fa,qBAAqB,CAAA;AAMhC,IAAA,WAAA,CAA6B,UAAsB,EAAA;QAAtB,IAAA,CAAA,UAAU,GAAV,UAAU;QAL9B,IAAA,CAAA,OAAO,GAAoC,EAAE;AAE5C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAO;QACxC,IAAA,CAAA,MAAM,GAAG,KAAK;IAGrB;AAGA,IAAA,eAAe,CAAC,KAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;AAAE,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;IAChF;AAEA,IAAA,IAAI,YAAY,GAAA;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC3E,OAAO,cAAc,GAAG,cAAc,CAAC,KAAK,GAAG,EAAE;IACnD;IAEA,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;IAC5B;AAEA,IAAA,YAAY,CAAC,MAAqC,EAAA;AAChD,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;QACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;IACrB;8GA3BW,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzFtB,CAAA;;;;;;;;;;;;;;;;;;;;;AAqBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAtBS,YAAY,EAAA,CAAA,EAAA,CAAA,CAAA;;2FA0FX,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA7FjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,cACjB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,CAAA;;;;;;;;;;;;;;;;;;;;;AAqBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA;+EAqEQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACS,WAAW,EAAA,CAAA;sBAApB;gBAOD,eAAe,EAAA,CAAA;sBADd,YAAY;uBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;MAyR/B,yBAAyB,CAAA;IAUpC,IAAa,MAAM,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;IACtB;AAEA,IAAA,IAAI,MAAM,GAAA;QACR,OAAO,IAAI,CAAC,OAAO;IACrB;AAIA,IAAA,IAAqC,UAAU,GAAA;AAC7C,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM;IAC9B;IAMA,IAAa,OAAO,CAAC,KAAuB,EAAA;QAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5C;IAIA,IAAa,OAAO,CAAC,KAAuB,EAAA;QAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5C;IAIA,IAAa,MAAM,CAAC,KAAuB,EAAA;QACzC,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACrB;aAAO;YACL,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;gBAChE,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACzC,IAAI,KAAK,IAAI,GAAG;oBAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC;AACzC,gBAAA,OAAO,GAAG;YACZ,CAAC,EAAE,EAAqC,CAAC;QAC3C;QACA,IAAI,CAAC,iBAAiB,EAAE;IAC1B;AAiBA,IAAA,WAAA,CAAkD,UAAkB,EAAA;QAAlB,IAAA,CAAA,UAAU,GAAV,UAAU;QApEnD,IAAA,CAAA,IAAI,GAAuB,QAAQ;AACnC,QAAA,IAAA,CAAA,aAAa,GAA4B,MAAM,KAAK;QACpD,IAAA,CAAA,UAAU,GAAY,IAAI;;QAG1B,IAAA,CAAA,KAAK,GAA6C,IAAI;QAEvD,IAAA,CAAA,OAAO,GAAW,OAAO;QAUxB,IAAA,CAAA,KAAK,GAAqB,OAAO;AAMhC,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAqC;QAErE,IAAA,CAAA,QAAQ,GAAgB,IAAI;QAM5B,IAAA,CAAA,QAAQ,GAAgB,IAAI;QAM5B,IAAA,CAAA,OAAO,GAA2C,IAAI;AAgBvD,QAAA,IAAA,CAAA,WAAW,GAAS,IAAI,IAAI,EAAE;QAC9B,IAAA,CAAA,WAAW,GAAoB,EAAE;QACjC,IAAA,CAAA,QAAQ,GAAa,EAAE;AACd,QAAA,IAAA,CAAA,KAAK,GAAS,IAAI,IAAI,EAAE;QACjC,IAAA,CAAA,YAAY,GAAgB,IAAI;QAChC,IAAA,CAAA,SAAS,GAAgB,IAAI;QAC7B,IAAA,CAAA,OAAO,GAAgB,IAAI;QAC3B,IAAA,CAAA,WAAW,GAAgB,IAAI;QAC/B,IAAA,CAAA,WAAW,GAA2C,EAAE;QAGxD,IAAA,CAAA,YAAY,GAAuC,EAAE;QACrD,IAAA,CAAA,WAAW,GAAuC,EAAE;QACnD,IAAA,CAAA,cAAc,GAAW,CAAC;AAGhC,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AACtC,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ;QACnC;IACF;AAEA,IAAA,IAAI,YAAY,GAAA;QACd,OAAO,IAAI,CAAC,aAAa;IAC3B;IAEA,IAAI,YAAY,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,gBAAgB,EAAE;QACzB;IACF;AAEA,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,YAAY;IAC1B;IAEA,IAAI,WAAW,CAAC,IAAY,EAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,gBAAgB,EAAE;QACzB;IACF;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE;;AAEzB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;QAClC;QACA,IAAI,CAAC,gBAAgB,EAAE;IACzB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,gBAAgB,EAAE;QACzB;;AAGA,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE;YACxF,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC;AACnD,YAAA,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B;IACF;AAEQ,IAAA,eAAe,CAAC,KAA+C,EAAA;QACrE,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB;QACF;QAEA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,YAAY,IAAI,EAAE;YACnD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAC9C,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;YAChD;QACF;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE;YACnG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YACjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;AAE7C,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;YAC7C;QACF;IACF;AAEQ,IAAA,cAAc,CAAC,IAAsB,EAAA;AAC3C,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QACtB,MAAM,CAAC,GAAG,CAAC,IAAI,YAAY,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,IAAW,CAAC;AACnF,QAAA,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAAE,YAAA,OAAO,IAAI;QACnC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACtB,QAAA,OAAO,CAAC;IACV;IAEQ,kBAAkB,GAAA;QACxB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,EAAE,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM;YAC1D,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;AAC5E,YAAA,KAAK,EAAE,CAAC;AACT,SAAA,CAAC,CAAC;AACH,QAAA,IAAI;YACF,IAAI,CAAC,cAAc,GAAG,CAAE,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAS,CAAC,QAAQ,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAC;QAC3F;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,GAAG,CAAC;QACzB;AACA,QAAA,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC;AACtD,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,CAAC,EAAC,CAAC,CAAC,GAAG,CAAC,MAAK;YAC/C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC,CAAC;YACjF,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC9B,YAAA,OAAO,OAAO;AAChB,QAAA,CAAC,CAAC;IACJ;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,EAAC,GAAG,EAAE,KAAK,EAAC,CAAC,CAAC,GAAG,EAAE;IAC3G;AAEO,IAAA,WAAW,CAAC,KAAmB,EAAA;AACpC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;QACjE,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,gBAAgB,EAAE;IACzB;AAEO,IAAA,cAAc,CAAC,IAAiB,EAAA;AACrC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,KAAK;QACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;QACtD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AACtD,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAAE,YAAA,OAAO,IAAI;AACzC,QAAA,OAAO,KAAK;IACd;AAEO,IAAA,WAAW,CAAC,GAAgB,EAAA;QACjC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;YAAE;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC1B,YAAA,IAAI,CAAC,YAAY,GAAG,GAAG;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;QAC1C;aAAO;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE;AACvD,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACpB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACrB;AAAO,iBAAA,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE;AAChC,gBAAA,IAAI,CAAC,OAAO,GAAG,GAAG;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;YACnE;iBAAO;AACL,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACpB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACrB;AACA,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QACzB;IACF;AAEO,IAAA,WAAW,CAAC,GAAgB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,EAAE;AACnE,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;QACxB;IACF;AAEO,IAAA,gBAAgB,CAAC,GAAgB,EAAA;QACtC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,KAAK;QACvG,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;QACtC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AACtC,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE;QAC1B,OAAO,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC;IACnE;IAEO,gBAAgB,GAAA;AACrB,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;AACzC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAChD,QAAA,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;AACnD,QAAA,MAAM,cAAc,GAAG,eAAe,CAAC,MAAM,EAAE;AAC/C,QAAA,MAAM,cAAc,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC;AAErE,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;AACvC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B;AACA,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;YAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QACtE;IACF;IAEQ,uBAAuB,GAAA;AAC7B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE;AACxC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE;AACtC,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,QAAA,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE;AACzC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,CAAA,EAAG,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,EAAC,CAAC;QAClD;IACF;AAEO,IAAA,WAAW,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC;QAC9D,IAAI,CAAC,gBAAgB,EAAE;IACzB;IAEO,SAAS,CAAC,EAAe,EAAE,EAAe,EAAA;AAC/C,QAAA,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,KAAK;QAC5B,QACE,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,WAAW,EAAE;AACrC,YAAA,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE;YAC/B,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE;IAEjC;AAEO,IAAA,SAAS,CAAC,CAAc,EAAA;QAC7B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,KAAK;QACxD,QACE,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACtC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;IAExC;AAlRW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,yBAAyB,kBAqEhB,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AArEpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,aAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvP1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,kqGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAzDS,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA1CxB,qBAAqB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAkSrB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBA3PrC,SAAS;+BACE,mBAAmB,EAAA,UAAA,EACjB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,WAAW,EAAE,qBAAqB,CAAC,EAAA,QAAA,EACjD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,kqGAAA,CAAA,EAAA;;0BAoQY,MAAM;2BAAC,WAAW;yCApEtB,IAAI,EAAA,CAAA;sBAAZ;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBAGQ,KAAK,EAAA,CAAA;sBAAb;gBAIY,MAAM,EAAA,CAAA;sBAAlB;gBAQQ,KAAK,EAAA,CAAA;sBAAb;gBAEoC,UAAU,EAAA,CAAA;sBAA9C,WAAW;uBAAC,kBAAkB;gBAIrB,WAAW,EAAA,CAAA;sBAApB;gBAIY,OAAO,EAAA,CAAA;sBAAnB;gBAMY,OAAO,EAAA,CAAA;sBAAnB;gBAMY,MAAM,EAAA,CAAA;sBAAlB;;;AC3bH;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -34,6 +34,10 @@ declare class NgxsmkDatepickerComponent implements OnInit, OnChanges {
     mode: 'single' | 'range';
     isInvalidDate: (date: Date) => boolean;
     showRanges: boolean;
+    value: Date | {
+        start: Date;
+        end: Date;
+    } | null;
     private _locale;
     set locale(value: string);
     get locale(): string;
@@ -79,6 +83,7 @@ declare class NgxsmkDatepickerComponent implements OnInit, OnChanges {
     set currentYear(year: number);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    private initializeValue;
     private _normalizeDate;
     private generateLocaleData;
     private updateRangesArray;
@@ -93,7 +98,7 @@ declare class NgxsmkDatepickerComponent implements OnInit, OnChanges {
     isSameDay(d1: Date | null, d2: Date | null): boolean;
     isInRange(d: Date | null): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxsmkDatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkDatepickerComponent, "ngxsmk-datepicker", never, { "mode": { "alias": "mode"; "required": false; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "ranges": { "alias": "ranges"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxsmkDatepickerComponent, "ngxsmk-datepicker", never, { "mode": { "alias": "mode"; "required": false; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "value": { "alias": "value"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "ranges": { "alias": "ranges"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 export { CustomSelectComponent, NgxsmkDatepickerComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxsmk-datepicker",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0"
@@ -8,18 +8,19 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "main": "fesm2020/ngxsmk-datepicker.mjs",
+  "main": "fesm2022/ngxsmk-datepicker.mjs",
   "module": "fesm2022/ngxsmk-datepicker.mjs",
-  "es2020": "fesm2020/ngxsmk-datepicker.mjs",
-  "esm2020": "fesm2020/ngxsmk-datepicker.mjs",
+  "es2022": "fesm2022/ngxsmk-datepicker.mjs",
+  "esm2022": "fesm2022/ngxsmk-datepicker.mjs",
+  "types": "index.d.ts",
   "typings": "index.d.ts",
   "exports": {
     ".": {
-      "esm2020": "./fesm2020/ngxsmk-datepicker.mjs",
-      "es2020": "./fesm2020/ngxsmk-datepicker.mjs",
-      "node": "./fesm2020/ngxsmk-datepicker.mjs",
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ngxsmk-datepicker.mjs"
+      "import": "./fesm2022/ngxsmk-datepicker.mjs",
+      "default": "./fesm2022/ngxsmk-datepicker.mjs",
+      "require": "./fesm2022/ngxsmk-datepicker.mjs",
+      "node": "./fesm2022/ngxsmk-datepicker.mjs",
+      "types": "./index.d.ts"
     },
     "./package.json": {
       "default": "./package.json"
@@ -32,6 +33,7 @@
   },
   "sideEffects": false,
   "files": [
+    "fesm2022/",
     "**/*.d.ts",
     "**/*.metadata.json",
     "**/*.js",