ngxsmk-datepicker 1.2.9 → 1.3.1

package/fesm2022/ngxsmk-datepicker.mjs

@@ -0,0 +1,623 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Output, Input, Component, HostBinding } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+class CustomSelectComponent {
+    constructor() {
+        this.options = [];
+        this.valueChange = new EventEmitter();
+        this.isOpen = false;
+        this.elementRef = inject(ElementRef);
+    }
+    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: [], 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="ngxsmk-select-container" (click)="toggleDropdown()">
+      <button type="button" class="ngxsmk-select-display">
+        <span>{{ displayValue }}</span>
+        <svg class="ngxsmk-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                d="M112 184l144 144 144-144"/>
+        </svg>
+      </button>
+      @if (isOpen) {
+        <div class="ngxsmk-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}.ngxsmk-select-container{cursor:pointer}.ngxsmk-select-display{display:flex;align-items:center;justify-content:space-between;width:var(--custom-select-width, 115px);background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;padding:4px 8px;font-size:14px;text-align:left;height:30px}.ngxsmk-arrow-icon{width:12px;height:12px;margin-left:8px}.ngxsmk-options-panel{position:absolute;top:110%;left:0;width:100%;background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;box-shadow:0 4px 8px #0000001a;max-height:200px;overflow-y:auto;z-index:9999}.ngxsmk-options-panel ul{list-style:none;padding:4px;margin:0}.ngxsmk-options-panel li{padding:8px 12px;border-radius:4px;cursor:pointer}.ngxsmk-options-panel li:hover{background-color:var(--datepicker-hover-background, #f0f0f0)}.ngxsmk-options-panel li.selected{background-color:var(--datepicker-primary-color, #3880ff);color:var(--datepicker-primary-contrast, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-select', standalone: true, imports: [CommonModule], template: `
+    <div class="ngxsmk-select-container" (click)="toggleDropdown()">
+      <button type="button" class="ngxsmk-select-display">
+        <span>{{ displayValue }}</span>
+        <svg class="ngxsmk-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                d="M112 184l144 144 144-144"/>
+        </svg>
+      </button>
+      @if (isOpen) {
+        <div class="ngxsmk-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}.ngxsmk-select-container{cursor:pointer}.ngxsmk-select-display{display:flex;align-items:center;justify-content:space-between;width:var(--custom-select-width, 115px);background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;padding:4px 8px;font-size:14px;text-align:left;height:30px}.ngxsmk-arrow-icon{width:12px;height:12px;margin-left:8px}.ngxsmk-options-panel{position:absolute;top:110%;left:0;width:100%;background:var(--datepicker-background, #fff);border:1px solid var(--datepicker-border-color, #ccc);color:var(--datepicker-text-color, #333);border-radius:4px;box-shadow:0 4px 8px #0000001a;max-height:200px;overflow-y:auto;z-index:9999}.ngxsmk-options-panel ul{list-style:none;padding:4px;margin:0}.ngxsmk-options-panel li{padding:8px 12px;border-radius:4px;cursor:pointer}.ngxsmk-options-panel li:hover{background-color:var(--datepicker-hover-background, #f0f0f0)}.ngxsmk-options-panel li.selected{background-color:var(--datepicker-primary-color, #3880ff);color:var(--datepicker-primary-contrast, #fff)}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+class NgxsmkDatepickerComponent {
+    constructor() {
+        this.mode = 'single';
+        this.isInvalidDate = () => false;
+        this.showRanges = true;
+        this.showTime = false;
+        this.minuteInterval = 1;
+        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._currentMonth = this.currentDate.getMonth();
+        this._currentYear = this.currentDate.getFullYear();
+        this.monthOptions = [];
+        this.yearOptions = [];
+        this.firstDayOfWeek = 0;
+        this.currentHour = 0;
+        this.currentMinute = 0;
+        this.currentDisplayHour = 12;
+        this.isPm = false;
+        this.hourOptions = [];
+        this.minuteOptions = [];
+        this.ampmOptions = [
+            { label: 'AM', value: false },
+            { label: 'PM', value: true }
+        ];
+    }
+    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();
+    }
+    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() {
+        if (this._locale === 'en-US') {
+            this._locale = navigator.language;
+        }
+        this.today.setHours(0, 0, 0, 0);
+        this.generateLocaleData();
+        this.generateTimeOptions();
+        if (this.showTime && !this.value) {
+            const now = new Date();
+            this.currentHour = now.getHours();
+            this.currentMinute = Math.floor(now.getMinutes() / this.minuteInterval) * this.minuteInterval;
+            if (this.currentMinute === 60) {
+                this.currentMinute = 0;
+                this.currentHour = (this.currentHour + 1) % 24;
+            }
+            this.update12HourState(this.currentHour);
+        }
+        if (this.value) {
+            this.initializeValue(this.value);
+        }
+        this.generateCalendar();
+    }
+    ngOnChanges(changes) {
+        if (changes['locale']) {
+            this.generateLocaleData();
+            this.generateCalendar();
+        }
+        if (changes['minuteInterval']) {
+            this.generateTimeOptions();
+            this.currentMinute = Math.floor(this.currentMinute / this.minuteInterval) * this.minuteInterval;
+            this.onTimeChange();
+        }
+        if (changes['value'] && changes['value'].currentValue !== changes['value'].previousValue) {
+            this.initializeValue(changes['value'].currentValue);
+            this.generateCalendar();
+        }
+    }
+    get24Hour(displayHour, isPm) {
+        if (isPm) {
+            return displayHour === 12 ? 12 : displayHour + 12;
+        }
+        return displayHour === 12 ? 0 : displayHour;
+    }
+    update12HourState(fullHour) {
+        this.isPm = fullHour >= 12;
+        this.currentDisplayHour = fullHour % 12 || 12;
+    }
+    applyCurrentTime(date) {
+        this.currentHour = this.get24Hour(this.currentDisplayHour, this.isPm);
+        date.setHours(this.currentHour, this.currentMinute, 0, 0);
+        return date;
+    }
+    initializeValue(value) {
+        if (!value) {
+            this.selectedDate = null;
+            this.startDate = null;
+            this.endDate = null;
+            return;
+        }
+        let initialDate = null;
+        if (this.mode === 'single' && value instanceof Date) {
+            this.selectedDate = this._normalizeDate(value);
+            initialDate = 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);
+            initialDate = this.startDate;
+        }
+        if (initialDate) {
+            this.currentDate = new Date(initialDate);
+            this._currentMonth = initialDate.getMonth();
+            this._currentYear = initialDate.getFullYear();
+            this.currentHour = initialDate.getHours();
+            this.currentMinute = initialDate.getMinutes();
+            this.update12HourState(this.currentHour);
+            this.currentMinute = Math.floor(this.currentMinute / this.minuteInterval) * this.minuteInterval;
+        }
+    }
+    _normalizeDate(date) {
+        if (!date)
+            return null;
+        const d = (date instanceof Date) ? new Date(date.getTime()) : new Date(date);
+        if (isNaN(d.getTime()))
+            return null;
+        return d;
+    }
+    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,
+            });
+        }
+    }
+    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 = this.applyCurrentTime(range[0]);
+        this.endDate = this.applyCurrentTime(range[1]);
+        if (this.startDate && this.endDate) {
+            this.valueChange.emit({ start: this.startDate, end: this.endDate });
+        }
+        this.currentDate = new Date(this.startDate);
+        this.initializeValue({ start: this.startDate, end: this.endDate });
+        this.generateCalendar();
+    }
+    isDateDisabled(date) {
+        if (!date)
+            return false;
+        const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        if (this._minDate) {
+            const minDateOnly = new Date(this._minDate.getFullYear(), this._minDate.getMonth(), this._minDate.getDate());
+            if (dateOnly < minDateOnly)
+                return true;
+        }
+        if (this._maxDate) {
+            const maxDateOnly = new Date(this._maxDate.getFullYear(), this._maxDate.getMonth(), this._maxDate.getDate());
+            if (dateOnly > maxDateOnly)
+                return true;
+        }
+        return this.isInvalidDate(date);
+    }
+    onTimeChange() {
+        if (this.mode === 'single' && this.selectedDate) {
+            this.selectedDate = this.applyCurrentTime(this.selectedDate);
+            this.valueChange.emit(this.selectedDate);
+        }
+        else if (this.mode === 'range' && this.startDate && this.endDate) {
+            this.startDate = this.applyCurrentTime(this.startDate);
+            this.endDate = this.applyCurrentTime(this.endDate);
+            this.valueChange.emit({ start: this.startDate, end: this.endDate });
+        }
+        else if (this.mode === 'range' && this.startDate && !this.endDate) {
+            this.startDate = this.applyCurrentTime(this.startDate);
+        }
+    }
+    onDateClick(day) {
+        if (!day || this.isDateDisabled(day))
+            return;
+        if (this.mode === 'single') {
+            this.selectedDate = this.applyCurrentTime(day);
+            this.valueChange.emit(this.selectedDate);
+        }
+        else {
+            if (!this.startDate || (this.startDate && this.endDate)) {
+                this.startDate = this.applyCurrentTime(day);
+                this.endDate = null;
+            }
+            else if (day >= this.startDate) {
+                this.endDate = this.applyCurrentTime(day);
+                this.valueChange.emit({ start: this.startDate, end: this.endDate });
+            }
+            else {
+                this.startDate = this.applyCurrentTime(day);
+                this.endDate = null;
+            }
+            this.hoveredDate = null;
+        }
+        if (this.mode === 'single' && this.selectedDate) {
+            this.update12HourState(this.selectedDate.getHours());
+            this.currentMinute = this.selectedDate.getMinutes();
+        }
+        else if (this.mode === 'range' && this.startDate) {
+            this.update12HourState(this.startDate.getHours());
+            this.currentMinute = this.startDate.getMinutes();
+        }
+    }
+    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;
+        const dTime = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+        const startDayTime = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate()).getTime();
+        const endDayTime = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate()).getTime();
+        const startTime = Math.min(startDayTime, endDayTime);
+        const endTime = Math.max(startDayTime, endDayTime);
+        return dTime > startTime && dTime < endTime;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgxsmkDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: NgxsmkDatepickerComponent, isStandalone: true, selector: "ngxsmk-datepicker", inputs: { mode: "mode", isInvalidDate: "isInvalidDate", showRanges: "showRanges", showTime: "showTime", minuteInterval: "minuteInterval", value: "value", locale: "locale", theme: "theme", minDate: "minDate", maxDate: "maxDate", ranges: "ranges" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.dark-theme": "this.isDarkMode" } }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ngxsmk-datepicker-container">
+      @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+        <div class="ngxsmk-ranges-container">
+          <ul>
+            @for (range of rangesArray; track range.key) {
+              <li (click)="selectRange(range.value)">{{ range.key }}</li>
+            }
+          </ul>
+        </div>
+      }
+      <div class="ngxsmk-calendar-container">
+        <div class="ngxsmk-header">
+          <div class="ngxsmk-month-year-selects">
+            <app-custom-select class="month-select" [options]="monthOptions"
+                               [(value)]="currentMonth"></app-custom-select>
+            <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear"></app-custom-select>
+          </div>
+          <div class="ngxsmk-nav-buttons">
+            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                      d="M328 112L184 256l144 144"/>
+              </svg>
+            </button>
+            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                      d="M184 112l144 144-144 144"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="ngxsmk-days-grid-wrapper">
+          <div class="ngxsmk-days-grid">
+            @for (day of weekDays; track day) {
+              <div class="ngxsmk-day-name">{{ day }}</div>
+            }
+            @for (day of daysInMonth; track $index) {
+              <div class="ngxsmk-day-cell"
+                   [class.empty]="!day" [class.disabled]="isDateDisabled(day)" [class.today]="isSameDay(day, today)"
+                   [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
+                   [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
+                   [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
+                   [class.in-range]="mode === 'range' && isInRange(day)"
+                   [class.preview-range]="isPreviewInRange(day)"
+                   (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
+                @if (day) {
+                  <div class="ngxsmk-day-number">{{ day | date : 'd' }}</div>
+                }
+              </div>
+            }
+          </div>
+        </div>
+
+        @if (showTime) {
+          <div class="ngxsmk-time-selection">
+            <span class="ngxsmk-time-label">Time:</span>
+            <app-custom-select
+              class="hour-select"
+              [options]="hourOptions"
+              [(value)]="currentDisplayHour"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+            <span class="ngxsmk-time-separator">:</span>
+            <app-custom-select
+              class="minute-select"
+              [options]="minuteOptions"
+              [(value)]="currentMinute"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+            <app-custom-select
+              class="ampm-select"
+              [options]="ampmOptions"
+              [(value)]="isPm"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+          </div>
+        }
+
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--datepicker-primary-color: #6d28d9;--datepicker-primary-contrast: #ffffff;--datepicker-range-background: #f5f3ff;--datepicker-background: #ffffff;--datepicker-text-color: #222428;--datepicker-subtle-text-color: #9ca3af;--datepicker-border-color: #e9e9e9;--datepicker-hover-background: #f0f0f0}:host(.dark-theme){--datepicker-range-background: rgba(139, 92, 246, .2);--datepicker-background: #1f2937;--datepicker-text-color: #d1d5db;--datepicker-subtle-text-color: #6b7280;--datepicker-border-color: #4b5563;--datepicker-hover-background: #374151}.ngxsmk-datepicker-container{display:flex}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:10px;padding:16px;background:var(--datepicker-background)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2;gap:5px}.ngxsmk-month-year-selects{display:flex;gap:5px}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.ngxsmk-nav-buttons{display:flex}.ngxsmk-nav-button{background:none;border:none;padding:8px;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-days-grid-wrapper{position:relative}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.ngxsmk-day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-number{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);position:relative;z-index:1}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ngxsmk-ranges-container ul{list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-time-selection{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}.ngxsmk-time-separator{font-weight:600;font-size:1.1rem;color:var(--datepicker-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CustomSelectComponent, selector: "app-custom-select", inputs: ["options", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NgxsmkDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngxsmk-datepicker', standalone: true, imports: [CommonModule, FormsModule, CustomSelectComponent], template: `
+    <div class="ngxsmk-datepicker-container">
+      @if (showRanges && rangesArray.length > 0 && mode === 'range') {
+        <div class="ngxsmk-ranges-container">
+          <ul>
+            @for (range of rangesArray; track range.key) {
+              <li (click)="selectRange(range.value)">{{ range.key }}</li>
+            }
+          </ul>
+        </div>
+      }
+      <div class="ngxsmk-calendar-container">
+        <div class="ngxsmk-header">
+          <div class="ngxsmk-month-year-selects">
+            <app-custom-select class="month-select" [options]="monthOptions"
+                               [(value)]="currentMonth"></app-custom-select>
+            <app-custom-select class="year-select" [options]="yearOptions" [(value)]="currentYear"></app-custom-select>
+          </div>
+          <div class="ngxsmk-nav-buttons">
+            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(-1)">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                      d="M328 112L184 256l144 144"/>
+              </svg>
+            </button>
+            <button type="button" class="ngxsmk-nav-button" (click)="changeMonth(1)">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+                      d="M184 112l144 144-144 144"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="ngxsmk-days-grid-wrapper">
+          <div class="ngxsmk-days-grid">
+            @for (day of weekDays; track day) {
+              <div class="ngxsmk-day-name">{{ day }}</div>
+            }
+            @for (day of daysInMonth; track $index) {
+              <div class="ngxsmk-day-cell"
+                   [class.empty]="!day" [class.disabled]="isDateDisabled(day)" [class.today]="isSameDay(day, today)"
+                   [class.selected]="mode === 'single' && isSameDay(day, selectedDate)"
+                   [class.start-date]="mode === 'range' && isSameDay(day, startDate)"
+                   [class.end-date]="mode === 'range' && isSameDay(day, endDate)"
+                   [class.in-range]="mode === 'range' && isInRange(day)"
+                   [class.preview-range]="isPreviewInRange(day)"
+                   (click)="onDateClick(day)" (mouseenter)="onDateHover(day)">
+                @if (day) {
+                  <div class="ngxsmk-day-number">{{ day | date : 'd' }}</div>
+                }
+              </div>
+            }
+          </div>
+        </div>
+
+        @if (showTime) {
+          <div class="ngxsmk-time-selection">
+            <span class="ngxsmk-time-label">Time:</span>
+            <app-custom-select
+              class="hour-select"
+              [options]="hourOptions"
+              [(value)]="currentDisplayHour"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+            <span class="ngxsmk-time-separator">:</span>
+            <app-custom-select
+              class="minute-select"
+              [options]="minuteOptions"
+              [(value)]="currentMinute"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+            <app-custom-select
+              class="ampm-select"
+              [options]="ampmOptions"
+              [(value)]="isPm"
+              (valueChange)="onTimeChange()"
+            ></app-custom-select>
+          </div>
+        }
+
+      </div>
+    </div>
+  `, styles: [":host{--datepicker-primary-color: #6d28d9;--datepicker-primary-contrast: #ffffff;--datepicker-range-background: #f5f3ff;--datepicker-background: #ffffff;--datepicker-text-color: #222428;--datepicker-subtle-text-color: #9ca3af;--datepicker-border-color: #e9e9e9;--datepicker-hover-background: #f0f0f0}:host(.dark-theme){--datepicker-range-background: rgba(139, 92, 246, .2);--datepicker-background: #1f2937;--datepicker-text-color: #d1d5db;--datepicker-subtle-text-color: #6b7280;--datepicker-border-color: #4b5563;--datepicker-hover-background: #374151}.ngxsmk-datepicker-container{display:flex}.ngxsmk-calendar-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:10px;padding:16px;background:var(--datepicker-background)}.ngxsmk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:2;gap:5px}.ngxsmk-month-year-selects{display:flex;gap:5px}.ngxsmk-month-year-selects app-custom-select.month-select{--custom-select-width: 120px}.ngxsmk-month-year-selects app-custom-select.year-select{--custom-select-width: 90px}.ngxsmk-nav-buttons{display:flex}.ngxsmk-nav-button{background:none;border:none;padding:8px;cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--datepicker-text-color)}.ngxsmk-nav-button:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-nav-button svg{width:18px;height:18px}.ngxsmk-days-grid-wrapper{position:relative}.ngxsmk-days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:0}.ngxsmk-day-name{font-weight:600;font-size:.8rem;color:var(--datepicker-subtle-text-color);padding:8px 0}.ngxsmk-day-cell{position:relative;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:0}.ngxsmk-day-number{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--datepicker-text-color);position:relative;z-index:1}.ngxsmk-day-cell:not(.disabled):hover .ngxsmk-day-number{background-color:var(--datepicker-hover-background);color:var(--datepicker-primary-color)}.ngxsmk-day-cell.start-date .ngxsmk-day-number,.ngxsmk-day-cell.end-date .ngxsmk-day-number,.ngxsmk-day-cell.selected .ngxsmk-day-number{background-color:var(--datepicker-primary-color);color:var(--datepicker-primary-contrast)}.ngxsmk-day-cell.in-range,.ngxsmk-day-cell.start-date,.ngxsmk-day-cell.end-date,.ngxsmk-day-cell.preview-range{background-color:var(--datepicker-range-background)}.ngxsmk-day-cell.start-date{border-top-left-radius:100%;border-bottom-left-radius:100%}.ngxsmk-day-cell.end-date{border-top-right-radius:100%;border-bottom-right-radius:100%}.ngxsmk-day-cell.start-date.end-date{border-radius:50px}.ngxsmk-day-cell.disabled{background-color:transparent!important;color:#4b5563;cursor:not-allowed;pointer-events:none;opacity:.5}.ngxsmk-day-cell.today .ngxsmk-day-number{border:1px solid var(--datepicker-primary-color)}.ngxsmk-ranges-container{width:180px;padding:16px;border-right:1px solid var(--datepicker-border-color);background:var(--datepicker-background)}.ngxsmk-ranges-container ul{list-style:none;padding:0;margin:0}.ngxsmk-ranges-container li{padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;color:var(--datepicker-text-color)}.ngxsmk-ranges-container li:hover{background-color:var(--datepicker-hover-background)}.ngxsmk-time-selection{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--datepicker-border-color)}.ngxsmk-time-label{font-size:.9rem;color:var(--datepicker-subtle-text-color);margin-right:4px}.ngxsmk-time-selection app-custom-select{--custom-select-width: 60px;height:30px}.ngxsmk-time-selection app-custom-select.ampm-select{--custom-select-width: 70px}.ngxsmk-time-separator{font-weight:600;font-size:1.1rem;color:var(--datepicker-text-color)}\n"] }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], isInvalidDate: [{
+                type: Input
+            }], showRanges: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], minuteInterval: [{
+                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