shirkasoft-ui-components 1.2.0 → 1.3.0

package/fesm2022/shirkasoft-ui-components-date-picker.mjs

@@ -0,0 +1,638 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, DestroyRef, input, signal, computed, effect, forwardRef, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslocoService } from '@jsverse/transloco';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Date/time picker implemented as a ControlValueAccessor. Supports choosing a
+ * day, month or year, optional time selection (with seconds/12-hour format),
+ * min/max constraints and locale-aware labels.
+ */
+class DatePickerComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.transloco = inject(TranslocoService);
+        /** HTML id for the input (for label/for pairing). */
+        this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Granularity of the picker ('date' | 'month' | 'year'). */
+        this.view = input('date', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** Label shown above the input. */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Placeholder of the input. */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** FormGroup used to resolve the control from `label`. */
+        this.formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Directly bound FormControl. */
+        this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Disables the picker. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Custom error message displayed (overrides translated ones). */
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /** Per-validation-key custom error messages. */
+        this.errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+        /** Minimum allowed date (YYYY-MM-DD) or year/month string. */
+        this.minValue = input('', ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /** Maximum allowed date (YYYY-MM-DD) or year/month string. */
+        this.maxValue = input('', ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /** Locale used for month/day names and formatted labels. */
+        this.locale = input('es', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Edits only the time portion of the value. */
+        this.timeOnly = input(false, ...(ngDevMode ? [{ debugName: "timeOnly" }] : /* istanbul ignore next */ []));
+        /** Shows the time selectors alongside the date. */
+        this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        /** Hour format: '12' or '24'. */
+        this.hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        /** Whether the seconds selector is shown. */
+        this.showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        /** Step (in minutes) for the minute selector. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown calendar is open. */
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Year currently displayed in the calendar. */
+        this.viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+        /** Month currently displayed in the calendar (0-based). */
+        this.viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+        /** Starting year of the decade shown in year view. */
+        this.viewDecade = signal(Math.floor(new Date().getFullYear() / 10) * 10, ...(ngDevMode ? [{ debugName: "viewDecade" }] : /* istanbul ignore next */ []));
+        /** Hour selected in the time selectors. */
+        this.viewHour = signal(0, ...(ngDevMode ? [{ debugName: "viewHour" }] : /* istanbul ignore next */ []));
+        /** Minute selected in the time selectors. */
+        this.viewMinute = signal(0, ...(ngDevMode ? [{ debugName: "viewMinute" }] : /* istanbul ignore next */ []));
+        /** Second selected in the time selectors. */
+        this.viewSecond = signal(0, ...(ngDevMode ? [{ debugName: "viewSecond" }] : /* istanbul ignore next */ []));
+        /** Meridiem selected in 12-hour format. */
+        this.viewMeridiem = signal('AM', ...(ngDevMode ? [{ debugName: "viewMeridiem" }] : /* istanbul ignore next */ []));
+        /** Date part selected but not yet committed until the time is confirmed. */
+        this.pendingDate = signal(null, ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
+        /** Underlying value (mirrors the reactive control). */
+        this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Disabled state coming from the reactive form infrastructure. */
+        this._disabledState = signal(false, ...(ngDevMode ? [{ debugName: "_disabledState" }] : /* istanbul ignore next */ []));
+        /** Whether status subscriptions have been attached to the control. */
+        this.subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+        this.valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+        /** Counter used to recompute the error helpers reactively. */
+        this.errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+        /** Whether an error was displayed at some point. */
+        this.hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+        /** ControlValueAccessor callbacks. */
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        /** Current value of the picker. */
+        this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Whether the picker is disabled (input or reactive form). */
+        this.isDisabled = computed(() => this.disabled() || this._disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Resolves the control from `control` input or `formGroup`+`label`. */
+        this.actualControl = computed(() => {
+            const ctrl = this.control();
+            if (ctrl)
+                return ctrl;
+            const fg = this.formGroup();
+            const lbl = this.label();
+            if (fg && lbl)
+                return fg.get(lbl);
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+        /** Whether the bound control should show its error message. */
+        this.shouldShowError = computed(() => {
+            this.errorTracker();
+            const ctrl = this.actualControl();
+            return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
+        }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+        /** Whether an error was fixed (invalid before, now valid and touched). */
+        this.wasFixedError = computed(() => {
+            this.errorTracker();
+            const ctrl = this.actualControl();
+            return this.hadError() && ctrl?.valid && ctrl?.touched;
+        }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+        /** Validation error messages to display, custom or translated. */
+        this.getErrorMessages = computed(() => {
+            this.errorTracker();
+            const customError = this.errorMessage();
+            if (customError)
+                return [customError];
+            const ctrl = this.actualControl();
+            if (!ctrl?.errors)
+                return [];
+            const customErrors = this.errorMessages();
+            const t = this.transloco;
+            return Object.keys(ctrl.errors).map((key) => {
+                if (customErrors[key])
+                    return customErrors[key];
+                switch (key) {
+                    case 'required':
+                        return t.translate('validation.required');
+                    default:
+                        return t.translate('validation.invalid');
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+        /** Date part displayed in the calendar (pending date or committed value). */
+        this.displayedDate = computed(() => {
+            if (this.timeOnly())
+                return null;
+            const value = this.pendingDate();
+            if (value)
+                return value;
+            const current = this._value();
+            if (!current)
+                return null;
+            return this.datePartOf(current);
+        }, ...(ngDevMode ? [{ debugName: "displayedDate" }] : /* istanbul ignore next */ []));
+        /** Human-readable label for the selected value in the input. */
+        this.displayLabel = computed(() => {
+            const value = this._value();
+            if (!value)
+                return '';
+            if (this.timeOnly()) {
+                return this.formatTimeFromValue(value);
+            }
+            const datePart = this.datePartOf(value);
+            const timePart = value.includes('T') ? value.split('T')[1] : null;
+            const v = this.view();
+            let label;
+            if (v === 'year') {
+                label = datePart;
+            }
+            else if (v === 'month') {
+                const [y, m] = datePart.split('-').map(Number);
+                const fmt = new Intl.DateTimeFormat(this.locale(), {
+                    month: 'long',
+                    year: 'numeric',
+                });
+                label = fmt.format(new Date(y, m - 1, 1));
+                label = label.charAt(0).toUpperCase() + label.slice(1);
+            }
+            else {
+                const fmt = new Intl.DateTimeFormat(this.locale(), {
+                    dateStyle: 'long',
+                });
+                label = fmt.format(new Date(datePart + 'T12:00:00'));
+            }
+            if (this.showTime() && timePart) {
+                label += ' ' + this.formatTimeFromValue(timePart);
+            }
+            return label;
+        }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+        /** Localized short month names for the year view. */
+        this.monthNames = computed(() => {
+            const fmt = new Intl.DateTimeFormat(this.locale(), { month: 'short' });
+            return Array.from({ length: 12 }, (_, i) => {
+                const name = fmt.format(new Date(2000, i, 1)).replace('.', '');
+                return name.charAt(0).toUpperCase() + name.slice(1);
+            });
+        }, ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+        /** Localized short weekday names for the calendar header. */
+        this.dayNames = computed(() => {
+            const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+            return Array.from({ length: 7 }, (_, i) => {
+                const name = fmt.format(new Date(2024, 0, i + 1));
+                return name.charAt(0).toUpperCase() + name.slice(1, 3);
+            });
+        }, ...(ngDevMode ? [{ debugName: "dayNames" }] : /* istanbul ignore next */ []));
+        /** Number of days in the currently viewed month. */
+        this.daysInMonth = computed(() => {
+            return new Date(this.viewYear(), this.viewMonth() + 1, 0).getDate();
+        }, ...(ngDevMode ? [{ debugName: "daysInMonth" }] : /* istanbul ignore next */ []));
+        /** Weekday index (0=Sunday) of the first day of the viewed month. */
+        this.firstDayOfMonth = computed(() => {
+            return new Date(this.viewYear(), this.viewMonth(), 1).getDay();
+        }, ...(ngDevMode ? [{ debugName: "firstDayOfMonth" }] : /* istanbul ignore next */ []));
+        /** Calendar grid: nulls for leading blanks then the days of the month. */
+        this.calendarDays = computed(() => {
+            const totalDays = this.daysInMonth();
+            const firstDay = this.firstDayOfMonth();
+            const days = [];
+            for (let i = 0; i < firstDay; i++)
+                days.push(null);
+            for (let i = 1; i <= totalDays; i++)
+                days.push(i);
+            return days;
+        }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+        /** Whether the prev navigation button is allowed by `minValue`. */
+        this.canGoPrev = computed(() => {
+            const v = this.view();
+            const min = this.minValue();
+            if (v === 'date') {
+                if (!min)
+                    return true;
+                const prev = new Date(this.viewYear(), this.viewMonth() - 1, 1);
+                return prev >= new Date(min + 'T12:00:00');
+            }
+            if (v === 'month') {
+                const minY = min ? Number(min.split('-')[0]) : undefined;
+                return minY === undefined || this.viewYear() > minY;
+            }
+            const minY = min ? Number(min) : undefined;
+            return minY === undefined || this.viewYear() > minY;
+        }, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
+        /** Whether the next navigation button is allowed by `maxValue`. */
+        this.canGoNext = computed(() => {
+            const v = this.view();
+            const max = this.maxValue();
+            if (v === 'date') {
+                if (!max)
+                    return true;
+                const next = new Date(this.viewYear(), this.viewMonth() + 1, 1);
+                return next <= new Date(max + 'T12:00:00');
+            }
+            if (v === 'month') {
+                const maxY = max ? Number(max.split('-')[0]) : undefined;
+                return maxY === undefined || this.viewYear() < maxY;
+            }
+            const maxY = max ? Number(max) : undefined;
+            return maxY === undefined || this.viewYear() < maxY;
+        }, ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+        /** Year of the displayed date, if any. */
+        this.selectedYear = computed(() => {
+            const value = this.displayedDate();
+            return value ? Number(value.split('-')[0]) : null;
+        }, ...(ngDevMode ? [{ debugName: "selectedYear" }] : /* istanbul ignore next */ []));
+        /** Month index (0-based) of the displayed date, if any. */
+        this.selectedMonth = computed(() => {
+            const value = this.displayedDate();
+            return value ? Number(value.split('-')[1]) - 1 : null;
+        }, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : /* istanbul ignore next */ []));
+        /** Day of the displayed date, if any (date view only). */
+        this.selectedDay = computed(() => {
+            const value = this.displayedDate();
+            return value && this.view() === 'date' ? Number(value.split('-')[2]) : null;
+        }, ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
+        /** 12 years of the viewed decade for the year view. */
+        this.decadeYears = computed(() => {
+            const start = this.viewDecade();
+            return Array.from({ length: 12 }, (_, i) => start + i);
+        }, ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+        /** (Unused legacy placeholder) plain year list. */
+        this.years = [];
+        // Attach error-state subscriptions to the validated control once found.
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl) {
+                this.subscribed.set(false);
+                return;
+            }
+            if (this.subscribed())
+                return;
+            if (ctrl.invalid && ctrl.touched)
+                this.hadError.set(true);
+            ctrl.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+                if (ctrl.invalid && ctrl.touched)
+                    this.hadError.set(true);
+            });
+            this.subscribed.set(true);
+        });
+        // One-way sync from the reactive control to the internal value signal.
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl)
+                return;
+            if (!this.valueSubscribed()) {
+                this.writeValue(ctrl.value);
+                ctrl.valueChanges
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((value) => {
+                    this.writeValue(value);
+                });
+                this.valueSubscribed.set(true);
+            }
+        });
+    }
+    /** Closes the dropdown when clicking outside the component. */
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    /** Closes the dropdown on Escape. */
+    onEscape() {
+        this.close();
+    }
+    /** Opens/closes the dropdown, syncing the calendar to the current value. */
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.syncViewToValue();
+            this.isOpen.set(true);
+        }
+    }
+    /** Aligns the calendar view signals with the current value (or today). */
+    syncViewToValue() {
+        const val = this._value();
+        const v = this.view();
+        if (!val) {
+            const now = new Date();
+            this.viewYear.set(now.getFullYear());
+            this.viewMonth.set(now.getMonth());
+            this.viewDecade.set(Math.floor(now.getFullYear() / 10) * 10);
+            this.viewHour.set(now.getHours());
+            this.viewMinute.set(now.getMinutes());
+            this.viewSecond.set(now.getSeconds());
+            this.pendingDate.set(this.toISODate(now));
+            return;
+        }
+        const datePart = this.datePartOf(val);
+        const timePart = val.includes('T') ? val.split('T')[1] : undefined;
+        if (v === 'year') {
+            this.viewYear.set(Number(datePart));
+        }
+        else if (v === 'month') {
+            this.viewYear.set(Number(datePart.split('-')[0]));
+        }
+        else {
+            const d = new Date(datePart + 'T12:00:00');
+            this.viewYear.set(d.getFullYear());
+            this.viewMonth.set(d.getMonth());
+        }
+        const time = timePart ?? (this.timeOnly() ? val : undefined);
+        if (time) {
+            const [h, m, ss] = time.split(':').map(Number);
+            this.viewHour.set(h || 0);
+            this.viewMinute.set(m || 0);
+            this.viewSecond.set(ss || 0);
+            if (this.hourFormat() === '12') {
+                this.viewMeridiem.set(h >= 12 ? 'PM' : 'AM');
+            }
+        }
+        this.pendingDate.set(datePart);
+    }
+    /** Closes the dropdown, marks the control as touched and refreshes errors. */
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.onTouched();
+        const ctrl = this.actualControl();
+        if (ctrl)
+            ctrl.markAsTouched();
+        this.errorTracker.update((v) => v + 1);
+        if (ctrl?.invalid && ctrl?.touched)
+            this.hadError.set(true);
+    }
+    /** Navigates the calendar to the previous year/month/decade. */
+    prev() {
+        const v = this.view();
+        if (v === 'year') {
+            this.viewDecade.update((d) => d - 12);
+            this.viewYear.update((y) => y - 12);
+        }
+        else if (v === 'month') {
+            this.viewYear.update((y) => y - 1);
+        }
+        else {
+            this.viewMonth.update((m) => {
+                if (m === 0) {
+                    this.viewYear.update((y) => y - 1);
+                    return 11;
+                }
+                return m - 1;
+            });
+        }
+    }
+    /** Navigates the calendar to the next year/month/decade. */
+    next() {
+        const v = this.view();
+        if (v === 'year') {
+            this.viewDecade.update((d) => d + 12);
+            this.viewYear.update((y) => y + 12);
+        }
+        else if (v === 'month') {
+            this.viewYear.update((y) => y + 1);
+        }
+        else {
+            this.viewMonth.update((m) => {
+                if (m === 11) {
+                    this.viewYear.update((y) => y + 1);
+                    return 0;
+                }
+                return m + 1;
+            });
+        }
+    }
+    /** Selects a day of the month (pending if time is shown). */
+    selectDay(day) {
+        const y = this.viewYear();
+        const m = String(this.viewMonth() + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        const value = `${y}-${m}-${d}`;
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
+        this.setValue(value);
+    }
+    /** Selects a month of the year (pending if time is shown). */
+    selectMonth(monthIndex) {
+        const value = `${this.viewYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
+        this.setValue(value);
+    }
+    /** Selects a year (pending if time is shown). */
+    selectYear(year) {
+        const value = String(year);
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
+        this.setValue(value);
+    }
+    /** Commits a value, updates the component, the control and the outputs. */
+    setValue(value, close = true) {
+        this._value.set(value);
+        this.onChange(value);
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(value);
+            ctrl.markAsDirty();
+        }
+        if (close)
+            this.close();
+    }
+    /** Confirms the selected time and commits the combined date+time value. */
+    confirmTime() {
+        const h = this.viewHour();
+        const m = this.viewMinute();
+        const s = this.viewSecond();
+        let time = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+        if (this.showSeconds())
+            time += `:${String(s).padStart(2, '0')}`;
+        if (this.timeOnly()) {
+            this.setValue(time);
+            return;
+        }
+        const datePart = this.pendingDate() ??
+            `${this.viewYear()}-${String(this.viewMonth() + 1).padStart(2, '0')}-01`;
+        this.setValue(`${datePart}T${time}`);
+    }
+    /** Reads the hour selected in the time selector. */
+    onHourChange(event) {
+        this.viewHour.set(Number(event.target.value));
+    }
+    /** Reads the minute selected in the time selector. */
+    onMinuteChange(event) {
+        this.viewMinute.set(Number(event.target.value));
+    }
+    /** Reads the second selected in the time selector. */
+    onSecondChange(event) {
+        this.viewSecond.set(Number(event.target.value));
+    }
+    /** Current meridiem ("AM"/"PM") for the 12-hour format. */
+    meridiem() {
+        return this.viewMeridiem();
+    }
+    /** Reads the meridiem selected in the time selector. */
+    onMeridiemChange(event) {
+        this.viewMeridiem.set(event.target.value);
+    }
+    /** Splits the date part from a full ISO "date" or "dateTtime" value. */
+    datePartOf(value) {
+        const i = value.indexOf('T');
+        return i >= 0 ? value.slice(0, i) : value;
+    }
+    /** Formats a raw time string ("HH:mm[:ss]") using the configured format. */
+    formatTimeFromValue(time) {
+        const [h, m, ss] = time.split(':').map(Number);
+        return this.formatTime(h || 0, m || 0, ss || 0);
+    }
+    /** Formats hour/minute/second according to hour format and seconds option. */
+    formatTime(h, m, s) {
+        if (this.hourFormat() === '12') {
+            const h12 = h % 12 || 12;
+            const suffix = h < 12 ? ' AM' : ' PM';
+            return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')}${suffix}`;
+        }
+        let label = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+        if (this.showSeconds())
+            label += `:${String(s).padStart(2, '0')}`;
+        return label;
+    }
+    /** Formats a Date as a YYYY-MM-DD ISO string. */
+    toISODate(date) {
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    }
+    /** Whether the given day matches the currently selected date. */
+    isSelectedDay(day) {
+        return (this.selectedYear() === this.viewYear() &&
+            this.selectedMonth() === this.viewMonth() &&
+            this.selectedDay() === day);
+    }
+    /** Hours available in the time selector ('12' maps to 0..11 or 12..23). */
+    hoursRange() {
+        if (this.hourFormat() === '12') {
+            const oneToTwelve = Array.from({ length: 12 }, (_, i) => i + 1);
+            return this.viewMeridiem() === 'PM'
+                ? oneToTwelve.map((h) => (h === 12 ? 12 : h + 12))
+                : oneToTwelve.map((h) => (h === 12 ? 0 : h));
+        }
+        return Array.from({ length: 24 }, (_, i) => i);
+    }
+    /** Minutes available in the time selector, stepped by `minuteStep`. */
+    minutesRange() {
+        const step = this.minuteStep();
+        return Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+    }
+    /** Seconds available in the time selector (0..59). */
+    secondsRange() {
+        return Array.from({ length: 60 }, (_, i) => i);
+    }
+    /** Formats an hour for display in the selector (12-hour aware). */
+    hourDisplay(hour) {
+        if (this.hourFormat() === '12') {
+            return String(hour % 12 || 12).padStart(2, '0');
+        }
+        return String(hour).padStart(2, '0');
+    }
+    /** Pads a minute value with a leading zero. */
+    minutesLabel(value) {
+        return String(value).padStart(2, '0');
+    }
+    /** Whether the given day is today's date. */
+    isToday(day) {
+        const now = new Date();
+        return (this.viewYear() === now.getFullYear() &&
+            this.viewMonth() === now.getMonth() &&
+            day === now.getDate());
+    }
+    /** Whether the given month matches the selected month and year. */
+    isSelectedMonth(monthIndex) {
+        return (this.selectedYear() === this.viewYear() &&
+            this.selectedMonth() === monthIndex);
+    }
+    isCurrentMonth(monthIndex) {
+        const now = new Date();
+        return (this.viewYear() === now.getFullYear() && monthIndex === now.getMonth());
+    }
+    isSelectedYear(year) {
+        return this.selectedYear() === year;
+    }
+    isCurrentYear(year) {
+        return new Date().getFullYear() === year;
+    }
+    writeValue(value) {
+        this._value.set(value || null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledState.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DatePickerComponent, isStandalone: true, selector: "shk-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n      class=\"flex items-center justify-between w-full px-3 py-2 text-left _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors sm:text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)]\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n        'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n        '_shk-border dark:[border-color:var(--shk-surface-200)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError(),\n      }\"\n    >\n      <span\n        [ngClass]=\"value() ? '_shk-text-surface-700 dark:[color:var(--shk-surface-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] shrink-0\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n        <path d=\"M16 2v4M8 2v4M3 10h18\"></path>\n      </svg>\n    </button>\n\n    @if (isOpen()) {\n      <div class=\"fixed inset-0 z-40 bg-black/30\" (click)=\"close()\"></div>\n      <div\n        class=\"fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 p-4 bg-white dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-xl\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (!timeOnly() && view() === 'date') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0 mb-1\">\n            @for (name of dayNames(); track $index) {\n              <div class=\"text-center text-xs font-medium _shk-text-surface-400 dark:[color:var(--shk-surface-400)] py-1\">\n                {{ name }}\n              </div>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0\">\n            @for (day of calendarDays(); track $index) {\n              @if (day !== null) {\n                <button\n                  type=\"button\"\n                  (click)=\"selectDay(day)\"\n                  class=\"py-1.5 text-sm rounded transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedDay(day),\n                    'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedDay(day) && !isToday(day),\n                  }\"\n                >\n                  {{ day }}\n                </button>\n              } @else {\n                <div></div>\n              }\n            }\n          </div>\n        }\n\n        @if (!timeOnly() && view() === 'month') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">{{ viewYear() }}</span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (name of monthNames(); track $index) {\n              <button\n                type=\"button\"\n                (click)=\"selectMonth($index)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedMonth($index),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedMonth($index) && !isCurrentMonth($index),\n                }\"\n              >\n                {{ name }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (!timeOnly() && view() === 'year') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">\n              {{ viewDecade() }} - {{ viewDecade() + 11 }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (year of decadeYears(); track year) {\n              <button\n                type=\"button\"\n                (click)=\"selectYear(year)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedYear(year),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedYear(year) && !isCurrentYear(year),\n                }\"\n              >\n                {{ year }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <div class=\"flex items-center justify-center gap-1\">\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewHour()\"\n                (change)=\"onHourChange($event)\"\n                aria-label=\"Hora\"\n              >\n                @for (h of hoursRange(); track h) {\n                  <option [value]=\"h\">{{ hourDisplay(h) }}</option>\n                }\n              </select>\n              <span class=\"_shk-text-surface-400\">:</span>\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewMinute()\"\n                (change)=\"onMinuteChange($event)\"\n                aria-label=\"Minutos\"\n              >\n                @for (minutes of minutesRange(); track minutes) {\n                  <option [value]=\"minutes\">{{ minutesLabel(minutes) }}</option>\n                }\n              </select>\n              @if (showSeconds()) {\n                <span class=\"text-sm _shk-text-surface-400\">:</span>\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"viewSecond()\"\n                  (change)=\"onSecondChange($event)\"\n                  aria-label=\"Segundos\"\n                >\n                  @for (seconds of secondsRange(); track seconds) {\n                    <option [value]=\"seconds\">{{ minutesLabel(seconds) }}</option>\n                  }\n                </select>\n              }\n              @if (hourFormat() === '12') {\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"meridiem()\"\n                  (change)=\"onMeridiemChange($event)\"\n                  aria-label=\"AM/PM\"\n                >\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              }\n            </div>\n            <button\n              type=\"button\"\n              (click)=\"confirmTime()\"\n              class=\"mt-3 w-full py-2 text-sm _shk-bg-primary _shk-text-white rounded-lg hover:[background-color:var(--shk-primary-700)] transition-colors\"\n            >\n              {{ timeOnly() ? 'Confirmar' : 'Introducir hora' }}\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto _shk-scrollbar\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n      class=\"flex items-center justify-between w-full px-3 py-2 text-left _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors sm:text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)]\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n        'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n        '_shk-border dark:[border-color:var(--shk-surface-200)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError(),\n      }\"\n    >\n      <span\n        [ngClass]=\"value() ? '_shk-text-surface-700 dark:[color:var(--shk-surface-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] shrink-0\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n        <path d=\"M16 2v4M8 2v4M3 10h18\"></path>\n      </svg>\n    </button>\n\n    @if (isOpen()) {\n      <div class=\"fixed inset-0 z-40 bg-black/30\" (click)=\"close()\"></div>\n      <div\n        class=\"fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 p-4 bg-white dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-xl\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (!timeOnly() && view() === 'date') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0 mb-1\">\n            @for (name of dayNames(); track $index) {\n              <div class=\"text-center text-xs font-medium _shk-text-surface-400 dark:[color:var(--shk-surface-400)] py-1\">\n                {{ name }}\n              </div>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0\">\n            @for (day of calendarDays(); track $index) {\n              @if (day !== null) {\n                <button\n                  type=\"button\"\n                  (click)=\"selectDay(day)\"\n                  class=\"py-1.5 text-sm rounded transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedDay(day),\n                    'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedDay(day) && !isToday(day),\n                  }\"\n                >\n                  {{ day }}\n                </button>\n              } @else {\n                <div></div>\n              }\n            }\n          </div>\n        }\n\n        @if (!timeOnly() && view() === 'month') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">{{ viewYear() }}</span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (name of monthNames(); track $index) {\n              <button\n                type=\"button\"\n                (click)=\"selectMonth($index)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedMonth($index),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedMonth($index) && !isCurrentMonth($index),\n                }\"\n              >\n                {{ name }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (!timeOnly() && view() === 'year') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)]\">\n              {{ viewDecade() }} - {{ viewDecade() + 11 }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (year of decadeYears(); track year) {\n              <button\n                type=\"button\"\n                (click)=\"selectYear(year)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedYear(year),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !isSelectedYear(year) && !isCurrentYear(year),\n                }\"\n              >\n                {{ year }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <div class=\"flex items-center justify-center gap-1\">\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewHour()\"\n                (change)=\"onHourChange($event)\"\n                aria-label=\"Hora\"\n              >\n                @for (h of hoursRange(); track h) {\n                  <option [value]=\"h\">{{ hourDisplay(h) }}</option>\n                }\n              </select>\n              <span class=\"_shk-text-surface-400\">:</span>\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewMinute()\"\n                (change)=\"onMinuteChange($event)\"\n                aria-label=\"Minutos\"\n              >\n                @for (minutes of minutesRange(); track minutes) {\n                  <option [value]=\"minutes\">{{ minutesLabel(minutes) }}</option>\n                }\n              </select>\n              @if (showSeconds()) {\n                <span class=\"text-sm _shk-text-surface-400\">:</span>\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"viewSecond()\"\n                  (change)=\"onSecondChange($event)\"\n                  aria-label=\"Segundos\"\n                >\n                  @for (seconds of secondsRange(); track seconds) {\n                    <option [value]=\"seconds\">{{ minutesLabel(seconds) }}</option>\n                  }\n                </select>\n              }\n              @if (hourFormat() === '12') {\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"meridiem()\"\n                  (change)=\"onMeridiemChange($event)\"\n                  aria-label=\"AM/PM\"\n                >\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              }\n            </div>\n            <button\n              type=\"button\"\n              (click)=\"confirmTime()\"\n              class=\"mt-3 w-full py-2 text-sm _shk-bg-primary _shk-text-white rounded-lg hover:[background-color:var(--shk-primary-700)] transition-colors\"\n            >\n              {{ timeOnly() ? 'Confirmar' : 'Introducir hora' }}\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto _shk-scrollbar\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOnly", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=shirkasoft-ui-components-date-picker.mjs.map