shirkasoft-ui-components 1.3.6 → 1.3.8

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

@@ -18,6 +18,22 @@ import { TranslocoService } from '@jsverse/transloco';
  * min/max constraints and locale-aware labels.
  */
 class DatePickerComponent {
+    /** Localized range label for a week (e.g. '2 — 8 feb'). */
+    formatWeekRange(start, end) {
+        const loc = this.locale();
+        const dayFmt = new Intl.DateTimeFormat(loc, { day: 'numeric' });
+        const monthFmt = new Intl.DateTimeFormat(loc, { month: 'short' });
+        const startLabel = `${dayFmt.format(start)} ${monthFmt.format(start).replace('.', '')}`;
+        if (start.getMonth() !== end.getMonth() || start.getFullYear() !== end.getFullYear()) {
+            const year = start.getFullYear() !== end.getFullYear() ? ` ${end.getFullYear()}` : '';
+            return `${startLabel} — ${dayFmt.format(end)} ${monthFmt.format(end).replace('.', '')}${year}`;
+        }
+        return `${startLabel} — ${dayFmt.format(end)}`;
+    }
+    /** Localized label for a week row ('Semana N' / 'Week N'). */
+    weekLabel(index) {
+        return this.locale() === 'en' ? `Week ${index}` : `Semana ${index}`;
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
@@ -25,8 +41,10 @@ class DatePickerComponent {
         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'). */
+        /** Granularity of the picker ('date' | 'week' | 'month' | 'year'). */
         this.view = input('date', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** First day of the week (0=Sunday ... 6=Saturday), used by week view. */
+        this.weekStart = input(0, ...(ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []));
         /** Label shown above the input. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Placeholder of the input. */
@@ -75,10 +93,14 @@ 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 */ []));
+        /** Selected year during the selection flow (year -> month -> day). */
+        this.selectedYearValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedYearValue" }] : /* istanbul ignore next */ []));
+        /** Selected month during the selection flow. */
+        this.selectedMonthValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedMonthValue" }] : /* 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 */ []));
+        this.currentView = signal('year', ...(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. */
@@ -184,6 +206,10 @@ class DatePickerComponent {
                 label = fmt.format(new Date(y, m - 1, 1));
                 label = label.charAt(0).toUpperCase() + label.slice(1);
             }
+            else if (v === 'week') {
+                const start = new Date(datePart + 'T12:00:00');
+                label = this.formatWeekRange(start, new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6));
+            }
             else {
                 const fmt = new Intl.DateTimeFormat(this.locale(), {
                     dateStyle: 'long',
@@ -230,11 +256,31 @@ class DatePickerComponent {
                 days.push(i);
             return days;
         }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+        /** Weeks of the viewed month (rows aligned to `weekStart`), for week view. */
+        this.monthWeeks = computed(() => {
+            const year = this.viewYear();
+            const month = this.viewMonth();
+            const ws = this.weekStart();
+            const first = new Date(year, month, 1);
+            const last = new Date(year, month + 1, 0);
+            const anchor = new Date(first.getFullYear(), first.getMonth(), first.getDate() - ((first.getDay() - ws + 7) % 7));
+            const weeks = [];
+            let cursor = anchor;
+            let index = 0;
+            while (cursor.getTime() <= last.getTime()) {
+                index++;
+                const start = cursor;
+                const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6);
+                weeks.push({ index, start, end, range: this.formatWeekRange(start, end) });
+                cursor = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 7);
+            }
+            return weeks;
+        }, ...(ngDevMode ? [{ debugName: "monthWeeks" }] : /* istanbul ignore next */ []));
         /** Whether the prev navigation button is allowed by `minValue`. */
         this.canGoPrev = computed(() => {
-            const v = this.view();
+            const v = this.currentView();
             const min = this.minValue();
-            if (v === 'date') {
+            if (v === 'date' || v === 'week') {
                 if (!min)
                     return true;
                 const prev = new Date(this.viewYear(), this.viewMonth() - 1, 1);
@@ -244,14 +290,15 @@ class DatePickerComponent {
                 const minY = min ? Number(min.split('-')[0]) : undefined;
                 return minY === undefined || this.viewYear() > minY;
             }
-            const minY = min ? Number(min) : undefined;
+            // year view
+            const minY = min ? Number(min.split('-')[0]) : 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 v = this.currentView();
             const max = this.maxValue();
-            if (v === 'date') {
+            if (v === 'date' || v === 'week') {
                 if (!max)
                     return true;
                 const next = new Date(this.viewYear(), this.viewMonth() + 1, 1);
@@ -261,7 +308,8 @@ class DatePickerComponent {
                 const maxY = max ? Number(max.split('-')[0]) : undefined;
                 return maxY === undefined || this.viewYear() < maxY;
             }
-            const maxY = max ? Number(max) : undefined;
+            // year view
+            const maxY = max ? Number(max.split('-')[0]) : undefined;
             return maxY === undefined || this.viewYear() < maxY;
         }, ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
         /** Year of the displayed date, if any. */
@@ -302,8 +350,6 @@ class DatePickerComponent {
             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.
@@ -363,7 +409,9 @@ class DatePickerComponent {
         }
         else {
             this.syncViewToValue();
-            this.currentView.set(this.view());
+            this.currentView.set(this.view() === 'week' ? 'week' : 'year');
+            this.selectedYearValue.set(null);
+            this.selectedMonthValue.set(null);
             this.clockMode.set('hours');
             this.isTyping.set(false);
             this.isOpen.set(true);
@@ -388,10 +436,16 @@ class DatePickerComponent {
         const timePart = val.includes('T') ? val.split('T')[1] : undefined;
         if (v === 'year') {
             this.viewYear.set(Number(datePart));
+            this.viewDecade.set(Math.floor(Number(datePart) / 10) * 10);
         }
         else if (v === 'month') {
             this.viewYear.set(Number(datePart.split('-')[0]));
         }
+        else if (v === 'week') {
+            const d = new Date(datePart + 'T12:00:00');
+            this.viewYear.set(d.getFullYear());
+            this.viewMonth.set(d.getMonth());
+        }
         else {
             const d = new Date(datePart + 'T12:00:00');
             this.viewYear.set(d.getFullYear());
@@ -424,7 +478,7 @@ class DatePickerComponent {
     }
     /** Navigates the calendar to the previous year/month/decade. */
     prev() {
-        const v = this.view();
+        const v = this.currentView();
         if (v === 'year') {
             this.viewDecade.update((d) => d - 12);
             this.viewYear.update((y) => y - 12);
@@ -444,7 +498,7 @@ class DatePickerComponent {
     }
     /** Navigates the calendar to the next year/month/decade. */
     next() {
-        const v = this.view();
+        const v = this.currentView();
         if (v === 'year') {
             this.viewDecade.update((d) => d + 12);
             this.viewYear.update((y) => y + 12);
@@ -462,37 +516,42 @@ class DatePickerComponent {
             });
         }
     }
-    /** 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 year - stores it and navigates to month selection. */
+    selectYear(year) {
+        this.selectedYearValue.set(year);
+        this.viewYear.set(year);
+        this.currentView.set('month');
     }
-    /** Selects a month of the year (pending if time is shown). */
+    /** Selects a month - stores it and navigates to day selection. */
     selectMonth(monthIndex) {
-        const value = `${this.viewYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        this.selectedMonthValue.set(monthIndex);
+        this.viewMonth.set(monthIndex);
+        this.currentView.set('date');
+    }
+    /** Selects a day - completes the date selection. */
+    selectDay(day) {
+        const year = this.selectedYearValue() ?? this.viewYear();
+        const month = this.selectedMonthValue() ?? this.viewMonth();
+        const m = String(month + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        const value = `${year}-${m}-${d}`;
         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);
+    /** Selects a week - emits its start date (YYYY-MM-DD). */
+    selectWeek(start) {
+        const value = `${start.getFullYear()}-` +
+            `${String(start.getMonth() + 1).padStart(2, '0')}-` +
+            `${String(start.getDate()).padStart(2, '0')}`;
         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);
@@ -721,21 +780,15 @@ class DatePickerComponent {
             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.selectedYearValue.set(year);
         this.viewYear.set(year);
         this.currentView.set('month');
     }
     /** Drills down from month view to date view for the selected month. */
     drillDownToDate(monthIndex) {
+        this.selectedMonthValue.set(monthIndex);
         this.viewMonth.set(monthIndex);
         this.currentView.set('date');
     }
@@ -743,15 +796,19 @@ class DatePickerComponent {
     drillUp() {
         const v = this.currentView();
         if (v === 'date') {
+            this.selectedMonthValue.set(null);
             this.currentView.set('month');
         }
         else if (v === 'month') {
+            this.selectedYearValue.set(null);
             this.currentView.set('year');
         }
     }
-    /** Returns to the initial view from any drill-down level. */
+    /** Returns to the initial view (year selection). */
     drillToInitial() {
-        this.currentView.set(this.view());
+        this.selectedYearValue.set(null);
+        this.selectedMonthValue.set(null);
+        this.currentView.set('year');
     }
     /** Formats input placeholder based on locale. */
     inputPlaceholder() {
@@ -761,6 +818,9 @@ class DatePickerComponent {
             return 'YYYY';
         if (this.view() === 'month')
             return 'MM/YYYY';
+        if (this.view() === 'week') {
+            return this.locale() === 'en' ? 'Week · MM/YYYY' : 'Semana · MM/YYYY';
+        }
         return this.inputFormat();
     }
     /** Handles text input in the date field. */
@@ -817,6 +877,8 @@ class DatePickerComponent {
         if (this.timeOnly()) {
             return this.parseTimeOnly(clean);
         }
+        if (this.view() === 'week')
+            return null;
         if (this.view() === 'year') {
             const y = Number(parts[0]);
             if (parts.length === 1 && y >= 1900 && y <= 2100)
@@ -899,17 +961,35 @@ class DatePickerComponent {
             this.viewMonth() === now.getMonth() &&
             day === now.getDate());
     }
+    /** ISO date (YYYY-MM-DD) of the week start containing the given date. */
+    weekStartISO(date) {
+        const ws = this.weekStart();
+        const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() - ((date.getDay() - ws + 7) % 7));
+        return (`${start.getFullYear()}-` +
+            `${String(start.getMonth() + 1).padStart(2, '0')}-` +
+            `${String(start.getDate()).padStart(2, '0')}`);
+    }
+    /** Whether the given week row contains the displayed/selected date. */
+    isSelectedWeek(start) {
+        const date = this.displayedDate();
+        if (!date)
+            return false;
+        return this.weekStartISO(new Date(date + 'T12:00:00')) === this.weekStartISO(start);
+    }
+    /** Whether the given week row contains today's date. */
+    isCurrentWeek(start) {
+        return this.weekStartISO(new Date()) === this.weekStartISO(start);
+    }
     /** Whether the given month matches the selected month and year. */
     isSelectedMonth(monthIndex) {
-        return (this.selectedYear() === this.viewYear() &&
-            this.selectedMonth() === monthIndex);
+        return this.selectedMonthValue() === monthIndex;
     }
     isCurrentMonth(monthIndex) {
         const now = new Date();
-        return (this.viewYear() === now.getFullYear() && monthIndex === now.getMonth());
+        return this.viewYear() === now.getFullYear() && monthIndex === now.getMonth();
     }
     isSelectedYear(year) {
-        return this.selectedYear() === year;
+        return this.selectedYearValue() === year;
     }
     isCurrentYear(year) {
         return new Date().getFullYear() === year;
@@ -928,13 +1008,13 @@ class DatePickerComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", 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    <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 }); }
+        ], 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)=\"drillUp()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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()] }} {{ selectedYearValue() ?? viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"drillToInitial()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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        <!-- WEEK VIEW -->\n        @if (!timeOnly() && currentView() === 'week') {\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=\"space-y-1\">\n            @for (week of monthWeeks(); track week.index) {\n              <button\n                type=\"button\"\n                (click)=\"selectWeek(week.start)\"\n                class=\"w-full flex items-center justify-between py-1.5 px-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedWeek(week.start),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentWeek(week.start) && !isSelectedWeek(week.start),\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)]': !isSelectedWeek(week.start) && !isCurrentWeek(week.start),\n                }\"\n              >\n                <span class=\"font-medium\">{{ weekLabel(week.index) }}</span>\n                <span class=\"text-xs opacity-80\">{{ week.range }}</span>\n              </button>\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)=\"drillUp()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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              {{ selectedYearValue() ?? viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"drillToInitial()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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)]': selectedMonthValue() === $index,\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentMonth($index) && selectedMonthValue() !== $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)]': selectedMonthValue() !== $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)=\"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)]': selectedYearValue() === year,\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentYear(year) && selectedYearValue() !== 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)]': selectedYearValue() !== 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.23", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -944,8 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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    <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: [{
+                    ], 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)=\"drillUp()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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()] }} {{ selectedYearValue() ?? viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"drillToInitial()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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        <!-- WEEK VIEW -->\n        @if (!timeOnly() && currentView() === 'week') {\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=\"space-y-1\">\n            @for (week of monthWeeks(); track week.index) {\n              <button\n                type=\"button\"\n                (click)=\"selectWeek(week.start)\"\n                class=\"w-full flex items-center justify-between py-1.5 px-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedWeek(week.start),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentWeek(week.start) && !isSelectedWeek(week.start),\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)]': !isSelectedWeek(week.start) && !isCurrentWeek(week.start),\n                }\"\n              >\n                <span class=\"font-medium\">{{ weekLabel(week.index) }}</span>\n                <span class=\"text-xs opacity-80\">{{ week.range }}</span>\n              </button>\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)=\"drillUp()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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              {{ selectedYearValue() ?? viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"drillToInitial()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\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)]': selectedMonthValue() === $index,\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentMonth($index) && selectedMonthValue() !== $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)]': selectedMonthValue() !== $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)=\"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)]': selectedYearValue() === year,\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]': isCurrentYear(year) && selectedYearValue() !== 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)]': selectedYearValue() !== 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 }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", 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: [{