bit-ng-library 21.0.0 → 21.0.2

package/fesm2022/bit-ng-library.mjs

@@ -1,4 +1,4 @@
-import { Subject, BehaviorSubject, lastValueFrom, of, ReplaySubject, combineLatest, forkJoin, throwError } from 'rxjs';
+import { Subject, BehaviorSubject, lastValueFrom, of, ReplaySubject, combineLatest, forkJoin, switchMap, startWith, throwError } from 'rxjs';
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, computed, DestroyRef, Directive, input, ChangeDetectionStrategy, Component, Pipe, model, output, linkedSignal, ElementRef, Renderer2, HostListener, viewChild, ChangeDetectorRef, forwardRef, contentChild, TemplateRef, effect, NgModule } from '@angular/core';
 import { map, mergeMap, tap, takeUntil, filter, concatMap, take, catchError, finalize } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import moment from 'moment';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { saveAs } from 'file-saver';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -414,6 +414,9 @@ class AyudaService {
             console.warn(`No existe ayuda para la clave [${key}]`);
         }
     }
+    resetAyuda() {
+        this.mostrar.set(null);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AyudaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AyudaService, providedIn: "root" }); }
 }
@@ -2831,6 +2834,7 @@ class BitHelpComponent {
     }
     /** Oculta el modal con los avisos */
     hideAyuda() {
+        this.ayudaService.resetAyuda();
         this.ayuda.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3726,10 +3730,34 @@ class BitGeneralComponent extends BaseComponent {
             const testid = this.testid();
             return testid ? testid : this.nombre();
         }, ...(ngDevMode ? [{ debugName: "dataTestId" }] : /* istanbul ignore next */ []));
