@solcre-org/core-ui 2.20.27 → 2.20.28

package/fesm2022/solcre-org-core-ui.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, HostListener, ViewChild, ViewEncapsulation, Pipe, Injectable, ElementRef, untracked, ViewContainerRef, TemplateRef, InjectionToken, ContentChild, ChangeDetectionStrategy, viewChild, ChangeDetectorRef, afterNextRender, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, ElementRef, HostListener, ViewChild, ViewEncapsulation, Pipe, Injectable, untracked, ViewContainerRef, TemplateRef, InjectionToken, ContentChild, ChangeDetectionStrategy, viewChild, ChangeDetectorRef, afterNextRender, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
 import * as i3$1 from '@angular/forms';
 import { FormControl, Validators, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import * as i5 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
 import { AuthService, ApiService } from '@solcre-org/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { distinctUntilChanged, debounceTime, tap as tap$1, map as map$1, filter, catchError as catchError$1 } from 'rxjs/operators';
 import { map, BehaviorSubject, Subject, throttleTime, takeUntil, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap, switchMap, of, catchError, finalize, throwError, Observable, forkJoin, zip, timeout, Subscription, from } from 'rxjs';
+import * as i5 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
 import * as i4 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1062,6 +1062,7 @@ var TimeInterval;
 })(TimeInterval || (TimeInterval = {}));
 
 class DatetimeFieldComponent {
+    el = inject(ElementRef);
     field = input.required();
     value = input(null);
     mode = input.required();
@@ -1076,9 +1077,20 @@ class DatetimeFieldComponent {
     selectedDate = signal(null);
     selectedHour = signal(null);
     selectedMinute = signal(null);
+    isHourOpen = signal(false);
+    isMinuteOpen = signal(false);
+    highlightedHourIndex = signal(-1);
+    highlightedMinuteIndex = signal(-1);
     hasHourValue = signal(false);
     hasMinuteValue = signal(false);
     hours = Array.from({ length: 24 }, (_, i) => i);
+    onDocumentClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.isHourOpen.set(false);
+            this.isMinuteOpen.set(false);
+            this.onBlur();
+        }
+    }
     isHourPlaceholderVisible = computed(() => {
         const hasVal = this.hasHourValue();
         return !hasVal;
@@ -1148,6 +1160,9 @@ class DatetimeFieldComponent {
             return true;
         return this.evaluateReadonly();
     });
+    isTimeDisabled = computed(() => {
+        return this.isDisabled() || !this.selectedDate();
+    });
     hasError = computed(() => {
         return this.errors().length > 0;
     });
@@ -1173,7 +1188,6 @@ class DatetimeFieldComponent {
                 this.selectedMinute.set(this.roundToNearestInterval(newDate).getMinutes());
             }
         });
