@solcre-org/core-ui 2.20.28 → 2.20.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1077,6 +1077,8 @@ class DatetimeFieldComponent {
|
|
|
1077
1077
|
selectedDate = signal(null);
|
|
1078
1078
|
selectedHour = signal(null);
|
|
1079
1079
|
selectedMinute = signal(null);
|
|
1080
|
+
inputDateValue = signal('');
|
|
1081
|
+
isDateInputFocused = signal(false);
|
|
1080
1082
|
isHourOpen = signal(false);
|
|
1081
1083
|
isMinuteOpen = signal(false);
|
|
1082
1084
|
highlightedHourIndex = signal(-1);
|
|
@@ -1181,11 +1183,17 @@ class DatetimeFieldComponent {
|
|
|
1181
1183
|
constructor() {
|
|
1182
1184
|
effect(() => {
|
|
1183
1185
|
const newValue = this.value();
|
|
1186
|
+
if (this.isDateInputFocused())
|
|
1187
|
+
return;
|
|
1184
1188
|
if (newValue && !isNaN(newValue.getTime())) {
|
|
1185
1189
|
const newDate = new Date(newValue);
|
|
1186
1190
|
this.selectedDate.set(newDate);
|
|
1187
1191
|
this.selectedHour.set(newDate.getHours());
|
|
1188
1192
|
this.selectedMinute.set(this.roundToNearestInterval(newDate).getMinutes());
|
|
1193
|
+
this.inputDateValue.set(this.buildDateString(newDate));
|
|
1194
|
+
}
|
|
1195
|
+
else {
|
|
1196
|
+
this.inputDateValue.set('');
|
|
1189
1197
|
}
|
|
1190
1198
|
});
|
|
1191
1199
|
effect(() => {
|
|
@@ -1219,6 +1227,7 @@ class DatetimeFieldComponent {
|
|
|
1219
1227
|
this.selectedHour.set(dateValue.getHours());
|
|
1220
1228
|
const roundedMinute = this.roundToNearestInterval(dateValue).getMinutes();
|
|
1221
1229
|
this.selectedMinute.set(roundedMinute);
|
|
1230
|
+
this.inputDateValue.set(this.buildDateString(dateValue));
|
|
1222
1231
|
}
|
|
1223
1232
|
this.valueChange.emit(newValue);
|
|
1224
1233
|
}, 0);
|
|
@@ -1235,6 +1244,8 @@ class DatetimeFieldComponent {
|
|
|
1235
1244
|
}
|
|
1236
1245
|
}
|
|
1237
1246
|
initializeValues() {
|
|
1247
|
+
if (this.isDateInputFocused())
|
|
1248
|
+
return;
|
|
1238
1249
|
const date = this.value();
|
|
1239
1250
|
if (date && !isNaN(date.getTime())) {
|
|
1240
1251
|
const newDate = new Date(date);
|
|
@@ -1242,30 +1253,35 @@ class DatetimeFieldComponent {
|
|
|
1242
1253
|
this.selectedHour.set(newDate.getHours());
|
|
1243
1254
|
const roundedMinute = this.roundToNearestInterval(newDate).getMinutes();
|
|
1244
1255
|
this.selectedMinute.set(roundedMinute);
|
|
1256
|
+
this.inputDateValue.set(this.buildDateString(newDate));
|
|
1245
1257
|
}
|
|
1246
1258
|
else {
|
|
1247
1259
|
this.selectedDate.set(null);
|
|
1248
1260
|
this.selectedHour.set(null);
|
|
1249
1261
|
this.selectedMinute.set(null);
|
|
1262
|
+
this.inputDateValue.set('');
|
|
1250
1263
|
}
|
|
1251
1264
|
}
|
|
1252
1265
|
onDateChange(event) {
|
|
1253
1266
|
const input = event.target;
|
|
1254
|
-
|
|
1255
|
-
|
|
1267
|
+
if (!input.value) {
|
|
1268
|
+
return;
|
|
1269
|
+
}
|
|
1270
|
+
const newDate = new Date(input.value + 'T00:00:00');
|
|
1271
|
+
if (!isNaN(newDate.getTime())) {
|
|
1256
1272
|
const currentHour = this.selectedHour() ?? 0;
|
|
1257
1273
|
const currentMinute = this.selectedMinute() ?? 0;
|
|
1258
|
-
this.selectedHour.set(currentHour);
|
|
1259
|
-
this.selectedMinute.set(currentMinute);
|
|
1260
1274
|
newDate.setHours(currentHour);
|
|
1261
1275
|
newDate.setMinutes(currentMinute);
|
|
1262
1276
|
newDate.setSeconds(0);
|
|
1263
1277
|
newDate.setMilliseconds(0);
|
|
1264
1278
|
this.selectedDate.set(newDate);
|
|
1279
|
+
this.inputDateValue.set(input.value);
|
|
1265
1280
|
this.emitValue();
|
|
1266
1281
|
}
|
|
1267
1282
|
else {
|
|
1268
1283
|
this.selectedDate.set(null);
|
|
1284
|
+
this.inputDateValue.set('');
|
|
1269
1285
|
this.emitValue();
|
|
1270
1286
|
}
|
|
1271
1287
|
}
|
|
@@ -1324,6 +1340,12 @@ class DatetimeFieldComponent {
|
|
|
1324
1340
|
newDate.setMilliseconds(0);
|
|
1325
1341
|
this.valueChange.emit(newDate);
|
|
1326
1342
|
}
|
|
1343
|
+
buildDateString(date) {
|
|
1344
|
+
const year = date.getFullYear().toString().padStart(4, '0');
|
|
1345
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
1346
|
+
const day = date.getDate().toString().padStart(2, '0');
|
|
1347
|
+
return `${year}-${month}-${day}`;
|
|
1348
|
+
}
|
|
1327
1349
|
roundToNearestInterval(date) {
|
|
1328
1350
|
const interval = this.field()?.timeInterval;
|
|
1329
1351
|
if (!interval)
|
|
@@ -1357,6 +1379,7 @@ class DatetimeFieldComponent {
|
|
|
1357
1379
|
this.onBlurEvent.emit(this.field().key);
|
|
1358
1380
|
}
|
|
1359
1381
|
onDateInputBlur() {
|
|
1382
|
+
this.isDateInputFocused.set(false);
|
|
1360
1383
|
setTimeout(() => {
|
|
1361
1384
|
if (!this.el.nativeElement.contains(document.activeElement)) {
|
|
1362
1385
|
this.onBlur();
|
|
@@ -1381,11 +1404,11 @@ class DatetimeFieldComponent {
|
|
|
1381
1404
|
}
|
|
1382
1405
|
}
|
|
1383
1406
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1384
|
-
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]=\"
|
|
1407
|
+
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]=\"inputDateValue()\"\n [disabled]=\"isDisabled()\"\n (focus)=\"isDateInputFocused.set(true)\"\n (change)=\"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"] }] });
|
|
1385
1408
|
}
|
|
1386
1409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
|
|
1387
1410
|
type: Component,
|
|
1388
|
-
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]=\"
|
|
1411
|
+
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]=\"inputDateValue()\"\n [disabled]=\"isDisabled()\"\n (focus)=\"isDateInputFocused.set(true)\"\n (change)=\"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" }]
|
|
1389
1412
|
}], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
|
|
1390
1413
|
type: HostListener,
|
|
1391
1414
|
args: ['document:click', ['$event']]
|
|
@@ -17727,11 +17750,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
17727
17750
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
17728
17751
|
// No edites manualmente este archivo
|
|
17729
17752
|
const VERSION = {
|
|
17730
|
-
full: '2.20.
|
|
17753
|
+
full: '2.20.29',
|
|
17731
17754
|
major: 2,
|
|
17732
17755
|
minor: 20,
|
|
17733
|
-
patch:
|
|
17734
|
-
timestamp: '2026-02-
|
|
17756
|
+
patch: 29,
|
|
17757
|
+
timestamp: '2026-02-27T15:55:43.722Z',
|
|
17735
17758
|
buildDate: '27/2/2026'
|
|
17736
17759
|
};
|
|
17737
17760
|
|