-    }
-    get obligatorio() {
-        let control = this.control();
-        return this.forceObligatorio() || (control && control.errors && control.errors["required"]);
+        /**
+         * Contador que se incrementa cada vez que el FormControl asociado cambia su valor, validadores o validez.
+         * Se usa como dependencia reactiva de la señal `obligatorio` para que ésta se recalcule bajo OnPush / zoneless,
+         * incluso cuando el consumidor llama a `updateValueAndValidity({ emitEvent: false })` (en cuyo caso
+         * `statusChanges` / `valueChanges` no se emiten y un enfoque basado en observables no funcionaría).
+         *
+         * El mecanismo intercepta el método `updateValueAndValidity` del propio control: dado que `setValue`,
+         * `patchValue`, `reset` y los cambios de validadores requieren una llamada a `updateValueAndValidity`
+         * para surtir efecto, este punto único cubre todos los escenarios.
+         */
+        this.controlEvents = toSignal(toObservable(this.control).pipe(switchMap((c) => (c ? c.events.pipe(startWith(null)) : of(null)))), {
+            initialValue: null
+        });
+        /**
+         * Indica si el campo es obligatorio. Es una señal computed que reacciona a:
+         *  - cambios en el input `forceObligatorio`
+         *  - cambios en el input `control`
+         *  - cambios de valor, validadores o validez del propio FormControl (vía `controlEvents`)
+         */
+        /*get obligatorio(): boolean {
+          let control = this.control();
+          return this.forceObligatorio() || (control && control.errors && control.errors["required"]);
+        }*/
+        this.obligatorio = computed(() => {
+            this.controlEvents(); // dependencia reactiva
+            const c = this.control();
+            return this.forceObligatorio() || !!c?.errors?.["required"];
+        }, ...(ngDevMode ? [{ debugName: "obligatorio" }] : /* istanbul ignore next */ []));
     }
     showAyuda() {
         this.ayudaService.mostrarAyuda(this.ayuda());
@@ -3817,19 +3845,23 @@ class BitTextComponent extends BitCustomComponent {
         this.changeComponentValue(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: BitTextComponent, isStandalone: false, selector: "bit-text", providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: BitTextComponent, isStandalone: false, selector: "bit-text", providers: [
+            {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTextComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitTextComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: "bit-text", providers: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: "bit-text", providers: [
+                        {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTextComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }
+                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <input\n    pInputText\n    type=\"text\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }] });
 
 class BitTextAreaComponent extends BitCustomComponent {
@@ -3867,7 +3899,7 @@ class BitTextAreaComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTextAreaComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <pre class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</pre>\n}\n@if (!readOnly()) {\n  <textarea\n    pInputTextarea\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    class=\"{{ estilo() }}\"\n    [rows]=\"filas()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n  ></textarea>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <pre class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</pre>\n}\n@if (!readOnly()) {\n  <textarea\n    pInputTextarea\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    class=\"{{ estilo() }}\"\n    [rows]=\"filas()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n  ></textarea>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitTextAreaComponent, decorators: [{
             type: Component,
@@ -3875,7 +3907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTextAreaComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <pre class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</pre>\n}\n@if (!readOnly()) {\n  <textarea\n    pInputTextarea\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    class=\"{{ estilo() }}\"\n    [rows]=\"filas()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n  ></textarea>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <pre class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</pre>\n}\n@if (!readOnly()) {\n  <textarea\n    pInputTextarea\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    autocomplete=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    class=\"{{ estilo() }}\"\n    [rows]=\"filas()\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n  ></textarea>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { filas: [{ type: i0.Input, args: [{ isSignal: true, alias: "filas", required: false }] }] } });
 
 /** Clase general para componentes personalizados de tipo Fecha como puede ser BitDate, BitTime y BitDateTime */
@@ -4011,7 +4043,7 @@ class BitDateComponent extends BitCalendarComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDateComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    [readonlyInput]=\"calendarReadOnlyInput()\"\n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    yearRange=\"2000:2050\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    [readonlyInput]=\"calendarReadOnlyInput()\"\n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    yearRange=\"2000:2050\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitDateComponent, decorators: [{
             type: Component,
@@ -4019,7 +4051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitDateComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    [readonlyInput]=\"calendarReadOnlyInput()\"\n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    yearRange=\"2000:2050\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    [readonlyInput]=\"calendarReadOnlyInput()\"\n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    yearRange=\"2000:2050\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 class BitTimeComponent extends BitCalendarComponent {
@@ -4063,7 +4095,7 @@ class BitTimeComponent extends BitCalendarComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTimeComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"HH:mm\"\n    [timeOnly]=\"true\"\n    placeholder=\"{{ placeholder() }}\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    (onTodayClick)=\"_onTodayClick($event)\"\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"HH:mm\"\n    [timeOnly]=\"true\"\n    placeholder=\"{{ placeholder() }}\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    (onTodayClick)=\"_onTodayClick($event)\"\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitTimeComponent, decorators: [{
             type: Component,
@@ -4071,7 +4103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTimeComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"HH:mm\"\n    [timeOnly]=\"true\"\n    placeholder=\"{{ placeholder() }}\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    (onTodayClick)=\"_onTodayClick($event)\"\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"HH:mm\"\n    [timeOnly]=\"true\"\n    placeholder=\"{{ placeholder() }}\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    (onTodayClick)=\"_onTodayClick($event)\"\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 class BitDateTimeComponent extends BitCalendarComponent {
@@ -4115,7 +4147,7 @@ class BitDateTimeComponent extends BitCalendarComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDateTimeComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"    \n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    yearRange=\"2000:2050\"\n    [showTime]=\"true\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"    \n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    yearRange=\"2000:2050\"\n    [showTime]=\"true\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitDateTimeComponent, decorators: [{
             type: Component,
@@ -4123,7 +4155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitDateTimeComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"    \n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    yearRange=\"2000:2050\"\n    [showTime]=\"true\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-datepicker class=\"FormControl\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    autofocus=\"false\"\n    [disabled]=\"isDisabled()\"\n    [(ngModel)]=\"value\"\n    dateFormat=\"dd/mm/yy\"\n    placeholder=\"{{ placeholder() }}\"    \n    [minDate]=\"fechaMinima()\"\n    [maxDate]=\"fechaMaxima()\"\n    [showOtherMonths]=\"true\"\n    [selectOtherMonths]=\"true\"\n    yearRange=\"2000:2050\"\n    [showTime]=\"true\"\n    [firstDayOfWeek]=\"1\"\n    showButtonBar={{showButtonBar()}}\n    [appendTo]=\"appendTo()\"\n    (onSelect)=\"_onSelect(value)\"\n    (onClear)=\"_onClear()\"\n    (onClearClick)=\"_onClear()\"\n    (onFocus)=\"_onFocus()\"\n    (onBlur)=\"_onBlur($event)\"\n    (onInput)=\"_onInput($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (!readOnly()) {\n  <span class=\"glyphicon glyphicon-calendar icono-input\"></span>\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 class BitCheckBoxComponent extends BitCustomComponent {
@@ -4146,7 +4178,7 @@ class BitCheckBoxComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitCheckBoxComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-checkbox class=\"{{ estilo() }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n\n@if (ayuda()) {\n  <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n}\n\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-checkbox class=\"{{ estilo() }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n\n@if (ayuda()) {\n  <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n}\n\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitCheckBoxComponent, decorators: [{
             type: Component,
@@ -4154,7 +4186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitCheckBoxComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-checkbox class=\"{{ estilo() }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n\n@if (ayuda()) {\n  <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n}\n\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-checkbox class=\"{{ estilo() }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n\n@if (ayuda()) {\n  <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n}\n\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }] });
 
 class BitSwitchComponent extends BitCustomComponent {
@@ -4177,7 +4209,7 @@ class BitSwitchComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitSwitchComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitSwitchComponent, decorators: [{
             type: Component,
@@ -4185,7 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitSwitchComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }] });
 
 class BitAutoCompleteComponent extends BitCustomComponent {
@@ -4333,7 +4365,7 @@ class BitAutoCompleteComponent extends BitCustomComponent {
                 useExisting: forwardRef(() => BitAutoCompleteComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n<label for=\"{{ nombre() }}\">\n  <ng-content />&nbsp; @if (obligatorio) {\n  <span class=\"obligatorio fa fa-asterisk\"></span>\n  }&nbsp;&nbsp; @if (ayuda()) {\n  <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n  }\n</label>\n} @if (readOnly()) {\n<p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n} @if (!readOnly()) {\n<!-- Si usamos un template personalizado, hay que indicar el optionLabel para que sepa cu\u00E1l es el campo a mostrar al seleccionar un elemento -->\n<p-autoComplete\n  fluid\n  [(ngModel)]=\"value\"\n  id=\"{{ nombre() }}\"\n  name=\"{{ nombre() }}\"\n  ariaLabel=\"{{ nombre() }}\"\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [delay]=\"400\"\n  [suggestions]=\"suggestions_mapped()\"\n  [multiple]=\"multiple()\"\n  [inputStyleClass]=\"inputStyleClass()\"\n  optionLabel=\"{{ customTemplate() ? this.suggestionField() : '' }}\"\n  appendTo=\"body\"\n  (completeMethod)=\"search($event)\"\n  (onSelect)=\"_onSelect($event)\"\n  (onClear)=\"_onClear()\"\n  (onBlur)=\"_onBlur()\"\n  (onFocus)=\"_onFocus()\"\n  attr.data-testid=\"{{ dataTestId() }}\"\n>\n  @if (customTemplate() && itemTemplate()) {\n  <ng-template pTemplate=\"item\" let-item>\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\n  </ng-template>\n  }\n</p-autoComplete>\n} @if (control() != null) {\n<control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$6.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n<label for=\"{{ nombre() }}\">\n  <ng-content />&nbsp; @if (obligatorio()) {\n  <span class=\"obligatorio fa fa-asterisk\"></span>\n  }&nbsp;&nbsp; @if (ayuda()) {\n  <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n  }\n</label>\n} @if (readOnly()) {\n<p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n} @if (!readOnly()) {\n<!-- Si usamos un template personalizado, hay que indicar el optionLabel para que sepa cu\u00E1l es el campo a mostrar al seleccionar un elemento -->\n<p-autoComplete\n  fluid\n  [(ngModel)]=\"value\"\n  id=\"{{ nombre() }}\"\n  name=\"{{ nombre() }}\"\n  ariaLabel=\"{{ nombre() }}\"\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [delay]=\"400\"\n  [suggestions]=\"suggestions_mapped()\"\n  [multiple]=\"multiple()\"\n  [inputStyleClass]=\"inputStyleClass()\"\n  optionLabel=\"{{ customTemplate() ? this.suggestionField() : '' }}\"\n  appendTo=\"body\"\n  (completeMethod)=\"search($event)\"\n  (onSelect)=\"_onSelect($event)\"\n  (onClear)=\"_onClear()\"\n  (onBlur)=\"_onBlur()\"\n  (onFocus)=\"_onFocus()\"\n  attr.data-testid=\"{{ dataTestId() }}\"\n>\n  @if (customTemplate() && itemTemplate()) {\n  <ng-template pTemplate=\"item\" let-item>\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\n  </ng-template>\n  }\n</p-autoComplete>\n} @if (control() != null) {\n<control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$6.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitAutoCompleteComponent, decorators: [{
             type: Component,
@@ -4343,7 +4375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             useExisting: forwardRef(() => BitAutoCompleteComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@if (!hideLabel()) {\n<label for=\"{{ nombre() }}\">\n  <ng-content />&nbsp; @if (obligatorio) {\n  <span class=\"obligatorio fa fa-asterisk\"></span>\n  }&nbsp;&nbsp; @if (ayuda()) {\n  <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n  }\n</label>\n} @if (readOnly()) {\n<p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n} @if (!readOnly()) {\n<!-- Si usamos un template personalizado, hay que indicar el optionLabel para que sepa cu\u00E1l es el campo a mostrar al seleccionar un elemento -->\n<p-autoComplete\n  fluid\n  [(ngModel)]=\"value\"\n  id=\"{{ nombre() }}\"\n  name=\"{{ nombre() }}\"\n  ariaLabel=\"{{ nombre() }}\"\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [delay]=\"400\"\n  [suggestions]=\"suggestions_mapped()\"\n  [multiple]=\"multiple()\"\n  [inputStyleClass]=\"inputStyleClass()\"\n  optionLabel=\"{{ customTemplate() ? this.suggestionField() : '' }}\"\n  appendTo=\"body\"\n  (completeMethod)=\"search($event)\"\n  (onSelect)=\"_onSelect($event)\"\n  (onClear)=\"_onClear()\"\n  (onBlur)=\"_onBlur()\"\n  (onFocus)=\"_onFocus()\"\n  attr.data-testid=\"{{ dataTestId() }}\"\n>\n  @if (customTemplate() && itemTemplate()) {\n  <ng-template pTemplate=\"item\" let-item>\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\n  </ng-template>\n  }\n</p-autoComplete>\n} @if (control() != null) {\n<control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                    ], standalone: false, template: "@if (!hideLabel()) {\n<label for=\"{{ nombre() }}\">\n  <ng-content />&nbsp; @if (obligatorio()) {\n  <span class=\"obligatorio fa fa-asterisk\"></span>\n  }&nbsp;&nbsp; @if (ayuda()) {\n  <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n  }\n</label>\n} @if (readOnly()) {\n<p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n} @if (!readOnly()) {\n<!-- Si usamos un template personalizado, hay que indicar el optionLabel para que sepa cu\u00E1l es el campo a mostrar al seleccionar un elemento -->\n<p-autoComplete\n  fluid\n  [(ngModel)]=\"value\"\n  id=\"{{ nombre() }}\"\n  name=\"{{ nombre() }}\"\n  ariaLabel=\"{{ nombre() }}\"\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [delay]=\"400\"\n  [suggestions]=\"suggestions_mapped()\"\n  [multiple]=\"multiple()\"\n  [inputStyleClass]=\"inputStyleClass()\"\n  optionLabel=\"{{ customTemplate() ? this.suggestionField() : '' }}\"\n  appendTo=\"body\"\n  (completeMethod)=\"search($event)\"\n  (onSelect)=\"_onSelect($event)\"\n  (onClear)=\"_onClear()\"\n  (onBlur)=\"_onBlur()\"\n  (onFocus)=\"_onFocus()\"\n  attr.data-testid=\"{{ dataTestId() }}\"\n>\n  @if (customTemplate() && itemTemplate()) {\n  <ng-template pTemplate=\"item\" let-item>\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\n  </ng-template>\n  }\n</p-autoComplete>\n} @if (control() != null) {\n<control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], suggestionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionField", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], itemTemplate: [{ type: i0.ContentChild, args: ["itemTemplate", { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
@@ -4462,7 +4494,7 @@ class BitDropDownComponent extends BitDropDownGeneralComponent {
                 useExisting: forwardRef(() => BitDropDownComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-select\n    id=\"{{ nombre() }}\"\n    [(ngModel)]=\"value\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [options]=\"listaOpcionesVisible()\"\n    [filter]=\"filter()\"\n    [group]=\"group()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [optionDisabled]=\"atributoDisabled()\"\n    [appendTo]=\"appendTo()\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <ng-template let-item pTemplate=\"item\">\n      <span [ngClass]=\"{ 'opcion-desactivada': item[atributoDisabled()] }\">{{ item[atributoLabel()] }}</span>\n    </ng-template>\n  </p-select>\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-select\n    id=\"{{ nombre() }}\"\n    [(ngModel)]=\"value\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [options]=\"listaOpcionesVisible()\"\n    [filter]=\"filter()\"\n    [group]=\"group()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [optionDisabled]=\"atributoDisabled()\"\n    [appendTo]=\"appendTo()\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <ng-template let-item pTemplate=\"item\">\n      <span [ngClass]=\"{ 'opcion-desactivada': item[atributoDisabled()] }\">{{ item[atributoLabel()] }}</span>\n    </ng-template>\n  </p-select>\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitDropDownComponent, decorators: [{
             type: Component,
@@ -4472,7 +4504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             useExisting: forwardRef(() => BitDropDownComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-select\n    id=\"{{ nombre() }}\"\n    [(ngModel)]=\"value\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [options]=\"listaOpcionesVisible()\"\n    [filter]=\"filter()\"\n    [group]=\"group()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [optionDisabled]=\"atributoDisabled()\"\n    [appendTo]=\"appendTo()\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <ng-template let-item pTemplate=\"item\">\n      <span [ngClass]=\"{ 'opcion-desactivada': item[atributoDisabled()] }\">{{ item[atributoLabel()] }}</span>\n    </ng-template>\n  </p-select>\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n}\n" }]
+                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-select\n    id=\"{{ nombre() }}\"\n    [(ngModel)]=\"value\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [options]=\"listaOpcionesVisible()\"\n    [filter]=\"filter()\"\n    [group]=\"group()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [optionDisabled]=\"atributoDisabled()\"\n    [appendTo]=\"appendTo()\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <ng-template let-item pTemplate=\"item\">\n      <span [ngClass]=\"{ 'opcion-desactivada': item[atributoDisabled()] }\">{{ item[atributoLabel()] }}</span>\n    </ng-template>\n  </p-select>\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
 
 /**
@@ -4573,7 +4605,7 @@ class BitDropDownMultipleComponent extends BitDropDownGeneralComponent {
                 useExisting: forwardRef(() => BitDropDownMultipleComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\"><ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly() && !showSeparateSelectedLabels()) {\n  <p class=\"lectura\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-multiSelect id=\"{{ id() }}\"\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    [filter]=\"filter()\"\n    ariaLabel=\"{{ nombre() }}\"\n    [options]=\"listaOpciones()\"\n    [disabled]=\"isDisabled()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [appendTo]=\"appendTo()\"\n    selectedItemsLabel=\"{0} elements seleccionats\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n  @if (showSeparateSelectedLabels()) {\n    <div>\n      <label for=\"{{ nombre() }}\">&nbsp;</label>\n      <div class=\"multiselect-labels\">\n        @for (item of value; track item) {\n          <div class=\"label label-primary multiselect-labels-lg\">\n            <span>{{ labelSelectedItem(item) }}</span>\n            @if (!readOnly()) {\n              &nbsp;&nbsp;\n              <a (click)=\"deleteSelectedItem($event, item)\" title=\"{{ title() }}\"><i class=\"fa fa-times\"></i></a>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n}", styles: ["bit-dropdown-multiple div{margin-right:2px!important}bit-dropdown-multiple .row{margin-left:0}.multiselect-labels .label{font-size:90%}.multiselect-labels .label span{margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\"><ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly() && !showSeparateSelectedLabels()) {\n  <p class=\"lectura\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-multiSelect id=\"{{ id() }}\"\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    [filter]=\"filter()\"\n    ariaLabel=\"{{ nombre() }}\"\n    [options]=\"listaOpciones()\"\n    [disabled]=\"isDisabled()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [appendTo]=\"appendTo()\"\n    selectedItemsLabel=\"{0} elements seleccionats\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n  @if (showSeparateSelectedLabels()) {\n    <div>\n      <label for=\"{{ nombre() }}\">&nbsp;</label>\n      <div class=\"multiselect-labels\">\n        @for (item of value; track item) {\n          <div class=\"label label-primary multiselect-labels-lg\">\n            <span>{{ labelSelectedItem(item) }}</span>\n            @if (!readOnly()) {\n              &nbsp;&nbsp;\n              <a (click)=\"deleteSelectedItem($event, item)\" title=\"{{ title() }}\"><i class=\"fa fa-times\"></i></a>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n}", styles: ["bit-dropdown-multiple div{margin-right:2px!important}bit-dropdown-multiple .row{margin-left:0}.multiselect-labels .label{font-size:90%}.multiselect-labels .label span{margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitDropDownMultipleComponent, decorators: [{
             type: Component,
@@ -4583,7 +4615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             useExisting: forwardRef(() => BitDropDownMultipleComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\"><ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly() && !showSeparateSelectedLabels()) {\n  <p class=\"lectura\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-multiSelect id=\"{{ id() }}\"\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    [filter]=\"filter()\"\n    ariaLabel=\"{{ nombre() }}\"\n    [options]=\"listaOpciones()\"\n    [disabled]=\"isDisabled()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [appendTo]=\"appendTo()\"\n    selectedItemsLabel=\"{0} elements seleccionats\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n  @if (showSeparateSelectedLabels()) {\n    <div>\n      <label for=\"{{ nombre() }}\">&nbsp;</label>\n      <div class=\"multiselect-labels\">\n        @for (item of value; track item) {\n          <div class=\"label label-primary multiselect-labels-lg\">\n            <span>{{ labelSelectedItem(item) }}</span>\n            @if (!readOnly()) {\n              &nbsp;&nbsp;\n              <a (click)=\"deleteSelectedItem($event, item)\" title=\"{{ title() }}\"><i class=\"fa fa-times\"></i></a>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n}", styles: ["bit-dropdown-multiple div{margin-right:2px!important}bit-dropdown-multiple .row{margin-left:0}.multiselect-labels .label{font-size:90%}.multiselect-labels .label span{margin-right:2px}\n"] }]
+                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\"><ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n    }\n  </label>\n}\n@if (readOnly() && !showSeparateSelectedLabels()) {\n  <p class=\"lectura\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-multiSelect id=\"{{ id() }}\"\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    [filter]=\"filter()\"\n    ariaLabel=\"{{ nombre() }}\"\n    [options]=\"listaOpciones()\"\n    [disabled]=\"isDisabled()\"\n    [optionLabel]=\"atributoLabel()\"\n    [optionValue]=\"atributoValue()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [appendTo]=\"appendTo()\"\n    selectedItemsLabel=\"{0} elements seleccionats\"\n    (onChange)=\"_onChangeValue($event)\"\n    (onClear)=\"_onClear()\"\n    (onBlur)=\"_onBlur()\"\n    (onFocus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n  @if (control() != null) {\n    <control-messages [control]=\"control()\" [field]=\"id()\" />\n  }\n  @if (showSeparateSelectedLabels()) {\n    <div>\n      <label for=\"{{ nombre() }}\">&nbsp;</label>\n      <div class=\"multiselect-labels\">\n        @for (item of value; track item) {\n          <div class=\"label label-primary multiselect-labels-lg\">\n            <span>{{ labelSelectedItem(item) }}</span>\n            @if (!readOnly()) {\n              &nbsp;&nbsp;\n              <a (click)=\"deleteSelectedItem($event, item)\" title=\"{{ title() }}\"><i class=\"fa fa-times\"></i></a>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n}", styles: ["bit-dropdown-multiple div{margin-right:2px!important}bit-dropdown-multiple .row{margin-left:0}.multiselect-labels .label{font-size:90%}.multiselect-labels .label span{margin-right:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], showSeparateSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeparateSelectedLabels", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
 
 class ConfigurationEditor {
@@ -4677,7 +4709,7 @@ class BitEditorComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitEditorComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\">\n    {{ value_lectura && value_lectura != \"\" ? value_lectura : \"&nbsp;\" }}\n  </p>\n}\n@if (!readOnly() && tipo() == 'custom') {\n  <p-editor\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (onInit)=\"onInit($event)\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (onTextChange)=\"_onTextChange($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <p-header>\n      @if (configuracion.fontSize) {\n        <span class=\"ql-formats\">\n          <select class=\"ql-size\">\n            <option value=\"small\">{{ \"bitnglibrary.form.biteditor.small\" | transloco }}</option>\n            <!-- Note a missing, thus falsy value, is used to reset to default -->\n            <option selected>{{ \"bitnglibrary.form.biteditor.normal\" | transloco }}</option>\n            <option value=\"large\">{{ \"bitnglibrary.form.biteditor.large\" | transloco }}</option>\n            <option value=\"huge\">{{ \"bitnglibrary.form.biteditor.huge\" | transloco }}</option>\n          </select>\n        </span>\n      }\n      @if (configuracion.fontFormat) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-bold\" aria-label=\"Bold\"></button>\n          <button class=\"ql-italic\" aria-label=\"Italic\"></button>\n          <button class=\"ql-underline\" aria-label=\"Underline\"></button>\n          <button class=\"ql-strike\" aria-label=\"Strikethrough\"></button>\n        </span>\n      }\n      @if (configuracion.bullet) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-list\" aria-label=\"Insert Ordered List\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-list\" aria-label=\"Insert Bullet List\" value=\"bullet\" type=\"button\"></button>\n        </span>\n      }\n      @if (configuracion.link) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n      }\n    </p-header>\n  </p-editor>\n}\n@if (!readOnly() && (!tipo() || tipo() == 'default')) {\n  <p-editor id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [placeholder]=\"placeholder()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$3.Header, selector: "p-header" }, { kind: "component", type: i2$8.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange", "onEditorChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\">\n    {{ value_lectura && value_lectura != \"\" ? value_lectura : \"&nbsp;\" }}\n  </p>\n}\n@if (!readOnly() && tipo() == 'custom') {\n  <p-editor\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (onInit)=\"onInit($event)\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (onTextChange)=\"_onTextChange($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <p-header>\n      @if (configuracion.fontSize) {\n        <span class=\"ql-formats\">\n          <select class=\"ql-size\">\n            <option value=\"small\">{{ \"bitnglibrary.form.biteditor.small\" | transloco }}</option>\n            <!-- Note a missing, thus falsy value, is used to reset to default -->\n            <option selected>{{ \"bitnglibrary.form.biteditor.normal\" | transloco }}</option>\n            <option value=\"large\">{{ \"bitnglibrary.form.biteditor.large\" | transloco }}</option>\n            <option value=\"huge\">{{ \"bitnglibrary.form.biteditor.huge\" | transloco }}</option>\n          </select>\n        </span>\n      }\n      @if (configuracion.fontFormat) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-bold\" aria-label=\"Bold\"></button>\n          <button class=\"ql-italic\" aria-label=\"Italic\"></button>\n          <button class=\"ql-underline\" aria-label=\"Underline\"></button>\n          <button class=\"ql-strike\" aria-label=\"Strikethrough\"></button>\n        </span>\n      }\n      @if (configuracion.bullet) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-list\" aria-label=\"Insert Ordered List\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-list\" aria-label=\"Insert Bullet List\" value=\"bullet\" type=\"button\"></button>\n        </span>\n      }\n      @if (configuracion.link) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n      }\n    </p-header>\n  </p-editor>\n}\n@if (!readOnly() && (!tipo() || tipo() == 'default')) {\n  <p-editor id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [placeholder]=\"placeholder()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$3.Header, selector: "p-header" }, { kind: "component", type: i2$8.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange", "onEditorChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitEditorComponent, decorators: [{
             type: Component,
@@ -4685,7 +4717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitEditorComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\">\n    {{ value_lectura && value_lectura != \"\" ? value_lectura : \"&nbsp;\" }}\n  </p>\n}\n@if (!readOnly() && tipo() == 'custom') {\n  <p-editor\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (onInit)=\"onInit($event)\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (onTextChange)=\"_onTextChange($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <p-header>\n      @if (configuracion.fontSize) {\n        <span class=\"ql-formats\">\n          <select class=\"ql-size\">\n            <option value=\"small\">{{ \"bitnglibrary.form.biteditor.small\" | transloco }}</option>\n            <!-- Note a missing, thus falsy value, is used to reset to default -->\n            <option selected>{{ \"bitnglibrary.form.biteditor.normal\" | transloco }}</option>\n            <option value=\"large\">{{ \"bitnglibrary.form.biteditor.large\" | transloco }}</option>\n            <option value=\"huge\">{{ \"bitnglibrary.form.biteditor.huge\" | transloco }}</option>\n          </select>\n        </span>\n      }\n      @if (configuracion.fontFormat) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-bold\" aria-label=\"Bold\"></button>\n          <button class=\"ql-italic\" aria-label=\"Italic\"></button>\n          <button class=\"ql-underline\" aria-label=\"Underline\"></button>\n          <button class=\"ql-strike\" aria-label=\"Strikethrough\"></button>\n        </span>\n      }\n      @if (configuracion.bullet) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-list\" aria-label=\"Insert Ordered List\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-list\" aria-label=\"Insert Bullet List\" value=\"bullet\" type=\"button\"></button>\n        </span>\n      }\n      @if (configuracion.link) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n      }\n    </p-header>\n  </p-editor>\n}\n@if (!readOnly() && (!tipo() || tipo() == 'default')) {\n  <p-editor id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [placeholder]=\"placeholder()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp; @if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\">\n    {{ value_lectura && value_lectura != \"\" ? value_lectura : \"&nbsp;\" }}\n  </p>\n}\n@if (!readOnly() && tipo() == 'custom') {\n  <p-editor\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (onInit)=\"onInit($event)\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (onTextChange)=\"_onTextChange($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    >\n    <p-header>\n      @if (configuracion.fontSize) {\n        <span class=\"ql-formats\">\n          <select class=\"ql-size\">\n            <option value=\"small\">{{ \"bitnglibrary.form.biteditor.small\" | transloco }}</option>\n            <!-- Note a missing, thus falsy value, is used to reset to default -->\n            <option selected>{{ \"bitnglibrary.form.biteditor.normal\" | transloco }}</option>\n            <option value=\"large\">{{ \"bitnglibrary.form.biteditor.large\" | transloco }}</option>\n            <option value=\"huge\">{{ \"bitnglibrary.form.biteditor.huge\" | transloco }}</option>\n          </select>\n        </span>\n      }\n      @if (configuracion.fontFormat) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-bold\" aria-label=\"Bold\"></button>\n          <button class=\"ql-italic\" aria-label=\"Italic\"></button>\n          <button class=\"ql-underline\" aria-label=\"Underline\"></button>\n          <button class=\"ql-strike\" aria-label=\"Strikethrough\"></button>\n        </span>\n      }\n      @if (configuracion.bullet) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-list\" aria-label=\"Insert Ordered List\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-list\" aria-label=\"Insert Bullet List\" value=\"bullet\" type=\"button\"></button>\n        </span>\n      }\n      @if (configuracion.link) {\n        <span class=\"ql-formats\">\n          <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n        </span>\n      }\n    </p-header>\n  </p-editor>\n}\n@if (!readOnly() && (!tipo() || tipo() == 'default')) {\n  <p-editor id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    [ngModel]=\"value\"\n    styleClass=\"editor\"\n    [placeholder]=\"placeholder()\"\n    [placeholder]=\"placeholder()\"\n    [style]=\"{ height: height() + 'px' }\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { tipo: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipo", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], onTextChange: [{ type: i0.Output, args: ["onTextChange"] }] } });
 
 class BitReadonlyComponent {
@@ -4771,7 +4803,7 @@ class BitNumberComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitNumberComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputReference"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputReference"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitNumberComponent, decorators: [{
             type: Component,
@@ -4779,7 +4811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitNumberComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { modo: [{ type: i0.Input, args: [{ isSignal: true, alias: "modo", required: false }] }], divisa: [{ type: i0.Input, args: [{ isSignal: true, alias: "divisa", required: false }] }], prefijo: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefijo", required: false }] }], sufijo: [{ type: i0.Input, args: [{ isSignal: true, alias: "sufijo", required: false }] }], minimo: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimo", required: false }] }], maximo: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximo", required: false }] }], numeroDecimales: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeroDecimales", required: false }] }], maximoDecimales: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximoDecimales", required: false }] }], separadorGrupo: [{ type: i0.Input, args: [{ isSignal: true, alias: "separadorGrupo", required: false }] }], mostrarBotones: [{ type: i0.Input, args: [{ isSignal: true, alias: "mostrarBotones", required: false }] }], incremento: [{ type: i0.Input, args: [{ isSignal: true, alias: "incremento", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ['inputReference', { isSignal: true }] }] } });
 
 class BitAmountComponent extends BitNumberComponent {
@@ -4801,7 +4833,7 @@ class BitAmountComponent extends BitNumberComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitAmountComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "component", type: i1$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitAmountComponent, decorators: [{
             type: Component,
@@ -4809,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitAmountComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [placeholder]=\"placeholder()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (tooltipTexto() && !readOnly()) {\n  <p-inputNumber\n    #inputReference\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    [ngModel]=\"value\"\n    [attr.directive]=\"nombreDirectiva()\"\n    [pTooltip]=\"tooltipTexto()\"\n    [tooltipPosition]=\"tooltipPosicion()\"\n    [mode]=\"modo()\"\n    [currency]=\"divisa()\"\n    [prefix]=\"prefijo()\"\n    [suffix]=\"sufijo()\"\n    [min]=\"minimo()\"\n    [max]=\"maximo()\"\n    [minFractionDigits]=\"numeroDecimales()\"\n    [maxFractionDigits]=\"maximoDecimales() == null ? numeroDecimales() : maximoDecimales()\"\n    [useGrouping]=\"separadorGrupo()\"\n    [showButtons]=\"mostrarBotones()\"\n    [step]=\"incremento()\"\n    locale=\"es-ES\"\n    (ngModelChange)=\"onChangeValue($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n    />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { prefijo: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefijo", required: false }] }], sufijo: [{ type: i0.Input, args: [{ isSignal: true, alias: "sufijo", required: false }] }], minimo: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimo", required: false }] }], maximo: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximo", required: false }] }], mostrarBotones: [{ type: i0.Input, args: [{ isSignal: true, alias: "mostrarBotones", required: false }] }], incremento: [{ type: i0.Input, args: [{ isSignal: true, alias: "incremento", required: false }] }], modo: [{ type: i0.Input, args: [{ isSignal: true, alias: "modo", required: false }] }], divisa: [{ type: i0.Input, args: [{ isSignal: true, alias: "divisa", required: false }] }], maximoDecimales: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximoDecimales", required: false }] }], separadorGrupo: [{ type: i0.Input, args: [{ isSignal: true, alias: "separadorGrupo", required: false }] }] } });
 
 /** Esta clase contiene información sobre el menú pulsado por el usuairo. Permite setear dicho valor y recuperarlo mediante un signal */
@@ -5302,7 +5334,7 @@ class BitSwitchSiNoComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitSwitchSiNoComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    [trueValue]=\"valorTrue()\"\n    [falseValue]=\"valorFalse()\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    [trueValue]=\"valorTrue()\"\n    [falseValue]=\"valorFalse()\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitSwitchSiNoComponent, decorators: [{
             type: Component,
@@ -5310,7 +5342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitSwitchSiNoComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    [trueValue]=\"valorTrue()\"\n    [falseValue]=\"valorFalse()\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label for=\"{{ nombre() }}\">\n    <ng-content />&nbsp;@if (obligatorio()) {\n    <span class=\"obligatorio fa fa-asterisk\"></span>\n    }&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (readOnly()) {\n  <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n}\n@if (!readOnly()) {\n  <p-toggleswitch onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre() }}\"\n    ariaLabel=\"{{ nombre() }}\"\n    [disabled]=\"isDisabled()\"\n    id=\"{{ nombre() }}\"\n    [trueValue]=\"valorTrue()\"\n    [falseValue]=\"valorFalse()\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId()}}\"\n     />\n}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
         }], propDecorators: { valorTrue: [{ type: i0.Input, args: [{ isSignal: true, alias: "valorTrue", required: false }] }], valorFalse: [{ type: i0.Input, args: [{ isSignal: true, alias: "valorFalse", required: false }] }] } });
 
 class BitMultipleCheckboxComponent extends BitCustomComponent {
@@ -5384,7 +5416,7 @@ class BitMultipleCheckboxComponent extends BitCustomComponent {
                 useExisting: forwardRef(() => BitMultipleCheckboxComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label for=\"{{ nombre() }}\">\n      <ng-content />&nbsp;\n      @if (!readOnly() && this.chekAll()) {\n        <i title=\"{{t('bitnglibrary.form.bitmultiplecheckbox.checkall')}}\"\n           style=\"color: #ced4da\"\n           class=\"font-normal cursor-pointer hover:text-blue-600 cursor-pointer text-sm {{ estiloCheckAll() }}\"\n           (click)=\"onCheckAll()\"></i>&nbsp;\n      }\n      @if (obligatorio) {\n        <span class=\"obligatorio fa fa-asterisk\"></span>&nbsp;&nbsp;\n      }\n      @if (ayuda()) {\n        <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n      }\n    </label>\n  }\n\n  @if (readOnly()) {\n    <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n  } @else {\n\n    @for (dominio of data(); track dominio) {\n      <div class=\"field-checkbox inline-block\">\n        <p-checkbox\n          id=\"{{ nombre() + '-' + dominio.value }}\"\n          name=\"{{ nombre() + '-' + dominio.value }}\"\n          ariaLabel=\"{{ nombre() }}\"\n          [value]=\"dominio.value\"\n          [(ngModel)]=\"value\"\n          [inputId]=\"dominio.value\"\n          [disabled]=\"isDisabled()\"\n          (onChange)=\"onChangeValue($event)\">\n          attr.data-testid=\"{{ dataTestId() + \"-\" + dominio.value }}\"\n        </p-checkbox>\n        <label class=\"inline-block ml-2 mr-4 font-normal cursor-pointer hover:text-blue-400\"\n               [for]=\"dominio.value\">{{ dominio.label }}</label>\n      </div>\n    }\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n    }\n\n    @if (control() != null) {\n      <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n    }\n  }\n\n</ng-container>\n", dependencies: [{ kind: "component", type: i1$5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label for=\"{{ nombre() }}\">\n      <ng-content />&nbsp;\n      @if (!readOnly() && this.chekAll()) {\n        <i title=\"{{t('bitnglibrary.form.bitmultiplecheckbox.checkall')}}\"\n           style=\"color: #ced4da\"\n           class=\"font-normal cursor-pointer hover:text-blue-600 cursor-pointer text-sm {{ estiloCheckAll() }}\"\n           (click)=\"onCheckAll()\"></i>&nbsp;\n      }\n      @if (obligatorio()) {\n        <span class=\"obligatorio fa fa-asterisk\"></span>&nbsp;&nbsp;\n      }\n      @if (ayuda()) {\n        <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n      }\n    </label>\n  }\n\n  @if (readOnly()) {\n    <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n  } @else {\n\n    @for (dominio of data(); track dominio) {\n      <div class=\"field-checkbox inline-block\">\n        <p-checkbox\n          id=\"{{ nombre() + '-' + dominio.value }}\"\n          name=\"{{ nombre() + '-' + dominio.value }}\"\n          ariaLabel=\"{{ nombre() }}\"\n          [value]=\"dominio.value\"\n          [(ngModel)]=\"value\"\n          [inputId]=\"dominio.value\"\n          [disabled]=\"isDisabled()\"\n          (onChange)=\"onChangeValue($event)\">\n          attr.data-testid=\"{{ dataTestId() + \"-\" + dominio.value }}\"\n        </p-checkbox>\n        <label class=\"inline-block ml-2 mr-4 font-normal cursor-pointer hover:text-blue-400\"\n               [for]=\"dominio.value\">{{ dominio.label }}</label>\n      </div>\n    }\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n    }\n\n    @if (control() != null) {\n      <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n    }\n  }\n\n</ng-container>\n", dependencies: [{ kind: "component", type: i1$5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BitMultipleCheckboxComponent, decorators: [{
             type: Component,
@@ -5394,7 +5426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             useExisting: forwardRef(() => BitMultipleCheckboxComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label for=\"{{ nombre() }}\">\n      <ng-content />&nbsp;\n      @if (!readOnly() && this.chekAll()) {\n        <i title=\"{{t('bitnglibrary.form.bitmultiplecheckbox.checkall')}}\"\n           style=\"color: #ced4da\"\n           class=\"font-normal cursor-pointer hover:text-blue-600 cursor-pointer text-sm {{ estiloCheckAll() }}\"\n           (click)=\"onCheckAll()\"></i>&nbsp;\n      }\n      @if (obligatorio) {\n        <span class=\"obligatorio fa fa-asterisk\"></span>&nbsp;&nbsp;\n      }\n      @if (ayuda()) {\n        <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n      }\n    </label>\n  }\n\n  @if (readOnly()) {\n    <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n  } @else {\n\n    @for (dominio of data(); track dominio) {\n      <div class=\"field-checkbox inline-block\">\n        <p-checkbox\n          id=\"{{ nombre() + '-' + dominio.value }}\"\n          name=\"{{ nombre() + '-' + dominio.value }}\"\n          ariaLabel=\"{{ nombre() }}\"\n          [value]=\"dominio.value\"\n          [(ngModel)]=\"value\"\n          [inputId]=\"dominio.value\"\n          [disabled]=\"isDisabled()\"\n          (onChange)=\"onChangeValue($event)\">\n          attr.data-testid=\"{{ dataTestId() + \"-\" + dominio.value }}\"\n        </p-checkbox>\n        <label class=\"inline-block ml-2 mr-4 font-normal cursor-pointer hover:text-blue-400\"\n               [for]=\"dominio.value\">{{ dominio.label }}</label>\n      </div>\n    }\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n    }\n\n    @if (control() != null) {\n      <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n    }\n  }\n\n</ng-container>\n" }]
+                    ], standalone: false, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label for=\"{{ nombre() }}\">\n      <ng-content />&nbsp;\n      @if (!readOnly() && this.chekAll()) {\n        <i title=\"{{t('bitnglibrary.form.bitmultiplecheckbox.checkall')}}\"\n           style=\"color: #ced4da\"\n           class=\"font-normal cursor-pointer hover:text-blue-600 cursor-pointer text-sm {{ estiloCheckAll() }}\"\n           (click)=\"onCheckAll()\"></i>&nbsp;\n      }\n      @if (obligatorio()) {\n        <span class=\"obligatorio fa fa-asterisk\"></span>&nbsp;&nbsp;\n      }\n      @if (ayuda()) {\n        <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n      }\n    </label>\n  }\n\n  @if (readOnly()) {\n    <p class=\"lectura\" [id]=\"nombre()\">{{ value_lectura }}</p>\n  } @else {\n\n    @for (dominio of data(); track dominio) {\n      <div class=\"field-checkbox inline-block\">\n        <p-checkbox\n          id=\"{{ nombre() + '-' + dominio.value }}\"\n          name=\"{{ nombre() + '-' + dominio.value }}\"\n          ariaLabel=\"{{ nombre() }}\"\n          [value]=\"dominio.value\"\n          [(ngModel)]=\"value\"\n          [inputId]=\"dominio.value\"\n          [disabled]=\"isDisabled()\"\n          (onChange)=\"onChangeValue($event)\">\n          attr.data-testid=\"{{ dataTestId() + \"-\" + dominio.value }}\"\n        </p-checkbox>\n        <label class=\"inline-block ml-2 mr-4 font-normal cursor-pointer hover:text-blue-400\"\n               [for]=\"dominio.value\">{{ dominio.label }}</label>\n      </div>\n    }\n    @if (ayuda()) {\n      <i (click)=\"showAyuda()\" class=\"btn-ayuda-checkbox fa fa-question\"></i>\n    }\n\n    @if (control() != null) {\n      <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n    }\n  }\n\n</ng-container>\n" }]
         }], propDecorators: { chekAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "chekAll", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 const modules = [