@solcre-org/core-ui 2.11.23 → 2.11.25

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.
@@ -191,6 +191,7 @@
191
191
  ):is([disabled],.is-disabled){
192
192
  opacity: 0.4;
193
193
  cursor: not-allowed;
194
+ pointer-events: none;
194
195
  }
195
196
  .c-entry-input:is([disabled],.is-disabled,[readonly],.is-readonly) :is( a, button ){
196
197
  pointer-events: none;
@@ -1094,12 +1094,23 @@ var NumberFieldConfigType;
1094
1094
  class NumberFieldComponent extends BaseFieldComponent {
1095
1095
  elementRef;
1096
1096
  NumberFieldConfigType = NumberFieldConfigType;
1097
- controls = [];
1097
+ holdInterval = null;
1098
+ holdTimeout = null;
1099
+ currentHoldDirection = 0;
1100
+ holdSpeed = 300;
1101
+ minHoldSpeed = 50;
1102
+ accelerationRate = 0.9;
1103
+ isHolding = false;
1104
+ wasHeld = false;
1098
1105
  fieldType = computed(() => this.field().numberConfig?.type || NumberFieldConfigType.DEFAULT);
1099
1106
  iconClass = computed(() => {
1100
1107
  const numberField = this.field();
1101
1108
  return this.fieldType() === NumberFieldConfigType.WITH_ICON ? numberField.numberConfig?.icon : null;
1102
1109
  });
1110
+ getDisableInput() {
1111
+ const numberField = this.field();
1112
+ return numberField.numberConfig?.disableInput ?? null;
1113
+ }
1103
1114
  getCharsWidth() {
1104
1115
  const numberField = this.field();
1105
1116
  const chars = numberField.numberConfig?.chars;
@@ -1144,55 +1155,90 @@ class NumberFieldComponent extends BaseFieldComponent {
1144
1155
  }
1145
1156
  });
1146
1157
  }
1147
- ngAfterViewInit() {
1148
- this.initializeControls();
1149
- }
1150
1158
  ngOnDestroy() {
1151
- this.removeControlListeners();
1152
- }
1153
- initializeControls() {
1154
- const formGroup = this.elementRef.nativeElement.closest('.c-form__group');
1155
- if (formGroup) {
1156
- this.controls = Array.from(formGroup.querySelectorAll('.js-input-number-control'));
1157
- this.controls.forEach(control => {
1158
- control.addEventListener('click', this.handleControlClick.bind(this));
1159
- });
1160
- this.updateControlsState();
1161
- }
1159
+ this.stopHold();
1162
1160
  }
