shirkasoft-ui-components 1.3.1 → 1.3.3

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

@@ -75,6 +75,16 @@ class DatePickerComponent {
         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 */ []));
+        /** Analog clock mode: 'hours' or 'minutes'. */
+        this.clockMode = signal('hours', ...(ngDevMode ? [{ debugName: "clockMode" }] : /* istanbul ignore next */ []));
+        /** Internal view state for drill-down navigation (separates from input `view`). */
+        this.currentView = signal('date', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+        /** Whether the user is typing in the input field. */
+        this.isTyping = signal(false, ...(ngDevMode ? [{ debugName: "isTyping" }] : /* istanbul ignore next */ []));
+        /** The raw text being typed by the user. */
+        this.typedValue = signal('', ...(ngDevMode ? [{ debugName: "typedValue" }] : /* istanbul ignore next */ []));
+        /** Whether the typed value is valid. */
+        this.typingValid = signal(null, ...(ngDevMode ? [{ debugName: "typingValid" }] : /* 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. */
@@ -274,6 +284,26 @@ class DatePickerComponent {
             const start = this.viewDecade();
             return Array.from({ length: 12 }, (_, i) => start + i);
         }, ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+        /** Angle (in degrees) of the analog clock hand based on current mode. */
+        this.clockHandAngle = computed(() => {
+            if (this.clockMode() === 'hours') {
+                const h = this.viewHour();
+                const display = this.hourFormat() === '12' ? h % 12 || 12 : h % 12 || 12;
+                return (display % 12) * 30;
+            }
+            return this.viewMinute() * 6;
+        }, ...(ngDevMode ? [{ debugName: "clockHandAngle" }] : /* istanbul ignore next */ []));
+        /** Hours to display on the analog clock face (1-12). */
+        this.clockHours = computed(() => Array.from({ length: 12 }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "clockHours" }] : /* istanbul ignore next */ []));
+        /** Minutes to display on the analog clock face (0-55, step 5). */
+        this.clockMinutes = computed(() => Array.from({ length: 12 }, (_, i) => i * 5), ...(ngDevMode ? [{ debugName: "clockMinutes" }] : /* istanbul ignore next */ []));
+        /** The input format string based on locale. */
+        this.inputFormat = computed(() => {
+            const loc = this.locale();
+            return loc === 'en' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
+        }, ...(ngDevMode ? [{ debugName: "inputFormat" }] : /* istanbul ignore next */ []));
+        /** Whether the drill-down navigation is active (view differs from input). */
+        this.isDrilledDown = computed(() => this.currentView() !== this.view(), ...(ngDevMode ? [{ debugName: "isDrilledDown" }] : /* istanbul ignore next */ []));
         /** (Unused legacy placeholder) plain year list. */
         this.years = [];
         // Attach error-state subscriptions to the validated control once found.
@@ -333,6 +363,9 @@ class DatePickerComponent {
         }
         else {
             this.syncViewToValue();
+            this.currentView.set(this.view());
+            this.clockMode.set('hours');
+            this.isTyping.set(false);
             this.isOpen.set(true);
         }
     }