-        // Update hasValue signals when selected values change
         effect(() => {
             const hour = this.selectedHour();
             this.hasHourValue.set(hour !== null && hour !== undefined);
@@ -1239,7 +1253,6 @@ class DatetimeFieldComponent {
         const input = event.target;
         const newDate = input.value ? new Date(input.value + 'T00:00:00') : null;
         if (newDate && !isNaN(newDate.getTime())) {
-            // If hour/minute not set, default to 0
             const currentHour = this.selectedHour() ?? 0;
             const currentMinute = this.selectedMinute() ?? 0;
             this.selectedHour.set(currentHour);
@@ -1252,8 +1265,6 @@ class DatetimeFieldComponent {
             this.emitValue();
         }
         else {
-            //If date is cleared, clear everything? Or just date?
-            //Usually if date input is cleared, value is null.
             this.selectedDate.set(null);
             this.emitValue();
         }
@@ -1266,15 +1277,47 @@ class DatetimeFieldComponent {
         this.selectedMinute.set(value);
         this.emitValue();
     }
+    toggleHourDropdown(event) {
+        if (this.isTimeDisabled())
+            return;
+        event.stopPropagation();
+        const opening = !this.isHourOpen();
+        this.isHourOpen.set(opening);
+        this.isMinuteOpen.set(false);
+        if (opening) {
+            const idx = this.hoursOptions().findIndex(o => o.value === this.selectedHour());
+            this.highlightedHourIndex.set(idx >= 0 ? idx : -1);
+        }
+    }
+    toggleMinuteDropdown(event) {
+        if (this.isTimeDisabled())
+            return;
+        event.stopPropagation();
+        const opening = !this.isMinuteOpen();
+        this.isMinuteOpen.set(opening);
+        this.isHourOpen.set(false);
+        if (opening) {
+            const idx = this.minutesOptions().findIndex(o => o.value === this.selectedMinute());
+            this.highlightedMinuteIndex.set(idx >= 0 ? idx : -1);
+        }
+    }
+    selectHourOption(value, event) {
+        event.stopPropagation();
+        this.onHourChange(value);
+        this.isHourOpen.set(false);
+    }
+    selectMinuteOption(value, event) {
+        event.stopPropagation();
+        this.onMinuteChange(value);
+        this.isMinuteOpen.set(false);
+    }
     emitValue() {
         const date = this.selectedDate();
-        // If no date selected, value is null regardless of time
         if (!date || isNaN(date.getTime())) {
             this.valueChange.emit(null);
             return;
         }
         const newDate = new Date(date.getTime());
-        // Use 0 if time not selected yet but date is present
         newDate.setHours(this.selectedHour() ?? 0);
         newDate.setMinutes(this.selectedMinute() ?? 0);
         newDate.setSeconds(0);
@@ -1313,6 +1356,13 @@ class DatetimeFieldComponent {
     onBlur() {
         this.onBlurEvent.emit(this.field().key);
     }
+    onDateInputBlur() {
+        setTimeout(() => {
+            if (!this.el.nativeElement.contains(document.activeElement)) {
+                this.onBlur();
+            }
+        }, 200);
+    }
     onEnter(event) {
         this.onEnterEvent.emit(this.field().key);
         const target = event.target;
@@ -1331,12 +1381,15 @@ class DatetimeFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DatetimeFieldComponent, isStandalone: true, selector: "core-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DatetimeFieldComponent, isStandalone: true, selector: "core-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onDateInputBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--native-select\"\n      [class.is-placeholder]=\"isHourPlaceholderVisible()\"\n      [class.is-open]=\"isHourOpen()\"\n      [class.has-value]=\"!isHourPlaceholderVisible()\"\n      [class.is-disabled]=\"isTimeDisabled()\"\n    >\n      <div class=\"c-native-select__control\" (click)=\"toggleHourDropdown($event)\">\n        @if (selectedHour() !== null && selectedHour() !== undefined) {\n          <span class=\"c-native-select__single-value\">{{ selectedHour()!.toString().padStart(2, '0') }}</span>\n        } @else {\n          <span class=\"c-native-select__placeholder\">HH</span>\n        }\n      </div>\n      <span\n        class=\"c-entry-input__addon icon-select-arrow\"\n        [class.is-flipped]=\"isHourOpen()\"\n        (click)=\"toggleHourDropdown($event)\"\n      ></span>\n      @if (isHourOpen()) {\n        <div class=\"c-native-select__dropdown\">\n          <div class=\"c-native-select__options\">\n            @for (option of hoursOptions(); track option.value; let i = $index) {\n              <div\n                class=\"c-native-select__option\"\n                [class.is-selected]=\"selectedHour() === option.value\"\n                [class.is-highlighted]=\"highlightedHourIndex() === i\"\n                (click)=\"selectHourOption(option.value, $event)\"\n                (mouseenter)=\"highlightedHourIndex.set(i)\"\n              >\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--native-select\"\n      [class.is-placeholder]=\"isMinutePlaceholderVisible()\"\n      [class.is-open]=\"isMinuteOpen()\"\n      [class.has-value]=\"!isMinutePlaceholderVisible()\"\n      [class.is-disabled]=\"isTimeDisabled()\"\n    >\n      <div class=\"c-native-select__control\" (click)=\"toggleMinuteDropdown($event)\">\n        @if (selectedMinute() !== null && selectedMinute() !== undefined) {\n          <span class=\"c-native-select__single-value\">{{ selectedMinute()!.toString().padStart(2, '0') }}</span>\n        } @else {\n          <span class=\"c-native-select__placeholder\">MM</span>\n        }\n      </div>\n      <span\n        class=\"c-entry-input__addon icon-select-arrow\"\n        [class.is-flipped]=\"isMinuteOpen()\"\n        (click)=\"toggleMinuteDropdown($event)\"\n      ></span>\n      @if (isMinuteOpen()) {\n        <div class=\"c-native-select__dropdown\">\n          <div class=\"c-native-select__options\">\n            @for (option of minutesOptions(); track option.value; let i = $index) {\n              <div\n                class=\"c-native-select__option\"\n                [class.is-selected]=\"selectedMinute() === option.value\"\n                [class.is-highlighted]=\"highlightedMinuteIndex() === i\"\n                (click)=\"selectMinuteOption(option.value, $event)\"\n                (mouseenter)=\"highlightedMinuteIndex.set(i)\"\n              >\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onDateInputBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--native-select\"\n      [class.is-placeholder]=\"isHourPlaceholderVisible()\"\n      [class.is-open]=\"isHourOpen()\"\n      [class.has-value]=\"!isHourPlaceholderVisible()\"\n      [class.is-disabled]=\"isTimeDisabled()\"\n    >\n      <div class=\"c-native-select__control\" (click)=\"toggleHourDropdown($event)\">\n        @if (selectedHour() !== null && selectedHour() !== undefined) {\n          <span class=\"c-native-select__single-value\">{{ selectedHour()!.toString().padStart(2, '0') }}</span>\n        } @else {\n          <span class=\"c-native-select__placeholder\">HH</span>\n        }\n      </div>\n      <span\n        class=\"c-entry-input__addon icon-select-arrow\"\n        [class.is-flipped]=\"isHourOpen()\"\n        (click)=\"toggleHourDropdown($event)\"\n      ></span>\n      @if (isHourOpen()) {\n        <div class=\"c-native-select__dropdown\">\n          <div class=\"c-native-select__options\">\n            @for (option of hoursOptions(); track option.value; let i = $index) {\n              <div\n                class=\"c-native-select__option\"\n                [class.is-selected]=\"selectedHour() === option.value\"\n                [class.is-highlighted]=\"highlightedHourIndex() === i\"\n                (click)=\"selectHourOption(option.value, $event)\"\n                (mouseenter)=\"highlightedHourIndex.set(i)\"\n              >\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--native-select\"\n      [class.is-placeholder]=\"isMinutePlaceholderVisible()\"\n      [class.is-open]=\"isMinuteOpen()\"\n      [class.has-value]=\"!isMinutePlaceholderVisible()\"\n      [class.is-disabled]=\"isTimeDisabled()\"\n    >\n      <div class=\"c-native-select__control\" (click)=\"toggleMinuteDropdown($event)\">\n        @if (selectedMinute() !== null && selectedMinute() !== undefined) {\n          <span class=\"c-native-select__single-value\">{{ selectedMinute()!.toString().padStart(2, '0') }}</span>\n        } @else {\n          <span class=\"c-native-select__placeholder\">MM</span>\n        }\n      </div>\n      <span\n        class=\"c-entry-input__addon icon-select-arrow\"\n        [class.is-flipped]=\"isMinuteOpen()\"\n        (click)=\"toggleMinuteDropdown($event)\"\n      ></span>\n      @if (isMinuteOpen()) {\n        <div class=\"c-native-select__dropdown\">\n          <div class=\"c-native-select__options\">\n            @for (option of minutesOptions(); track option.value; let i = $index) {\n              <div\n                class=\"c-native-select__option\"\n                [class.is-selected]=\"selectedMinute() === option.value\"\n                [class.is-highlighted]=\"highlightedMinuteIndex() === i\"\n                (click)=\"selectMinuteOption(option.value, $event)\"\n                (mouseenter)=\"highlightedMinuteIndex.set(i)\"\n              >\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 
 var DocumentPayloadMode;
 (function (DocumentPayloadMode) {
@@ -17674,12 +17727,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.20.27',
+    full: '2.20.28',
     major: 2,
     minor: 20,
-    patch: 27,
-    timestamp: '2026-02-26T17:19:42.630Z',
-    buildDate: '26/2/2026'
+    patch: 28,
+    timestamp: '2026-02-27T12:42:41.128Z',
+    buildDate: '27/2/2026'
 };
 
 class MainNavComponent {