1163
- removeControlListeners() {
1164
- this.controls.forEach(control => {
1165
- control.removeEventListener('click', this.handleControlClick.bind(this));
1166
- });
1161
+ handleMouseDown(event, direction) {
1162
+ event.preventDefault();
1163
+ if (this.isDisabled())
1164
+ return;
1165
+ this.isHolding = true;
1166
+ this.wasHeld = false;
1167
+ this.startHold(direction);
1167
1168
  }
1168
- handleControlClick(event) {
1169
- const button = event.currentTarget;
1170
- const control = button.getAttribute('data-control');
1171
- if (control) {
1172
- const change = parseInt(control);
1173
- if (!isNaN(change)) {
1174
- this.onControlClick(change);
1175
- }
1176
- }
1169
+ handleMouseUp(event) {
1170
+ this.isHolding = false;
1171
+ this.stopHold();
1172
+ }
1173
+ handleTouchStart(event, direction) {
1174
+ event.preventDefault();
1175
+ if (this.isDisabled())
1176
+ return;
1177
+ this.isHolding = true;
1178
+ this.wasHeld = false;
1179
+ this.startHold(direction);
1180
+ }
1181
+ handleTouchEnd(event) {
1182
+ this.isHolding = false;
1183
+ this.stopHold();
1177
1184
  }
1178
1185
  onControlClick(change) {
1186
+ if (this.wasHeld) {
1187
+ this.wasHeld = false;
1188
+ return;
1189
+ }
1190
+ this.executeIncrement(change);
1191
+ }
1192
+ executeIncrement(change) {
1179
1193
  if (this.isReadonly())
1180
1194
  return;
1181
1195
  const currentValue = Number(this.formControl().value) || 0;
1182
1196
  const newValue = Math.max(0, currentValue + change);
1183
1197
  this.formControl().setValue(newValue.toString());
1184
1198
  }
1185
- updateControlsState() {
1186
- const currentValue = Number(this.formControl().value) || 0;
1187
- this.controls.forEach(control => {
1188
- const controlValue = control.getAttribute('data-control');
1189
- if (controlValue) {
1190
- const changeValue = parseInt(controlValue);
1191
- if (!isNaN(changeValue) && changeValue < 0) {
1192
- control.disabled = currentValue <= 0;
1199
+ startHold(direction) {
1200
+ if (this.isReadonly())
1201
+ return;
1202
+ this.currentHoldDirection = direction;
1203
+ this.holdSpeed = 300;
1204
+ this.holdTimeout = setTimeout(() => {
1205
+ this.wasHeld = true;
1206
+ this.executeIncrement(this.currentHoldDirection);
1207
+ this.holdInterval = setInterval(() => {
1208
+ this.executeIncrement(this.currentHoldDirection);
1209
+ if (this.holdSpeed > this.minHoldSpeed) {
1210
+ this.holdSpeed = Math.max(this.minHoldSpeed, this.holdSpeed * this.accelerationRate);
1211
+ this.restartInterval();
1193
1212
  }
1194
- }
1195
- });
1213
+ }, this.holdSpeed);
1214
+ }, 500);
1215
+ }
1216
+ stopHold() {
1217
+ if (this.holdTimeout) {
1218
+ clearTimeout(this.holdTimeout);
1219
+ this.holdTimeout = null;
1220
+ }
1221
+ if (this.holdInterval) {
1222
+ clearInterval(this.holdInterval);
1223
+ this.holdInterval = null;
1224
+ }
1225
+ this.currentHoldDirection = 0;
1226
+ this.holdSpeed = 300;
1227
+ setTimeout(() => {
1228
+ this.wasHeld = false;
1229
+ }, 100);
1230
+ }
1231
+ restartInterval() {
1232
+ if (this.holdInterval) {
1233
+ clearInterval(this.holdInterval);
1234
+ this.holdInterval = setInterval(() => {
1235
+ this.executeIncrement(this.currentHoldDirection);
1236
+ if (this.holdSpeed > this.minHoldSpeed) {
1237
+ this.holdSpeed = Math.max(this.minHoldSpeed, this.holdSpeed * this.accelerationRate);
1238
+ this.restartInterval();
1239
+ }
1240
+ }, this.holdSpeed);
1241
+ }
1196
1242
  }
1197
1243
  onValueChange(newValue) {
1198
1244
  const parsedValue = Number(newValue);
@@ -1202,17 +1248,16 @@ class NumberFieldComponent extends BaseFieldComponent {
1202
1248
  }
1203
1249
  const validValue = Math.max(0, parsedValue);
1204
1250
  super.onValueChange(validValue);
1205
- this.updateControlsState();
1206
1251
  }
1207
1252
  onBlurInput() {
1208
1253
  this.onBlur();
1209
1254
  }
1210
1255
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumberFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1211
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumberFieldComponent, isStandalone: true, selector: "core-number-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n data-control=\"-1\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n data-control=\"1\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n data-control=\"1\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n data-control=\"-1\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
1256
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumberFieldComponent, isStandalone: true, selector: "core-number-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled() || getDisableInput()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
1212
1257
  }
1213
1258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumberFieldComponent, decorators: [{
1214
1259
  type: Component,
1215
- args: [{ selector: 'core-number-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n data-control=\"-1\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n data-control=\"1\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n data-control=\"1\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n data-control=\"-1\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n" }]
1260
+ args: [{ selector: 'core-number-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled() || getDisableInput()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n" }]
1216
1261
  }], ctorParameters: () => [{ type: i0.ElementRef }] });
1217
1262
 
1218
1263
  class PasswordFieldComponent extends BaseFieldComponent {
@@ -10224,11 +10269,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
10224
10269
  // Este archivo es generado automáticamente por scripts/update-version.js
10225
10270
  // No edites manualmente este archivo
10226
10271
  const VERSION = {
10227
- full: '2.11.23',
10272
+ full: '2.11.25',
10228
10273
  major: 2,
10229
10274
  minor: 11,
10230
- patch: 23,
10231
- timestamp: '2025-08-28T12:25:25.950Z',
10275
+ patch: 25,
10276
+ timestamp: '2025-08-28T15:07:48.558Z',
10232
10277
  buildDate: '28/8/2025'
10233
10278
  };
10234
10279
 
@@ -11219,11 +11264,11 @@ class GenericStepsComponent {
11219
11264
  .join('; ');
11220
11265
  }
11221
11266
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11222
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericStepsComponent, isStandalone: true, selector: "core-generic-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, useService: { classPropertyName: "useService", publicName: "useService", isSignal: true, isRequired: false, transformFunction: null }, instanceId: { classPropertyName: "instanceId", publicName: "instanceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick", stepChange: "stepChange", serviceStepChange: "serviceStepChange" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n @for (step of currentSteps(); track step.id; let i = $index) {\n <li class=\"c-steps__step\">\n <button \n type=\"button\"\n class=\"c-steps__item\"\n [class]=\"getStepClasses(step)\"\n [disabled]=\"step.disabled\"\n [title]=\"step.tooltip || step.title\"\n (click)=\"onStepClick(step, i, $event)\"\n [attr.data-step-id]=\"step.id\">\n \n <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n } @else {\n @if (shouldTranslateContent(step)) {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</span>\n } @else {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n }\n }\n </span>\n \n @if (config().showLabels !== false) {\n <span class=\"c-steps__text\">{{ step.title }}</span>\n }\n </button>\n \n @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (activeStep()) {\n <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n <ng-content></ng-content>\n </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
11267
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericStepsComponent, isStandalone: true, selector: "core-generic-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, useService: { classPropertyName: "useService", publicName: "useService", isSignal: true, isRequired: false, transformFunction: null }, instanceId: { classPropertyName: "instanceId", publicName: "instanceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick", stepChange: "stepChange", serviceStepChange: "serviceStepChange" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n @for (step of currentSteps(); track step.id; let i = $index) {\n <li class=\"c-steps__step\">\n <button \n type=\"button\"\n class=\"c-steps__item\"\n [class]=\"getStepClasses(step)\"\n [disabled]=\"step.disabled\"\n [title]=\"step.tooltip || step.title\"\n (click)=\"onStepClick(step, i, $event)\"\n [attr.data-step-id]=\"step.id\">\n \n <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n } @else {\n @if (shouldTranslateContent(step)) {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</span>\n } @else {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n }\n }\n </span>\n \n @if (config().showLabels !== false) {\n <span class=\"c-steps__text\">{{ step.title | translate }}</span>\n }\n </button>\n \n @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (activeStep()) {\n <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n <ng-content></ng-content>\n </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
11223
11268
  }
11224
11269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericStepsComponent, decorators: [{
11225
11270
  type: Component,
11226
- args: [{ selector: 'core-generic-steps', standalone: true, imports: [CommonModule, IconCompatPipe, TranslateModule], hostDirectives: [CoreHostDirective], template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n @for (step of currentSteps(); track step.id; let i = $index) {\n <li class=\"c-steps__step\">\n <button \n type=\"button\"\n class=\"c-steps__item\"\n [class]=\"getStepClasses(step)\"\n [disabled]=\"step.disabled\"\n [title]=\"step.tooltip || step.title\"\n (click)=\"onStepClick(step, i, $event)\"\n [attr.data-step-id]=\"step.id\">\n \n <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n } @else {\n @if (shouldTranslateContent(step)) {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</span>\n } @else {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n }\n }\n </span>\n \n @if (config().showLabels !== false) {\n <span class=\"c-steps__text\">{{ step.title }}</span>\n }\n </button>\n \n @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (activeStep()) {\n <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n <ng-content></ng-content>\n </div>\n}" }]
11271
+ args: [{ selector: 'core-generic-steps', standalone: true, imports: [CommonModule, IconCompatPipe, TranslateModule], hostDirectives: [CoreHostDirective], template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n @for (step of currentSteps(); track step.id; let i = $index) {\n <li class=\"c-steps__step\">\n <button \n type=\"button\"\n class=\"c-steps__item\"\n [class]=\"getStepClasses(step)\"\n [disabled]=\"step.disabled\"\n [title]=\"step.tooltip || step.title\"\n (click)=\"onStepClick(step, i, $event)\"\n [attr.data-step-id]=\"step.id\">\n \n <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n } @else {\n @if (shouldTranslateContent(step)) {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getTranslatedStepContent(step) | translate }}</span>\n } @else {\n <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n }\n }\n </span>\n \n @if (config().showLabels !== false) {\n <span class=\"c-steps__text\">{{ step.title | translate }}</span>\n }\n </button>\n \n @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (activeStep()) {\n <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n <ng-content></ng-content>\n </div>\n}" }]
11227
11272
  }], ctorParameters: () => [] });
11228
11273
 
11229
11274
  var RatingSize;