@@ -569,6 +602,296 @@ class DatePickerComponent {
     minutesLabel(value) {
         return String(value).padStart(2, '0');
     }
+    /** Returns the position (x, y) for a clock number at the given index (0-11). */
+    getClockNumberPosition(index) {
+        const angle = (index * 30 - 90) * (Math.PI / 180);
+        const radius = 76;
+        const x = 100 + radius * Math.cos(angle);
+        const y = 100 + radius * Math.sin(angle);
+        return { x, y };
+    }
+    /** Returns the position (x, y) for a minute marker at the given index (0-59). */
+    getMinuteMarkerPosition(index) {
+        const angle = (index * 6 - 90) * (Math.PI / 180);
+        const radius = 88;
+        const x = 100 + radius * Math.cos(angle);
+        const y = 100 + radius * Math.sin(angle);
+        return { x, y, rotation: index * 6 };
+    }
+    /** Handles click on the analog clock face. */
+    onClockClick(event, mode) {
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = event.clientX - centerX;
+        const dy = event.clientY - centerY;
+        let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+        if (angle < 0)
+            angle += 360;
+        if (mode === 'hours') {
+            let hour = Math.round(angle / 30) % 12;
+            if (hour === 0)
+                hour = 12;
+            let actualHour = hour;
+            if (this.hourFormat() === '12') {
+                if (this.viewMeridiem() === 'PM' && hour !== 12) {
+                    actualHour = hour + 12;
+                }
+                else if (this.viewMeridiem() === 'AM' && hour === 12) {
+                    actualHour = 0;
+                }
+            }
+            else {
+                actualHour = hour === 12 ? 12 : hour;
+                if (this.viewHour() >= 12 && hour !== 12) {
+                    actualHour = hour + 12;
+                }
+                else if (this.viewHour() < 12 && hour === 12) {
+                    actualHour = 12;
+                }
+            }
+            this.viewHour.set(actualHour);
+            this.clockMode.set('minutes');
+        }
+        else {
+            const minute = Math.round(angle / 6) % 60;
+            const stepped = Math.round(minute / this.minuteStep()) * this.minuteStep();
+            this.viewMinute.set(stepped % 60);
+        }
+    }
+    /** Switches the clock mode between hours and minutes. */
+    toggleClockMode() {
+        this.clockMode.update((m) => (m === 'hours' ? 'minutes' : 'hours'));
+    }
+    /** Whether the given hour number matches the current selection on the clock face. */
+    isClockHourSelected(hour12) {
+        const h = this.viewHour();
+        if (this.hourFormat() === '12') {
+            const display = h % 12 || 12;
+            return display === hour12;
+        }
+        const display = h % 12 || 12;
+        return display === hour12;
+    }
+    /** Whether the given minute value matches the current selection. */
+    isClockMinuteSelected(minute) {
+        return this.viewMinute() === minute;
+    }
+    /** Formats the clock display time for the header above the clock. */
+    clockDisplayTime() {
+        return this.formatTime(this.viewHour(), this.viewMinute(), this.viewSecond());
+    }
+    /** Returns SVG line coordinates for a clock hand from center to angle. */
+    clockHandLine(length = 60) {
+        const angle = this.clockHandAngle();
+        // clockHandAngle: 0=12h, 90=3h, 180=6h, 270=9h
+        // SVG cos/sin: 0=3h, 90=6h, 180=9h, 270=12h → offset -90°
+        const rad = ((angle - 90) * Math.PI) / 180;
+        return {
+            x2: 100 + length * Math.cos(rad),
+            y2: 100 + length * Math.sin(rad),
+        };
+    }
+    /** Returns SVG text position for a clock number at the given index (0-11). */
+    clockNumberPos(index) {
+        const angle = ((index % 12) * 30 - 90) * (Math.PI / 180);
+        return {
+            x: 100 + 68 * Math.cos(angle),
+            y: 100 + 68 * Math.sin(angle),
+        };
+    }
+    /** Returns SVG text position for a minute label at the given minute (0-55). */
+    clockMinutePos(minute) {
+        const angle = (minute * 6 - 90) * (Math.PI / 180);
+        return {
+            x: 100 + 68 * Math.cos(angle),
+            y: 100 + 68 * Math.sin(angle),
+        };
+    }
+    /** Returns SVG line coordinates for a minute marker. */
+    clockMinuteMarker(i) {
+        const angle = (i * 6 - 90) * (Math.PI / 180);
+        const outerR = 84;
+        const innerR = i % 5 === 0 ? 78 : 82;
+        return {
+            x1: 100 + outerR * Math.cos(angle),
+            y1: 100 + outerR * Math.sin(angle),
+            x2: 100 + innerR * Math.cos(angle),
+            y2: 100 + innerR * Math.sin(angle),
+        };
+    }
+    /** Switches the drill-down view to months (from date view). */
+    drillToMonths() {
+        this.currentView.set('month');
+    }
+    /** Switches the drill-down view to years (from month view). */
+    drillToYears() {
+        this.currentView.set('year');
+    }
+    /** Drills down from year view to month view for the selected year. */
+    drillDownToMonth(year) {
+        this.viewYear.set(year);
+        this.currentView.set('month');
+    }
+    /** Drills down from month view to date view for the selected month. */
+    drillDownToDate(monthIndex) {
+        this.viewMonth.set(monthIndex);
+        this.currentView.set('date');
+    }
+    /** Goes back one level in drill-down navigation. */
+    drillUp() {
+        const v = this.currentView();
+        if (v === 'date') {
+            this.currentView.set('month');
+        }
+        else if (v === 'month') {
+            this.currentView.set('year');
+        }
+    }
+    /** Returns to the initial view from any drill-down level. */
+    drillToInitial() {
+        this.currentView.set(this.view());
+    }
+    /** Formats input placeholder based on locale. */
+    inputPlaceholder() {
+        if (this.timeOnly())
+            return this.inputFormat();
+        if (this.view() === 'year')
+            return 'YYYY';
+        if (this.view() === 'month')
+            return 'MM/YYYY';
+        return this.inputFormat();
+    }
+    /** Handles text input in the date field. */
+    onInputText(event) {
+        const value = event.target.value;
+        this.typedValue.set(value);
+        this.typingValid.set(null);
+    }
+    /** Handles focus on the input field. */
+    onInputFocus() {
+        this.isTyping.set(true);
+        const val = this._value();
+        if (val) {
+            if (this.timeOnly()) {
+                this.typedValue.set(val);
+            }
+            else {
+                this.typedValue.set(val);
+            }
+        }
+        else {
+            this.typedValue.set('');
+        }
+        this.typingValid.set(null);
+    }
+    /** Validates and commits the typed value on blur or Enter. */
+    onInputBlur() {
+        const text = this.typedValue().trim();
+        if (!text) {
+            this.isTyping.set(false);
+            return;
+        }
+        const parsed = this.parseTypedDate(text);
+        if (parsed) {
+            this.setValue(parsed);
+            this.typingValid.set(true);
+        }
+        else {
+            this.typingValid.set(false);
+            setTimeout(() => this.typingValid.set(null), 1500);
+        }
+        this.isTyping.set(false);
+    }
+    /** Cancels typing and reverts to the previous value. */
+    cancelTyping() {
+        this.isTyping.set(false);
+        this.typedValue.set('');
+        this.typingValid.set(null);
+    }
+    /** Parses a typed date string according to the locale format. */
+    parseTypedDate(text) {
+        const clean = text.replace(/[\/\-\.\s]/g, '/').trim();
+        const parts = clean.split('/').filter(Boolean);
+        if (this.timeOnly()) {
+            return this.parseTimeOnly(clean);
+        }
+        if (this.view() === 'year') {
+            const y = Number(parts[0]);
+            if (parts.length === 1 && y >= 1900 && y <= 2100)
+                return String(y);
+            return null;
+        }
+        if (this.view() === 'month') {
+            if (parts.length === 2) {
+                let m, y;
+                if (this.locale() === 'en') {
+                    m = Number(parts[0]);
+                    y = Number(parts[1]);
+                }
+                else {
+                    m = Number(parts[0]);
+                    y = Number(parts[1]);
+                }
+                if (m >= 1 && m <= 12 && y >= 1900 && y <= 2100) {
+                    return `${y}-${String(m).padStart(2, '0')}`;
+                }
+            }
+            return null;
+        }
+        // date view
+        if (parts.length >= 3) {
+            let d, m, y;
+            if (this.locale() === 'en') {
+                m = Number(parts[0]);
+                d = Number(parts[1]);
+                y = Number(parts[2]);
+            }
+            else {
+                d = Number(parts[0]);
+                m = Number(parts[1]);
+                y = Number(parts[2]);
+            }
+            if (y >= 1900 && y <= 2100 && m >= 1 && m <= 12 && d >= 1 && d <= 31) {
+                const date = new Date(y, m - 1, d);
+                if (date.getMonth() === m - 1 && date.getDate() === d) {
+                    let result = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+                    if (this.showTime()) {
+                        const time = `${String(this.viewHour()).padStart(2, '0')}:${String(this.viewMinute()).padStart(2, '0')}`;
+                        result += `T${time}`;
+                    }
+                    return result;
+                }
+            }
+        }
+        return null;
+    }
+    /** Parses time-only input. */
+    parseTimeOnly(text) {
+        const clean = text.replace(/[\.]/g, ':').trim();
+        const parts = clean.split(':').filter(Boolean);
+        if (parts.length >= 2) {
+            let h = Number(parts[0]);
+            const m = Number(parts[1]);
+            const s = parts.length >= 3 ? Number(parts[2]) : 0;
+            if (this.hourFormat() === '12') {
+                const isPM = /pm/i.test(text);
+                const isAM = /am/i.test(text);
+                if (isPM && h < 12)
+                    h += 12;
+                if (isAM && h === 12)
+                    h = 0;
+            }
+            if (h >= 0 && h <= 23 && m >= 0 && m <= 59 && s >= 0 && s <= 59) {
+                let result = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+                if (this.showSeconds())
+                    result += `:${String(s).padStart(2, '0')}`;
+                return result;
+            }
+        }
+        return null;
+    }
     /** Whether the given day is today's date. */
     isToday(day) {
         const now = new Date();
@@ -611,7 +934,7 @@ class DatePickerComponent {
                 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 }); }
