shirkasoft-ui-components 1.3.5 → 1.3.7

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

@@ -75,10 +75,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. */
@@ -232,7 +236,7 @@ class DatePickerComponent {
         }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* 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 (!min)
@@ -244,12 +248,13 @@ 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 (!max)
@@ -261,7 +266,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 +308,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 +367,9 @@ class DatePickerComponent {
         }
         else {
             this.syncViewToValue();
-            this.currentView.set(this.view());
+            this.currentView.set('year');
+            this.selectedYearValue.set(null);
+            this.selectedMonthValue.set(null);
             this.clockMode.set('hours');
             this.isTyping.set(false);
             this.isOpen.set(true);
@@ -388,6 +394,7 @@ 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]));
@@ -424,7 +431,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 +451,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,30 +469,25 @@ 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')}`;
-        if (this.showTime()) {
-            this.pendingDate.set(value);
-            return;
-        }
-        this.setValue(value);
+        this.selectedMonthValue.set(monthIndex);
+        this.viewMonth.set(monthIndex);
+        this.currentView.set('date');
     }
-    /** Selects a year (pending if time is shown). */
-    selectYear(year) {
-        const value = String(year);
+    /** 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;
@@ -721,21 +723,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 +739,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() {
@@ -901,15 +901,14 @@ class DatePickerComponent {
     }
     /** 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;
@@ -927,16 +926,16 @@ class DatePickerComponent {
         this._disabledState.set(isDisabled);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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.ɵ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: [
             {
                 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        <!-- 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.16", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'shk-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -944,7 +943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", 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"] }]
+                    ], 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        <!-- 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 }] }], 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']]