+        ], 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    <div class=\"relative\">\n      <input\n        [id]=\"id()\"\n        type=\"text\"\n        [disabled]=\"isDisabled()\"\n        [placeholder]=\"inputPlaceholder()\"\n        [value]=\"isTyping() ? typedValue() : displayLabel()\"\n        (input)=\"onInputText($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown.enter)=\"$any($event.target).blur()\"\n        (keydown.escape)=\"cancelTyping()\"\n        (click)=\"toggle()\"\n        class=\"date-input-field\"\n        [ngClass]=\"{\n          'input-error': shouldShowError() || typingValid() === false,\n          'input-valid': wasFixedError() || typingValid() === true,\n        }\"\n        [attr.aria-invalid]=\"shouldShowError()\"\n        [attr.aria-describedby]=\"shouldShowError() ? id() + '-error' : null\"\n      />\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n      >\n        <svg\n          class=\"w-4 h-4\"\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    </div>\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        <!-- DATE VIEW -->\n        @if (!timeOnly() && currentView() === '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            <button\n              type=\"button\"\n              (click)=\"drillToMonths()\"\n              class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] hover:_shk-text-primary cursor-pointer hover:underline transition-colors\"\n            >\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </button>\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        <!-- MONTH VIEW -->\n        @if (!timeOnly() && currentView() === '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            <button\n              type=\"button\"\n              (click)=\"drillToYears()\"\n              class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] hover:_shk-text-primary cursor-pointer hover:underline transition-colors\"\n            >\n              {{ viewYear() }}\n            </button>\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)=\"drillDownToDate($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        <!-- YEAR VIEW -->\n        @if (!timeOnly() && currentView() === '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)=\"drillDownToMonth(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        <!-- ANALOG CLOCK TIME PICKER -->\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <!-- Clock display time -->\n            <div class=\"text-center mb-2\">\n              <span class=\"text-lg font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n                {{ clockDisplayTime() }}\n              </span>\n            </div>\n\n            <!-- Analog clock face -->\n            <div class=\"clock-container\">\n              <svg\n                viewBox=\"0 0 200 200\"\n                class=\"w-full h-full cursor-pointer\"\n                (click)=\"onClockClick($event, clockMode())\"\n              >\n                <!-- Clock face background -->\n                <circle cx=\"100\" cy=\"100\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"\n                  class=\"_shk-text-surface-200 dark:[color:var(--shk-surface-200)]\" />\n\n                <!-- Minute markers -->\n                @if (clockMode() === 'minutes') {\n                  @for (i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59]; track i) {\n                    <line\n                      [attr.x1]=\"clockMinuteMarker(i).x1\"\n                      [attr.y1]=\"clockMinuteMarker(i).y1\"\n                      [attr.x2]=\"clockMinuteMarker(i).x2\"\n                      [attr.y2]=\"clockMinuteMarker(i).y2\"\n                      [attr.stroke-width]=\"i % 5 === 0 ? 2 : 1\"\n                      [class]=\"i % 5 === 0 ? '_shk-text-surface-500 dark:[color:var(--shk-surface-500)]' : '_shk-text-surface-300 dark:[color:var(--shk-surface-400)]'\"\n                      stroke=\"currentColor\"\n                    />\n                  }\n                  <!-- Minute numbers (00, 05, 10, ...) -->\n                  @for (m of [0,5,10,15,20,25,30,35,40,45,50,55]; track m) {\n                    <text\n                      [attr.x]=\"clockMinutePos(m).x\"\n                      [attr.y]=\"clockMinutePos(m).y\"\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"central\"\n                      class=\"text-[9px] _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\"\n                      [class._shk-text-primary]=\"viewMinute() === m\"\n                    >\n                      {{ m.toString().padStart(2, '0') }}\n                    </text>\n                  }\n                }\n\n                <!-- Hour numbers -->\n                @if (clockMode() === 'hours') {\n                  @for (h of clockHours(); track h) {\n                    <text\n                      [attr.x]=\"clockNumberPos(h).x\"\n                      [attr.y]=\"clockNumberPos(h).y\"\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"central\"\n                      class=\"text-sm font-medium\"\n                      [class._shk-text-primary]=\"isClockHourSelected(h)\"\n                      [class._shk-text-surface-700]=\"!isClockHourSelected(h)\"\n                    >\n                      {{ h }}\n                    </text>\n                  }\n                }\n\n                <!-- Clock hand -->\n                <line\n                  x1=\"100\" y1=\"100\"\n                  [attr.x2]=\"clockHandLine(60).x2\"\n                  [attr.y2]=\"clockHandLine(60).y2\"\n                  class=\"_shk-text-primary\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n\n                <!-- Center dot -->\n                <circle cx=\"100\" cy=\"100\" r=\"4\" class=\"fill-current _shk-text-primary\" />\n              </svg>\n            </div>\n\n            <!-- Mode toggle: Hours / Minutes -->\n            <div class=\"clock-mode-toggle\">\n              <button\n                type=\"button\"\n                (click)=\"clockMode.set('hours')\"\n                class=\"clock-mode-btn\"\n                [class.active]=\"clockMode() === 'hours'\"\n              >\n                {{ 'Horas' }}\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"clockMode.set('minutes')\"\n                class=\"clock-mode-btn\"\n                [class.active]=\"clockMode() === 'minutes'\"\n              >\n                {{ 'Minutos' }}\n              </button>\n            </div>\n\n            <!-- AM/PM toggle for 12h format -->\n            @if (hourFormat() === '12') {\n              <div class=\"flex items-center justify-center gap-2 mt-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"viewMeridiem.set('AM')\"\n                  class=\"px-3 py-1 text-xs font-medium rounded-full transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white': viewMeridiem() === 'AM',\n                    '_shk-text-surface-500 hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': viewMeridiem() !== 'AM'\n                  }\"\n                >\n                  AM\n                </button>\n                <button\n                  type=\"button\"\n                  (click)=\"viewMeridiem.set('PM')\"\n                  class=\"px-3 py-1 text-xs font-medium rounded-full transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white': viewMeridiem() === 'PM',\n                    '_shk-text-surface-500 hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': viewMeridiem() !== 'PM'\n                  }\"\n                >\n                  PM\n                </button>\n              </div>\n            }\n\n            <!-- Seconds selector (if enabled) -->\n            @if (showSeconds()) {\n              <div class=\"flex items-center justify-center gap-1 mt-2\">\n                <span class=\"text-xs _shk-text-surface-400\">Seg:</span>\n                <select\n                  class=\"px-2 py-1 text-xs _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              </div>\n            }\n\n            <!-- Confirm button -->\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 [id]=\"id() + '-error'\" 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", styles: [".clock-container{position:relative;width:200px;height:200px;margin:0 auto}.clock-face{width:100%;height:100%;border-radius:50%;border:2px solid var(--shk-surface-200);position:relative;background-color:var(--shk-surface-50)}.dark .clock-face{border-color:var(--shk-surface-200);background-color:var(--shk-surface-100)}.clock-number{position:absolute;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:background-color .15s,color .15s;-webkit-user-select:none;user-select:none;color:var(--shk-surface-700)}.dark .clock-number{color:var(--shk-surface-700)}.clock-number:hover{background-color:var(--shk-surface-100)}.dark .clock-number:hover{background-color:var(--shk-surface-200)}.clock-number.selected{background-color:var(--shk-primary-500);color:#fff}.clock-number.current{font-weight:700}.clock-hand{position:absolute;bottom:50%;left:50%;width:2px;background-color:var(--shk-primary-500);transform-origin:bottom center;border-radius:1px;pointer-events:none;transition:transform .2s ease-out}.clock-center{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:var(--shk-primary-500);transform:translate(-50%,-50%);pointer-events:none;z-index:2}.clock-minute-marker{position:absolute;width:1px;height:8px;background-color:var(--shk-surface-300);top:6px;left:50%;transform-origin:center 94px}.dark .clock-minute-marker{background-color:var(--shk-surface-400)}.clock-minute-marker.major{width:2px;height:12px;background-color:var(--shk-surface-400)}.dark .clock-minute-marker.major{background-color:var(--shk-surface-500)}.clock-mode-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem}.clock-mode-btn{padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:9999px;cursor:pointer;transition:background-color .15s,color .15s;border:none;background:transparent;color:var(--shk-surface-500)}.dark .clock-mode-btn{color:var(--shk-surface-400)}.clock-mode-btn.active{background-color:var(--shk-primary-500);color:#fff}.clock-mode-btn:hover:not(.active){background-color:var(--shk-surface-100)}.dark .clock-mode-btn:hover:not(.active){background-color:var(--shk-surface-200)}.date-input-field{width:100%;padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;border-radius:.5rem;outline:none;transition:border-color .15s,box-shadow .15s;background-color:var(--shk-surface-50);color:var(--shk-surface-700);border:1px solid var(--shk-surface-200)}.dark .date-input-field{background-color:var(--shk-surface-100);color:var(--shk-surface-700);border-color:var(--shk-surface-200)}.date-input-field::placeholder{color:var(--shk-surface-400)}.dark .date-input-field::placeholder{color:var(--shk-surface-400)}.date-input-field:focus{border-color:var(--shk-primary-500);box-shadow:0 0 0 1px var(--shk-primary-500)}.date-input-field:disabled{opacity:.5;cursor:not-allowed}.date-input-field.input-error{border-color:#ef4444}.date-input-field.input-error:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.date-input-field.input-valid{border-color:#22c55e}.date-input-field.input-valid:focus{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e}\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,
@@ -621,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             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" }]
+                    ], 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    <div class=\"relative\">\n      <input\n        [id]=\"id()\"\n        type=\"text\"\n        [disabled]=\"isDisabled()\"\n        [placeholder]=\"inputPlaceholder()\"\n        [value]=\"isTyping() ? typedValue() : displayLabel()\"\n        (input)=\"onInputText($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown.enter)=\"$any($event.target).blur()\"\n        (keydown.escape)=\"cancelTyping()\"\n        (click)=\"toggle()\"\n        class=\"date-input-field\"\n        [ngClass]=\"{\n          'input-error': shouldShowError() || typingValid() === false,\n          'input-valid': wasFixedError() || typingValid() === true,\n        }\"\n        [attr.aria-invalid]=\"shouldShowError()\"\n        [attr.aria-describedby]=\"shouldShowError() ? id() + '-error' : null\"\n      />\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n      >\n        <svg\n          class=\"w-4 h-4\"\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    </div>\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        <!-- DATE VIEW -->\n        @if (!timeOnly() && currentView() === '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            <button\n              type=\"button\"\n              (click)=\"drillToMonths()\"\n              class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] hover:_shk-text-primary cursor-pointer hover:underline transition-colors\"\n            >\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </button>\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        <!-- MONTH VIEW -->\n        @if (!timeOnly() && currentView() === '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            <button\n              type=\"button\"\n              (click)=\"drillToYears()\"\n              class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] hover:_shk-text-primary cursor-pointer hover:underline transition-colors\"\n            >\n              {{ viewYear() }}\n            </button>\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)=\"drillDownToDate($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        <!-- YEAR VIEW -->\n        @if (!timeOnly() && currentView() === '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)=\"drillDownToMonth(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        <!-- ANALOG CLOCK TIME PICKER -->\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <!-- Clock display time -->\n            <div class=\"text-center mb-2\">\n              <span class=\"text-lg font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n                {{ clockDisplayTime() }}\n              </span>\n            </div>\n\n            <!-- Analog clock face -->\n            <div class=\"clock-container\">\n              <svg\n                viewBox=\"0 0 200 200\"\n                class=\"w-full h-full cursor-pointer\"\n                (click)=\"onClockClick($event, clockMode())\"\n              >\n                <!-- Clock face background -->\n                <circle cx=\"100\" cy=\"100\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"\n                  class=\"_shk-text-surface-200 dark:[color:var(--shk-surface-200)]\" />\n\n                <!-- Minute markers -->\n                @if (clockMode() === 'minutes') {\n                  @for (i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59]; track i) {\n                    <line\n                      [attr.x1]=\"clockMinuteMarker(i).x1\"\n                      [attr.y1]=\"clockMinuteMarker(i).y1\"\n                      [attr.x2]=\"clockMinuteMarker(i).x2\"\n                      [attr.y2]=\"clockMinuteMarker(i).y2\"\n                      [attr.stroke-width]=\"i % 5 === 0 ? 2 : 1\"\n                      [class]=\"i % 5 === 0 ? '_shk-text-surface-500 dark:[color:var(--shk-surface-500)]' : '_shk-text-surface-300 dark:[color:var(--shk-surface-400)]'\"\n                      stroke=\"currentColor\"\n                    />\n                  }\n                  <!-- Minute numbers (00, 05, 10, ...) -->\n                  @for (m of [0,5,10,15,20,25,30,35,40,45,50,55]; track m) {\n                    <text\n                      [attr.x]=\"clockMinutePos(m).x\"\n                      [attr.y]=\"clockMinutePos(m).y\"\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"central\"\n                      class=\"text-[9px] _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\"\n                      [class._shk-text-primary]=\"viewMinute() === m\"\n                    >\n                      {{ m.toString().padStart(2, '0') }}\n                    </text>\n                  }\n                }\n\n                <!-- Hour numbers -->\n                @if (clockMode() === 'hours') {\n                  @for (h of clockHours(); track h) {\n                    <text\n                      [attr.x]=\"clockNumberPos(h).x\"\n                      [attr.y]=\"clockNumberPos(h).y\"\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"central\"\n                      class=\"text-sm font-medium\"\n                      [class._shk-text-primary]=\"isClockHourSelected(h)\"\n                      [class._shk-text-surface-700]=\"!isClockHourSelected(h)\"\n                    >\n                      {{ h }}\n                    </text>\n                  }\n                }\n\n                <!-- Clock hand -->\n                <line\n                  x1=\"100\" y1=\"100\"\n                  [attr.x2]=\"clockHandLine(60).x2\"\n                  [attr.y2]=\"clockHandLine(60).y2\"\n                  class=\"_shk-text-primary\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n\n                <!-- Center dot -->\n                <circle cx=\"100\" cy=\"100\" r=\"4\" class=\"fill-current _shk-text-primary\" />\n              </svg>\n            </div>\n\n            <!-- Mode toggle: Hours / Minutes -->\n            <div class=\"clock-mode-toggle\">\n              <button\n                type=\"button\"\n                (click)=\"clockMode.set('hours')\"\n                class=\"clock-mode-btn\"\n                [class.active]=\"clockMode() === 'hours'\"\n              >\n                {{ 'Horas' }}\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"clockMode.set('minutes')\"\n                class=\"clock-mode-btn\"\n                [class.active]=\"clockMode() === 'minutes'\"\n              >\n                {{ 'Minutos' }}\n              </button>\n            </div>\n\n            <!-- AM/PM toggle for 12h format -->\n            @if (hourFormat() === '12') {\n              <div class=\"flex items-center justify-center gap-2 mt-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"viewMeridiem.set('AM')\"\n                  class=\"px-3 py-1 text-xs font-medium rounded-full transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white': viewMeridiem() === 'AM',\n                    '_shk-text-surface-500 hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': viewMeridiem() !== 'AM'\n                  }\"\n                >\n                  AM\n                </button>\n                <button\n                  type=\"button\"\n                  (click)=\"viewMeridiem.set('PM')\"\n                  class=\"px-3 py-1 text-xs font-medium rounded-full transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white': viewMeridiem() === 'PM',\n                    '_shk-text-surface-500 hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': viewMeridiem() !== 'PM'\n                  }\"\n                >\n                  PM\n                </button>\n              </div>\n            }\n\n            <!-- Seconds selector (if enabled) -->\n            @if (showSeconds()) {\n              <div class=\"flex items-center justify-center gap-1 mt-2\">\n                <span class=\"text-xs _shk-text-surface-400\">Seg:</span>\n                <select\n                  class=\"px-2 py-1 text-xs _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              </div>\n            }\n\n            <!-- Confirm button -->\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 [id]=\"id() + '-error'\" 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", styles: [".clock-container{position:relative;width:200px;height:200px;margin:0 auto}.clock-face{width:100%;height:100%;border-radius:50%;border:2px solid var(--shk-surface-200);position:relative;background-color:var(--shk-surface-50)}.dark .clock-face{border-color:var(--shk-surface-200);background-color:var(--shk-surface-100)}.clock-number{position:absolute;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:background-color .15s,color .15s;-webkit-user-select:none;user-select:none;color:var(--shk-surface-700)}.dark .clock-number{color:var(--shk-surface-700)}.clock-number:hover{background-color:var(--shk-surface-100)}.dark .clock-number:hover{background-color:var(--shk-surface-200)}.clock-number.selected{background-color:var(--shk-primary-500);color:#fff}.clock-number.current{font-weight:700}.clock-hand{position:absolute;bottom:50%;left:50%;width:2px;background-color:var(--shk-primary-500);transform-origin:bottom center;border-radius:1px;pointer-events:none;transition:transform .2s ease-out}.clock-center{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:var(--shk-primary-500);transform:translate(-50%,-50%);pointer-events:none;z-index:2}.clock-minute-marker{position:absolute;width:1px;height:8px;background-color:var(--shk-surface-300);top:6px;left:50%;transform-origin:center 94px}.dark .clock-minute-marker{background-color:var(--shk-surface-400)}.clock-minute-marker.major{width:2px;height:12px;background-color:var(--shk-surface-400)}.dark .clock-minute-marker.major{background-color:var(--shk-surface-500)}.clock-mode-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem}.clock-mode-btn{padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:9999px;cursor:pointer;transition:background-color .15s,color .15s;border:none;background:transparent;color:var(--shk-surface-500)}.dark .clock-mode-btn{color:var(--shk-surface-400)}.clock-mode-btn.active{background-color:var(--shk-primary-500);color:#fff}.clock-mode-btn:hover:not(.active){background-color:var(--shk-surface-100)}.dark .clock-mode-btn:hover:not(.active){background-color:var(--shk-surface-200)}.date-input-field{width:100%;padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;border-radius:.5rem;outline:none;transition:border-color .15s,box-shadow .15s;background-color:var(--shk-surface-50);color:var(--shk-surface-700);border:1px solid var(--shk-surface-200)}.dark .date-input-field{background-color:var(--shk-surface-100);color:var(--shk-surface-700);border-color:var(--shk-surface-200)}.date-input-field::placeholder{color:var(--shk-surface-400)}.dark .date-input-field::placeholder{color:var(--shk-surface-400)}.date-input-field:focus{border-color:var(--shk-primary-500);box-shadow:0 0 0 1px var(--shk-primary-500)}.date-input-field:disabled{opacity:.5;cursor:not-allowed}.date-input-field.input-error{border-color:#ef4444}.date-input-field.input-error:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.date-input-field.input-valid{border-color:#22c55e}.date-input-field.input-valid:focus{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e}\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']]