bit-ng-library 20.0.1 → 20.1.1

package/fesm2022/bit-ng-library.mjs

@@ -1,69 +1,68 @@
-import { Subject, BehaviorSubject, lastValueFrom, of, ReplaySubject, combineLatest, forkJoin, fromEvent, throwError } from 'rxjs';
+import { Subject, BehaviorSubject, lastValueFrom, of, ReplaySubject, combineLatest, forkJoin, throwError } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, EventEmitter, computed, Inject, DestroyRef, Directive, Input, ChangeDetectionStrategy, Component, Pipe, input, model, output, Output, HostListener, ViewChild, forwardRef, TemplateRef, ContentChild, ElementRef, effect, NgModule } from '@angular/core';
-import { map, mergeMap, tap, takeUntil, startWith, delay, filter, concatMap, take, switchMapTo, catchError, finalize } from 'rxjs/operators';
+import { Injectable, inject, signal, computed, DestroyRef, Directive, input, ChangeDetectionStrategy, Component, Pipe, model, output, linkedSignal, ElementRef, Renderer2, HostListener, viewChild, forwardRef, contentChild, TemplateRef, effect, NgModule } from '@angular/core';
+import { map, mergeMap, tap, takeUntil, filter, concatMap, take, catchError, finalize } from 'rxjs/operators';
 import { PrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
-import * as i5 from '@jsverse/transloco';
-import { TranslocoModule, TRANSLOCO_SCOPE } from '@jsverse/transloco';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
+import * as i3 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule, TRANSLOCO_SCOPE } from '@jsverse/transloco';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import moment from 'moment';
-import * as i1$2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormGroup, UntypedFormControl, UntypedFormArray, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { saveAs } from 'file-saver';
-import * as i3 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i3$6 from 'primeng/datepicker';
+import * as i1$6 from '@angular/router';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i1$4 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i2$2 from 'primeng/inputtext';
+import * as i2$3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i2$6 from 'primeng/editor';
+import * as i2$8 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
-import * as i4$1 from 'primeng/multiselect';
+import * as i2$7 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i2 from 'primeng/select';
+import * as i2$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i1$3 from 'primeng/checkbox';
+import * as i1$5 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i3$2 from 'primeng/button';
+import * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { TabsModule } from 'primeng/tabs';
-import * as i3$1 from 'primeng/dialog';
+import * as i1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { AccordionModule } from 'primeng/accordion';
-import * as i2$5 from 'primeng/autocomplete';
+import * as i2$6 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i2$4 from 'primeng/toggleswitch';
+import * as i2$5 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i3$5 from 'primeng/tooltip';
+import * as i3$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i3$7 from 'primeng/popover';
+import * as i3$3 from 'primeng/popover';
 import { Popover, PopoverModule } from 'primeng/popover';
 import { MessageModule } from 'primeng/message';
 import { MenuModule } from 'primeng/menu';
 import { MenubarModule } from 'primeng/menubar';
 import { MegaMenuModule } from 'primeng/megamenu';
-import * as i5$1 from 'primeng/table';
+import * as i4$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { TreeModule } from 'primeng/tree';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
-import * as i1$4 from 'primeng/inputnumber';
+import * as i1$7 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { FieldsetModule } from 'primeng/fieldset';
-import * as i3$4 from 'primeng/toast';
+import * as i1$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i6 from 'ng2-file-upload';
+import * as i5 from 'ng2-file-upload';
 import { FileUploadModule as FileUploadModule$1 } from 'ng2-file-upload';
-import * as i2$1 from 'primeng/api';
+import * as i1$3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import { TreeTableModule } from 'primeng/treetable';
-import * as i2$3 from 'primeng/textarea';
+import * as i2$4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { BadgeModule } from 'primeng/badge';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -75,11 +74,11 @@ import { TieredMenuModule } from 'primeng/tieredmenu';
 import { InputMaskModule } from 'primeng/inputmask';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { InputGroupModule } from 'primeng/inputgroup';
-import * as i2$7 from 'primeng/selectbutton';
+import * as i2$9 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i4 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import * as i3$3 from 'primeng/splitbutton';
+import * as i2$2 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { signalStore, withState, withMethods, patchState, withComputed } from '@ngrx/signals';
 import { withEntities, updateEntity, removeAllEntities, removeEntities, removeEntity, addEntities, addEntity, setEntity, setEntities } from '@ngrx/signals/entities';
@@ -379,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 class AyudaService {
     static { this.AYUDAS = []; } // Inicializar desde la aplicacion cliente
     constructor() {
-        this.mostrar = new EventEmitter();
+        this.mostrar = signal(null, ...(ngDevMode ? [{ debugName: "mostrar" }] : []));
         this.themeFbitService = inject(ThemeFBitService);
         this.localeService = inject(LocaleService);
         this.baseHelpUrl$ = computed(() => `assets/docshelp/${this.localeService.locale$()}/index.html?darkMode=${this.themeFbitService.darkMode$()}`, ...(ngDevMode ? [{ debugName: "baseHelpUrl$" }] : []));
@@ -400,7 +399,7 @@ class AyudaService {
     }
     mostrarAyuda(key) {
         if (this.mapaAyudas.has(key)) {
-            this.mostrar.emit(this.mapaAyudas.get(key));
+            this.mostrar.set(this.mapaAyudas.get(key));
         }
         else {
             console.warn(`No existe ayuda para la clave [${key}]`);
@@ -513,14 +512,19 @@ class GeneralUtils {
     static { this.FORMAT_SHORT_SECONDS_TIME = "HH:mm:ss"; }
     constructor() {
         this.observableLoadingSource = new Subject();
+        this.loading = signal(0, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         console.log("GeneralUtils constructor");
         this.observableLoading = this.observableLoadingSource.asObservable();
     }
     startLoading() {
+        console.log("startLoading");
         this.observableLoadingSource.next("start");
+        this.loading.update((value) => ++value);
     }
     stopLoading() {
+        console.log("startLoading");
         this.observableLoadingSource.next("stop");
+        this.loading.update((value) => --value);
     }
     static capitalizeFirstLetter(cad) {
         return cad && cad.charAt(0).toUpperCase() + cad.slice(1);
@@ -659,9 +663,9 @@ function buildTranslatedMessage(code, context, params) {
 }
 /** wrapper al servicio de traducción de textos */
 class TranslateService {
-    constructor(translocoService, defaultLanguage = "ca") {
-        this.translocoService = translocoService;
-        this.defaultLanguage = defaultLanguage;
+    constructor() {
+        this.translocoService = inject(TranslocoService);
+        this.defaultLanguage = inject("DEFAULT_LANGUAGE") ?? "ca";
         //para suscribirnos a cambios de idioma y emitimos un primer valor que es el idioma en curso
         console.log("default language", this.defaultLanguage);
         this.langChangeSubject = new BehaviorSubject(this.defaultLanguage);
@@ -697,16 +701,13 @@ class TranslateService {
         let lang = this.translocoService.getActiveLang();
         return lang;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TranslateService, deps: [{ token: i5.TranslocoService }, { token: "DEFAULT_LANGUAGE" }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TranslateService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TranslateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: i5.TranslocoService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ["DEFAULT_LANGUAGE"]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class HttpUtilsService {
     // customizado por proyecto: {provide: 'CONTEXT_PATH', useValue: environment.CONTEXT}
@@ -716,15 +717,15 @@ class HttpUtilsService {
     static { this.errorAccessServerMessage = ""; }
     static { this.errorServerTitle = ""; }
     static { this.errorServerMessage = ""; }
-    constructor(http, bitMessageService, generalUtils, translateService, apiUrl, contextPath) {
-        this.http = http;
-        this.bitMessageService = bitMessageService;
-        this.generalUtils = generalUtils;
-        this.translateService = translateService;
-        this.apiUrl = apiUrl;
-        this.contextPath = contextPath;
-        HttpUtilsService.CONTEXT_PATH = contextPath;
-        console.log("HttpUtilsSerive creado con API Url:" + this.apiUrl);
+    constructor() {
+        this.http = inject(HttpClient);
+        this.bitMessageService = inject(BitMessageService);
+        this.generalUtils = inject(GeneralUtils);
+        this.translateService = inject(TranslateService);
+        this.apiUrl = inject("API_URL");
+        this.contextPath = inject("CONTEXT_PATH");
+        HttpUtilsService.CONTEXT_PATH = this.contextPath;
+        console.log(`HttpUtilsSerive creado con API Url: ${this.apiUrl} y contextPath: ${this.contextPath}`);
         this.getMessagesI18N();
     }
     getMessagesI18N() {
@@ -845,19 +846,13 @@ class HttpUtilsService {
         }
         return httpHeaders;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HttpUtilsService, deps: [{ token: i1.HttpClient }, { token: BitMessageService }, { token: GeneralUtils }, { token: TranslateService }, { token: "API_URL" }, { token: "CONTEXT_PATH" }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HttpUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HttpUtilsService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HttpUtilsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: BitMessageService }, { type: GeneralUtils }, { type: TranslateService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ["API_URL"]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ["CONTEXT_PATH"]
-                }] }] });
+        }], ctorParameters: () => [] });
 var httpUtilsServiceInjectables = [
     {
         provide: HttpUtilsService,
@@ -1650,22 +1645,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }], ctorParameters: () => [] });
 
 class DomainService {
-    constructor(translateService) {
-        this.translateService = translateService;
+    constructor() {
+        this.translateService = inject(TranslateService);
     }
     getTranslatedDomain(domain, injector) {
         return toSignal(this.translateService.langChanged$.pipe(mergeMap((lang) => {
-            console.log("getTranslatedDomain", lang);
             return domain && domain[lang] ? of(domain[lang]) : of([]);
         })), { injector: injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DomainService, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DomainService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DomainService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DomainService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: TranslateService }] });
+        }] });
 
 // Devuelve el filename especificado en el content-disposition de una response
 function getFileNameFromResponse(response) {
@@ -1688,9 +1682,9 @@ function replaceAll(target, find, replace) {
 }
 
 class DownloadService {
-    constructor(http, generalUtils) {
-        this.http = http;
-        this.generalUtils = generalUtils;
+    constructor() {
+        this.http = inject(HttpClient);
+        this.generalUtils = inject(GeneralUtils);
     }
     // Devuelve un objeto que contiene el nombre del fichero y su contenido como Blob
     // Determinamos el nombre del fichero a partir del header "Content-Disposition" de la response
@@ -1714,7 +1708,7 @@ class DownloadService {
             this.generalUtils.stopLoading();
         }, () => this.generalUtils.stopLoading());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DownloadService, deps: [{ token: i1.HttpClient }, { token: GeneralUtils }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DownloadService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DownloadService, decorators: [{
@@ -1722,7 +1716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             args: [{
                     providedIn: "root"
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: GeneralUtils }] });
+        }] });
 
 /**
  * FocusService almacena el campo/elemento que actualmente tiene el foco del usuario.
@@ -1820,8 +1814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }], ctorParameters: () => [] });
 
 class UploadService {
-    constructor(apiUrl) {
-        this.apiUrl = apiUrl;
+    constructor() {
+        this.apiUrl = inject("API_URL");
         this.UPLOAD_URL = `${this.apiUrl}ficheros/upload`;
         this.DOWNLOAD_URL = `${this.apiUrl}ficheros/download/`;
         console.log("UploadService creado con API_URL:", this.apiUrl);
@@ -1862,16 +1856,13 @@ class UploadService {
     getUrlDownloadFile(id) {
         return `${this.DOWNLOAD_URL}${id}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UploadService, deps: [{ token: "API_URL" }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UploadService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ["API_URL"]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class ClearItemsService {
     constructor() {
@@ -2384,15 +2375,15 @@ function makeToolbarChildList(enableDelete) {
  *            ]
  **/
 class BitBreadCrumbComponent {
-    constructor(router) {
-        this.router = router;
+    constructor() {
+        this.router = inject(Router);
+        this.bc = input([], ...(ngDevMode ? [{ debugName: "bc", alias: "breadcrumb" }] : [{ alias: "breadcrumb" }]));
     }
     /** Comprobamos si los datos de entrada no están definidos para inicializarlos en blanco */
     ngOnInit() {
-        if (this.bc == undefined)
-            this.bc = [];
-        if (this.bc.length == 0)
-            this.bc.push({ label: " " });
+        const bc = this.bc();
+        if (bc.length == 0)
+            bc.push({ label: " " });
     }
     /** Vamos a la URL que contenga el path */
     goAddress(path) {
@@ -2404,21 +2395,21 @@ class BitBreadCrumbComponent {
         }
         return false; //para evitar que navegue al href="#"
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBreadCrumbComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitBreadCrumbComponent, isStandalone: false, selector: "bit-breadcrumb", inputs: { bc: ["breadcrumb", "bc"] }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBreadCrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitBreadCrumbComponent, isStandalone: false, selector: "bit-breadcrumb", inputs: { bc: { classPropertyName: "bc", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ul class="breadcrumb">
-      @for (path of bc; track path; let i = $index) {
-        <li [class.active]="i == bc.length - 1">
-          @if (i < bc.length - 1 && path.url) {
+      @for (path of bc(); track path; let i = $index) {
+        <li [class.active]="i == bc().length - 1">
+          @if (i < bc().length - 1 && path.url) {
             <a class="breadcrumb-item" (click)="goAddress(path)" href="#">{{ "breadcrumb." + path.label | transloco }}</a>
           }
-          @if (i == bc.length - 1 || !path.url) {
+          @if (i == bc().length - 1 || !path.url) {
             <span class="breadcrumb-item active">{{ "breadcrumb." + path.label | transloco }}</span>
           }
         </li>
       }
     </ul>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBreadCrumbComponent, decorators: [{
             type: Component,
@@ -2427,12 +2418,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <ul class="breadcrumb">
-      @for (path of bc; track path; let i = $index) {
-        <li [class.active]="i == bc.length - 1">
-          @if (i < bc.length - 1 && path.url) {
+      @for (path of bc(); track path; let i = $index) {
+        <li [class.active]="i == bc().length - 1">
+          @if (i < bc().length - 1 && path.url) {
             <a class="breadcrumb-item" (click)="goAddress(path)" href="#">{{ "breadcrumb." + path.label | transloco }}</a>
           }
-          @if (i == bc.length - 1 || !path.url) {
+          @if (i == bc().length - 1 || !path.url) {
             <span class="breadcrumb-item active">{{ "breadcrumb." + path.label | transloco }}</span>
           }
         </li>
@@ -2443,22 +2434,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { bc: [{
-                type: Input,
-                args: ["breadcrumb"]
-            }] } });
+        }] });
 
 class BitControlMessages {
-    //constructor( @Host() private formDir: FormGroup) { }
-    constructor(focusService, translateService) {
-        this.focusService = focusService;
-        this.translateService = translateService;
+    constructor() {
+        this.focusService = inject(FocusService);
+        this.translateService = inject(TranslateService);
+        this.control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
+        this.field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
     }
     get isError() {
-        if (this.focusService.getFocusedElement() !== this.field) {
-            for (let propertyName in this.control.errors) {
+        if (this.focusService.getFocusedElement() !== this.field()) {
+            for (let propertyName in this.control().errors) {
                 // If control has a error
-                if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
+                const control = this.control();
+                if (control.errors.hasOwnProperty(propertyName) && control.touched) {
                     // Return the appropriate error message from the Validation Service
                     let translatedError = CustomValidators.getValidatorErrorMessage(propertyName);
                     this.errorMessage$ = this.translateService.selectTranslate(translatedError.code, translatedError.params, translatedError.context);
@@ -2468,14 +2458,14 @@ class BitControlMessages {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitControlMessages, deps: [{ token: FocusService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitControlMessages, isStandalone: false, selector: "control-messages", inputs: { control: "control", field: "field" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitControlMessages, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitControlMessages, isStandalone: false, selector: "control-messages", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (isError) {
       <div>
         <span class="mensaje-error-input">{{ errorMessage$ | async }}</span>
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    `, isInline: true, dependencies: [{ kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitControlMessages, decorators: [{
             type: Component,
@@ -2492,11 +2482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: FocusService }, { type: TranslateService }], propDecorators: { control: [{
-                type: Input
-            }], field: [{
-                type: Input
-            }] } });
+        }] });
 
 class BitMessage {
     static { this.WIDTH = 600; }
@@ -2521,12 +2507,13 @@ class BitMessage {
 
 class BitDialogComponent extends BaseComponent {
     static { this.MENSAJE_VOID = "No hi ha dades per mostrar"; }
-    constructor(bitMessageService, translateService) {
+    constructor() {
         super();
-        this.bitMessageService = bitMessageService;
-        this.translateService = translateService;
+        this.bitMessageService = inject(BitMessageService);
+        this.translateService = inject(TranslateService);
         this.display = false;
         this.height = 200;
+        const bitMessageService = this.bitMessageService;
         //console.log("DialogComponent contructor(" + bitMessageService  + ")");
         //Nos suscribimos a la espera de que envíen mensajes
         bitMessageService.observableMessages.pipe(takeUntil(this.destroy$)).subscribe((message) => {
@@ -2624,7 +2611,7 @@ class BitDialogComponent extends BaseComponent {
             return '<span class="' + cls + '">' + match + "</span>";
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDialogComponent, deps: [{ token: BitMessageService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDialogComponent, isStandalone: false, selector: "bit-dialog", usesInheritance: true, ngImport: i0, template: `
     @if (!isSeverityInfo) {
       <p-dialog
@@ -2677,7 +2664,7 @@ class BitDialogComponent extends BaseComponent {
         <pre [innerHTML]="syntaxHighlight(message.message)"></pre>
       </p-dialog>
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDialogComponent, decorators: [{
             type: Component,
@@ -2740,7 +2727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: BitMessageService }, { type: TranslateService }] });
+        }], ctorParameters: () => [] });
 
 const PADDING = "000000";
 class CantidadMonedaPipe {
@@ -2831,43 +2818,40 @@ class BitPajigatorComponent {
         this.onPageChange.emit(this.page());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitPajigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitPajigatorComponent, isStandalone: false, selector: "bit-pajigator", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, maxCurrentItems: { classPropertyName: "maxCurrentItems", publicName: "maxCurrentItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", itemsPerPage: "itemsPerPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, ngImport: i0, template: "<div [class]=\"paginator() ? 'pajigator-outer-container' : 'pajigator-outer-container-single-result'\">\n  <div class=\"pajigator-container\">\n    <div class=\"pajigator-results-container\">\n      <span class=\"pajigator-results-label\">{{\"bitnglibrary.footer.results\" | transloco}}</span>\n    @if (paginator()) {   \n      @if (maxCurrentItems() >= totalItems()) {\n        <span>{{totalItems() | cantidadMoneda:0}}</span>\n      }\n      @if (maxCurrentItems() < totalItems()) {\n        <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n      }\n    } @else {\n      <span>{{totalItems() | cantidadMoneda:0}}</span>\n    }\n    </div>\n  @if (paginator()) {  \n    <div class=\"pajigator-page-size\">\n      <div class=\"pajigator-page-size-label\">{{ \"bitnglibrary.footer.itemsPerPage\" | transloco }}</div>\n      <!-- appendTo=\"body\"--->\n      <p-select \n        appendTo=\"body\"\n        [options]=\"rowsPerPageOptions()\"\n        [ngModel]=\"itemsPerPage()\"\n        (ngModelChange)=\"changeItemsPerpage($event)\"></p-select>\n    </div>\n    <div class=\"pajigator-range-actions\">\n      @if (showPageInfo()) {\n        <div class=\"pajigator-range-label\"> {{ \"bitnglibrary.footer.page\" | transloco }} {{page()}} de {{maxPages()}} </div>\n      }\n      <button (click)=\"changePage(-1)\" type=\"button\" [disabled]=\"!showLeftNavigationButton()\" pButton pRipple icon=\"pi pi-angle-left\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n      <button (click)=\"changePage(1)\" type=\"button\" [disabled]=\"!showRightNavigationButton()\" pButton pRipple icon=\"pi pi-angle-right\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n    </div>\n  }  \n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i4.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: CantidadMonedaPipe, name: "cantidadMoneda" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitPajigatorComponent, isStandalone: false, selector: "bit-pajigator", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, maxCurrentItems: { classPropertyName: "maxCurrentItems", publicName: "maxCurrentItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", itemsPerPage: "itemsPerPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, ngImport: i0, template: "<div [class]=\"paginator() ? 'pajigator-outer-container' : 'pajigator-outer-container-single-result'\">\n  <div class=\"pajigator-container\">\n    <div class=\"pajigator-results-container\">\n      <span class=\"pajigator-results-label\">{{\"bitnglibrary.footer.results\" | transloco}}</span>\n    @if (paginator()) {   \n      @if (maxCurrentItems() >= totalItems()) {\n        <span>{{totalItems() | cantidadMoneda:0}}</span>\n      }\n      @if (maxCurrentItems() < totalItems()) {\n        <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n      }\n    } @else {\n      <span>{{totalItems() | cantidadMoneda:0}}</span>\n    }\n    </div>\n  @if (paginator()) {  \n    <div class=\"pajigator-page-size\">\n      <div class=\"pajigator-page-size-label\">{{ \"bitnglibrary.footer.itemsPerPage\" | transloco }}</div>\n      <!-- appendTo=\"body\"--->\n      <p-select appendTo=\"body\"\n        [options]=\"rowsPerPageOptions()\"\n        [ngModel]=\"itemsPerPage()\"\n        (ngModelChange)=\"changeItemsPerpage($event)\" />\n    </div>\n    <div class=\"pajigator-range-actions\">\n      @if (showPageInfo()) {\n        <div class=\"pajigator-range-label\"> {{ \"bitnglibrary.footer.page\" | transloco }} {{page()}} de {{maxPages()}} </div>\n      }\n      <button (click)=\"changePage(-1)\" type=\"button\" [disabled]=\"!showLeftNavigationButton()\" pButton pRipple icon=\"pi pi-angle-left\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n      <button (click)=\"changePage(1)\" type=\"button\" [disabled]=\"!showRightNavigationButton()\" pButton pRipple icon=\"pi pi-angle-right\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n    </div>\n  }  \n  </div>\n</div>", 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$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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i4.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: CantidadMonedaPipe, name: "cantidadMoneda" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitPajigatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bit-pajigator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [class]=\"paginator() ? 'pajigator-outer-container' : 'pajigator-outer-container-single-result'\">\n  <div class=\"pajigator-container\">\n    <div class=\"pajigator-results-container\">\n      <span class=\"pajigator-results-label\">{{\"bitnglibrary.footer.results\" | transloco}}</span>\n    @if (paginator()) {   \n      @if (maxCurrentItems() >= totalItems()) {\n        <span>{{totalItems() | cantidadMoneda:0}}</span>\n      }\n      @if (maxCurrentItems() < totalItems()) {\n        <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n      }\n    } @else {\n      <span>{{totalItems() | cantidadMoneda:0}}</span>\n    }\n    </div>\n  @if (paginator()) {  \n    <div class=\"pajigator-page-size\">\n      <div class=\"pajigator-page-size-label\">{{ \"bitnglibrary.footer.itemsPerPage\" | transloco }}</div>\n      <!-- appendTo=\"body\"--->\n      <p-select \n        appendTo=\"body\"\n        [options]=\"rowsPerPageOptions()\"\n        [ngModel]=\"itemsPerPage()\"\n        (ngModelChange)=\"changeItemsPerpage($event)\"></p-select>\n    </div>\n    <div class=\"pajigator-range-actions\">\n      @if (showPageInfo()) {\n        <div class=\"pajigator-range-label\"> {{ \"bitnglibrary.footer.page\" | transloco }} {{page()}} de {{maxPages()}} </div>\n      }\n      <button (click)=\"changePage(-1)\" type=\"button\" [disabled]=\"!showLeftNavigationButton()\" pButton pRipple icon=\"pi pi-angle-left\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n      <button (click)=\"changePage(1)\" type=\"button\" [disabled]=\"!showRightNavigationButton()\" pButton pRipple icon=\"pi pi-angle-right\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n    </div>\n  }  \n  </div>\n</div>" }]
+            args: [{ selector: 'bit-pajigator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [class]=\"paginator() ? 'pajigator-outer-container' : 'pajigator-outer-container-single-result'\">\n  <div class=\"pajigator-container\">\n    <div class=\"pajigator-results-container\">\n      <span class=\"pajigator-results-label\">{{\"bitnglibrary.footer.results\" | transloco}}</span>\n    @if (paginator()) {   \n      @if (maxCurrentItems() >= totalItems()) {\n        <span>{{totalItems() | cantidadMoneda:0}}</span>\n      }\n      @if (maxCurrentItems() < totalItems()) {\n        <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n      }\n    } @else {\n      <span>{{totalItems() | cantidadMoneda:0}}</span>\n    }\n    </div>\n  @if (paginator()) {  \n    <div class=\"pajigator-page-size\">\n      <div class=\"pajigator-page-size-label\">{{ \"bitnglibrary.footer.itemsPerPage\" | transloco }}</div>\n      <!-- appendTo=\"body\"--->\n      <p-select appendTo=\"body\"\n        [options]=\"rowsPerPageOptions()\"\n        [ngModel]=\"itemsPerPage()\"\n        (ngModelChange)=\"changeItemsPerpage($event)\" />\n    </div>\n    <div class=\"pajigator-range-actions\">\n      @if (showPageInfo()) {\n        <div class=\"pajigator-range-label\"> {{ \"bitnglibrary.footer.page\" | transloco }} {{page()}} de {{maxPages()}} </div>\n      }\n      <button (click)=\"changePage(-1)\" type=\"button\" [disabled]=\"!showLeftNavigationButton()\" pButton pRipple icon=\"pi pi-angle-left\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n      <button (click)=\"changePage(1)\" type=\"button\" [disabled]=\"!showRightNavigationButton()\" pButton pRipple icon=\"pi pi-angle-right\" class=\"p-button-lg p-button-rounded p-button-text\"></button>\n    </div>\n  }  \n  </div>\n</div>" }]
         }] });
 
 class BitHelpComponent {
-    constructor(ayudaService, changeDetectorRef) {
-        this.ayudaService = ayudaService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.ayuda = null;
-        // cada vez que el servicio emite una nueva ayuda, la mostramos
-        ayudaService.mostrar.subscribe(ayuda => {
-            console.log("Mostrando ayuda", ayuda);
-            this.ayuda = ayuda;
-            this.changeDetectorRef.detectChanges();
+    constructor() {
+        this.ayudaService = inject(AyudaService);
+        this.ayuda = linkedSignal({
+            source: this.ayudaService.mostrar,
+            computation: (newAyuda, _) => {
+                console.log("newAyuda", newAyuda);
+                return newAyuda;
+            }
         });
+        this.mostrarAyuda = computed(() => this.ayuda() != null, ...(ngDevMode ? [{ debugName: "mostrarAyuda" }] : []));
     }
     /** Oculta el modal con los avisos */
     hideAyuda() {
-        this.ayuda = null;
+        this.ayuda.set(null);
     }
-    get ayudaPressed() {
-        return this.ayuda != null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitHelpComponent, deps: [{ token: AyudaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitHelpComponent, isStandalone: false, selector: "bit-help", ngImport: i0, template: `
-    @if (ayudaPressed) {
+    @if (mostrarAyuda()) {
       <div class="ventana-ayuda">
         <div class="ayuda-header">
-          {{ ayuda.header }}
+          {{ ayuda().header }}
           <span class="fa fa-close" (click)="hideAyuda()"></span>
         </div>
         <div class="ayuda-body">
-          <p class="ayuda-subtitulo" [innerHTML]="ayuda.title"></p>
-          <p [innerHTML]="ayuda.body"></p>
+          <p class="ayuda-subtitulo" [innerHTML]="ayuda().title"></p>
+          <p [innerHTML]="ayuda().body"></p>
         </div>
       </div>
     }
@@ -2879,15 +2863,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     selector: "bit-help",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (ayudaPressed) {
+    @if (mostrarAyuda()) {
       <div class="ventana-ayuda">
         <div class="ayuda-header">
-          {{ ayuda.header }}
+          {{ ayuda().header }}
           <span class="fa fa-close" (click)="hideAyuda()"></span>
         </div>
         <div class="ayuda-body">
-          <p class="ayuda-subtitulo" [innerHTML]="ayuda.title"></p>
-          <p [innerHTML]="ayuda.body"></p>
+          <p class="ayuda-subtitulo" [innerHTML]="ayuda().title"></p>
+          <p [innerHTML]="ayuda().body"></p>
         </div>
       </div>
     }
@@ -2896,11 +2880,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: AyudaService }, { type: i0.ChangeDetectorRef }] });
+        }] });
 
 class BitFooterMessagesComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
+    constructor() {
+        this.translateService = inject(TranslateService);
         this.status = input(PageStatus.Init, ...(ngDevMode ? [{ debugName: "status" }] : [])); // Determina en qué estado está la página: PageStatus.Init, PageStatus.SEARCHING, PageStatus.FINISH_SEARCH
         this.maxCurrentItems = input(...(ngDevMode ? [undefined, { debugName: "maxCurrentItems" }] : []));
         this.totalItems = input(...(ngDevMode ? [undefined, { debugName: "totalItems" }] : []));
@@ -2989,13 +2973,13 @@ class BitFooterMessagesComponent {
             return "";
         }, ...(ngDevMode ? [{ debugName: "message" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitFooterMessagesComponent, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: BitFooterMessagesComponent, isStandalone: false, selector: "bit-footer-messages", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, maxCurrentItems: { classPropertyName: "maxCurrentItems", publicName: "maxCurrentItems", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, typeFooter: { classPropertyName: "typeFooter", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div [class]=\"getStyle()\">\n    <i class=\"fa fa-info\"></i>\n    <span>{{message()}}</span>\n  </div>\n\n  <bit-help></bit-help>\n</div>", dependencies: [{ kind: "component", type: BitHelpComponent, selector: "bit-help" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitFooterMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: BitFooterMessagesComponent, isStandalone: false, selector: "bit-footer-messages", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, maxCurrentItems: { classPropertyName: "maxCurrentItems", publicName: "maxCurrentItems", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, typeFooter: { classPropertyName: "typeFooter", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div [class]=\"getStyle()\">\n    <i class=\"fa fa-info\"></i>\n    <span>{{message()}}</span>\n  </div>\n\n  <bit-help />\n</div>", dependencies: [{ kind: "component", type: BitHelpComponent, selector: "bit-help" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitFooterMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bit-footer-messages', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\n  <div [class]=\"getStyle()\">\n    <i class=\"fa fa-info\"></i>\n    <span>{{message()}}</span>\n  </div>\n\n  <bit-help></bit-help>\n</div>" }]
-        }], ctorParameters: () => [{ type: TranslateService }] });
+            args: [{ selector: 'bit-footer-messages', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div>\n  <div [class]=\"getStyle()\">\n    <i class=\"fa fa-info\"></i>\n    <span>{{message()}}</span>\n  </div>\n\n  <bit-help />\n</div>" }]
+        }] });
 
 /**
  * Componente que muestra un paginador en la sección footer.
@@ -3043,61 +3027,55 @@ class BitFooterComponent {
         this.onNewPageSize.emit(pageSize);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitFooterComponent, isStandalone: false, selector: "bit-footer", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, mostrarAvisos: { classPropertyName: "mostrarAvisos", publicName: "mostrarAvisos", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, typeFooter: { classPropertyName: "typeFooter", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange", onNewPageSize: "onNewPageSize" }, ngImport: i0, template: "<footer [class]=\"getStyle()\">\n\n  @if (showScroll()) {\n    <div class=\"scroll-outer-container\">\n      <div class=\"pajigator-container\">\n        <label>{{\"bitnglibrary.footer.results\" | transloco}}</label>\n        @if (maxCurrentItems() >= totalItems()) {\n          <span>{{totalItems()}}</span>\n        }\n        @if (maxCurrentItems() < totalItems()) {\n          <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPajigator()) {\n    <bit-pajigator\n      [paginator]=\"paginator()\"\n      [totalItems]=\"totalItems()\"\n      [page]=\"page()\"\n      [itemsPerPage]=\"itemsPerPage()\"\n      [rowsPerPageOptions]=\"[baseItemsPerPage,baseItemsPerPage*2,baseItemsPerPage*4,baseItemsPerPage*10,baseItemsPerPage*50]\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      (onPageChange)=\"pageChange($event)\"\n      (onPageSizeChange)=\"pageSizeChange($event)\"></bit-pajigator>\n  }\n\n  @if (mostrarAvisos()) {\n    <bit-footer-messages\n      [type]=\"typeFooter()\"\n      [status]=\"status()\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      [totalItems]=\"totalItems()\"></bit-footer-messages>\n  }\n\n</footer>\n", dependencies: [{ kind: "component", type: BitPajigatorComponent, selector: "bit-pajigator", inputs: ["paginator", "page", "totalItems", "rowsPerPageOptions", "itemsPerPage", "maxCurrentItems"], outputs: ["pageChange", "itemsPerPageChange", "onPageChange", "onPageSizeChange"] }, { kind: "component", type: BitFooterMessagesComponent, selector: "bit-footer-messages", inputs: ["status", "maxCurrentItems", "totalItems", "type"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitFooterComponent, isStandalone: false, selector: "bit-footer", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, mostrarAvisos: { classPropertyName: "mostrarAvisos", publicName: "mostrarAvisos", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, typeFooter: { classPropertyName: "typeFooter", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange", onNewPageSize: "onNewPageSize" }, ngImport: i0, template: "<footer [class]=\"getStyle()\">\n\n  @if (showScroll()) {\n    <div class=\"scroll-outer-container\">\n      <div class=\"pajigator-container\">\n        <label>{{\"bitnglibrary.footer.results\" | transloco}}</label>\n        @if (maxCurrentItems() >= totalItems()) {\n          <span>{{totalItems()}}</span>\n        }\n        @if (maxCurrentItems() < totalItems()) {\n          <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPajigator()) {\n    <bit-pajigator [paginator]=\"paginator()\"\n      [totalItems]=\"totalItems()\"\n      [page]=\"page()\"\n      [itemsPerPage]=\"itemsPerPage()\"\n      [rowsPerPageOptions]=\"[baseItemsPerPage,baseItemsPerPage*2,baseItemsPerPage*4,baseItemsPerPage*10,baseItemsPerPage*50]\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      (onPageChange)=\"pageChange($event)\"\n      (onPageSizeChange)=\"pageSizeChange($event)\" />\n  }\n\n  @if (mostrarAvisos()) {\n    <bit-footer-messages [type]=\"typeFooter()\"\n      [status]=\"status()\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      [totalItems]=\"totalItems()\" />\n  }\n\n</footer>\n", dependencies: [{ kind: "component", type: BitPajigatorComponent, selector: "bit-pajigator", inputs: ["paginator", "page", "totalItems", "rowsPerPageOptions", "itemsPerPage", "maxCurrentItems"], outputs: ["pageChange", "itemsPerPageChange", "onPageChange", "onPageSizeChange"] }, { kind: "component", type: BitFooterMessagesComponent, selector: "bit-footer-messages", inputs: ["status", "maxCurrentItems", "totalItems", "type"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-footer", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<footer [class]=\"getStyle()\">\n\n  @if (showScroll()) {\n    <div class=\"scroll-outer-container\">\n      <div class=\"pajigator-container\">\n        <label>{{\"bitnglibrary.footer.results\" | transloco}}</label>\n        @if (maxCurrentItems() >= totalItems()) {\n          <span>{{totalItems()}}</span>\n        }\n        @if (maxCurrentItems() < totalItems()) {\n          <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPajigator()) {\n    <bit-pajigator\n      [paginator]=\"paginator()\"\n      [totalItems]=\"totalItems()\"\n      [page]=\"page()\"\n      [itemsPerPage]=\"itemsPerPage()\"\n      [rowsPerPageOptions]=\"[baseItemsPerPage,baseItemsPerPage*2,baseItemsPerPage*4,baseItemsPerPage*10,baseItemsPerPage*50]\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      (onPageChange)=\"pageChange($event)\"\n      (onPageSizeChange)=\"pageSizeChange($event)\"></bit-pajigator>\n  }\n\n  @if (mostrarAvisos()) {\n    <bit-footer-messages\n      [type]=\"typeFooter()\"\n      [status]=\"status()\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      [totalItems]=\"totalItems()\"></bit-footer-messages>\n  }\n\n</footer>\n" }]
+            args: [{ selector: "bit-footer", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<footer [class]=\"getStyle()\">\n\n  @if (showScroll()) {\n    <div class=\"scroll-outer-container\">\n      <div class=\"pajigator-container\">\n        <label>{{\"bitnglibrary.footer.results\" | transloco}}</label>\n        @if (maxCurrentItems() >= totalItems()) {\n          <span>{{totalItems()}}</span>\n        }\n        @if (maxCurrentItems() < totalItems()) {\n          <span>{{maxCurrentItems()}} / {{totalItems()}}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPajigator()) {\n    <bit-pajigator [paginator]=\"paginator()\"\n      [totalItems]=\"totalItems()\"\n      [page]=\"page()\"\n      [itemsPerPage]=\"itemsPerPage()\"\n      [rowsPerPageOptions]=\"[baseItemsPerPage,baseItemsPerPage*2,baseItemsPerPage*4,baseItemsPerPage*10,baseItemsPerPage*50]\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      (onPageChange)=\"pageChange($event)\"\n      (onPageSizeChange)=\"pageSizeChange($event)\" />\n  }\n\n  @if (mostrarAvisos()) {\n    <bit-footer-messages [type]=\"typeFooter()\"\n      [status]=\"status()\"\n      [maxCurrentItems]=\"maxCurrentItems()\"\n      [totalItems]=\"totalItems()\" />\n  }\n\n</footer>\n" }]
         }] });
 
 class BitBotonAyudaComponent {
-    constructor(ayudaService) {
-        this.ayudaService = ayudaService;
-        this.boton = false; // show a little [?] or a full button
-        this.extraClass = ""; // extra CSS classes for HTML component
+    constructor() {
+        this.ayudaService = inject(AyudaService);
+        this.ayuda = input(undefined, ...(ngDevMode ? [{ debugName: "ayuda" }] : []));
+        this.boton = input(false, ...(ngDevMode ? [{ debugName: "boton" }] : [])); // show a little [?] or a full button
+        this.extraClass = input("", ...(ngDevMode ? [{ debugName: "extraClass" }] : [])); // extra CSS classes for HTML component
+        this.buttonSize = input(undefined, ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
     }
     mostrarAyuda() {
-        this.ayudaService.mostrarAyuda(this.ayuda);
+        this.ayudaService.mostrarAyuda(this.ayuda());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBotonAyudaComponent, deps: [{ token: AyudaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitBotonAyudaComponent, isStandalone: false, selector: "bit-boton-ayuda", inputs: { ayuda: "ayuda", boton: "boton", extraClass: "extraClass", buttonSize: "buttonSize" }, ngImport: i0, template: `
-    @if (boton) {
-      <p-button type="button" (click)="mostrarAyuda()" [size]="buttonSize" [ngClass]="'p-button-outlined p-button-secondary ' + extraClass">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBotonAyudaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitBotonAyudaComponent, isStandalone: false, selector: "bit-boton-ayuda", inputs: { ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, boton: { classPropertyName: "boton", publicName: "boton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (boton()) {
+      <p-button type="button" (click)="mostrarAyuda()" [size]="buttonSize()" [ngClass]="'p-button-outlined p-button-secondary ' + extraClass()">
         {{ "bitnglibrary.help" | transloco }}&nbsp;&nbsp;<span class="fa fa-life-ring"></span>
       </p-button>
     }
 
-    @if (!boton) {
-      <i [ngClass]="'btn-ayuda fa fa-question ' + extraClass" (click)="mostrarAyuda()"></i>
+    @if (!boton()) {
+      <i [ngClass]="'btn-ayuda fa fa-question ' + extraClass()" (click)="mostrarAyuda()"></i>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitBotonAyudaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "bit-boton-ayuda",
                     template: `
-    @if (boton) {
-      <p-button type="button" (click)="mostrarAyuda()" [size]="buttonSize" [ngClass]="'p-button-outlined p-button-secondary ' + extraClass">
+    @if (boton()) {
+      <p-button type="button" (click)="mostrarAyuda()" [size]="buttonSize()" [ngClass]="'p-button-outlined p-button-secondary ' + extraClass()">
         {{ "bitnglibrary.help" | transloco }}&nbsp;&nbsp;<span class="fa fa-life-ring"></span>
       </p-button>
     }
 
-    @if (!boton) {
-      <i [ngClass]="'btn-ayuda fa fa-question ' + extraClass" (click)="mostrarAyuda()"></i>
+    @if (!boton()) {
+      <i [ngClass]="'btn-ayuda fa fa-question ' + extraClass()" (click)="mostrarAyuda()"></i>
     }
   `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: AyudaService }], propDecorators: { ayuda: [{
-                type: Input
-            }], boton: [{
-                type: Input
-            }], extraClass: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Convierte un map de acciones del toolbar en un array de acciones pero conteniendo
@@ -3136,13 +3114,34 @@ class BitToolbarComponent extends BaseComponent {
     static { this.DELETE_BUTTON = "delete"; }
     static { this.ADD_BUTTON = "add"; }
     static { this.HELP_BUTTON = "help"; }
-    constructor(translateService) {
+    constructor() {
         super();
-        this.translateService = translateService;
+        this.translateService = inject(TranslateService);
         this.mostrar = false;
-        this.femenino = false; // género femenino (para los nombres de botones) o no
-        this.otherActionsDropdown = false; // determina si las "other actions" deben mostrarse en línea o como un desplegable
-        this.onToolbarButtonPressed = new EventEmitter();
+        this.toolbar = input(...(ngDevMode ? [undefined, { debugName: "toolbar" }] : []));
+        this.ayuda = input(...(ngDevMode ? [undefined, { debugName: "ayuda" }] : [])); // clave de la ayuda contextual que mostrar para su botón
+        this.femenino = input(false, ...(ngDevMode ? [{ debugName: "femenino" }] : [])); // género femenino (para los nombres de botones) o no
+        this.buttonSize = input(...(ngDevMode ? [undefined, { debugName: "buttonSize" }] : [])); // tamaño de los botones, por defecto normal
+        this.otherActionsDropdown = input(false, ...(ngDevMode ? [{ debugName: "otherActionsDropdown" }] : [])); // determina si las "other actions" deben mostrarse en línea o como un desplegable
+        this.onToolbarButtonPressed = output();
+        this.mostrarOtherActionsEnDesplegable = computed(() => {
+            // calcular si las other actions deben mostrarse en desplegable
+            // (se ha pedido asi y hay más de una)
+            let otherActionsVisibles = 0;
+            for (let key in this.toolbar()) {
+                const toolbar = this.toolbar();
+                if (toolbar[key].otherAction && toolbar[key].visible) {
+                    otherActionsVisibles++;
+                }
+            }
+            return this.otherActionsDropdown() && otherActionsVisibles > 1;
+        }, ...(ngDevMode ? [{ debugName: "mostrarOtherActionsEnDesplegable" }] : []));
+        this.itemsOtherActions = computed(() => {
+            if (this.mostrarOtherActionsEnDesplegable()) {
+                return this.getOtherActionsDropdownModel();
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "itemsOtherActions" }] : []));
         this.translateService.selectTranslate("toolbar", {}, "bitnglibrary", true)
             .pipe(takeUntil(this.destroy$))
             .subscribe((translations) => {
@@ -3150,16 +3149,20 @@ class BitToolbarComponent extends BaseComponent {
         });
     }
     enable(button) {
-        return this.toolbar && this.toolbar[button] && this.toolbar[button].enable;
+        const toolbar = this.toolbar();
+        return toolbar && toolbar[button] && toolbar[button].enable;
     }
     visible(button) {
-        return this.toolbar && this.toolbar[button] && this.toolbar[button].visible;
+        const toolbar = this.toolbar();
+        return toolbar && toolbar[button] && toolbar[button].visible;
     }
     label(button, defaultLabel) {
-        return (this.toolbar && this.toolbar[button] && this.toolbar[button].label) || defaultLabel;
+        const toolbar = this.toolbar();
+        return (toolbar && toolbar[button] && toolbar[button].label) || defaultLabel;
     }
     estilo(button, defaultValue) {
-        return (this.toolbar && this.toolbar[button] && this.toolbar[button].estilo) || defaultValue || "fa fa-balance-spinner";
+        const toolbar = this.toolbar();
+        return (toolbar && toolbar[button] && toolbar[button].estilo) || defaultValue || "fa fa-balance-spinner";
     }
     showFilter() {
         this.onToolbarButtonPressed.emit(BitToolbarComponent.FILTER_BUTTON);
@@ -3185,34 +3188,14 @@ class BitToolbarComponent extends BaseComponent {
     otherAction(button) {
         this.onToolbarButtonPressed.emit(button.action);
     }
-    /** escuchamos cuando la toolbar cambia para ajustar las other Actions */
-    ngOnChanges(changes) {
-        for (let propName in changes) {
-            let changedProp = changes[propName];
-            if (propName === "toolbar") {
-                this.toolbar = changedProp.currentValue;
-                // calcular si las other actions deben mostrarse en desplegable
-                // (se ha pedido asi y hay más de una)
-                let otherActionsVisibles = 0;
-                for (let key in this.toolbar) {
-                    if (this.toolbar[key].otherAction && this.toolbar[key].visible) {
-                        otherActionsVisibles++;
-                    }
-                }
-                this.mostrarOtherActionsEnDesplegable = this.otherActionsDropdown && otherActionsVisibles > 1;
-                if (this.mostrarOtherActionsEnDesplegable) {
-                    this.itemsOtherActions = this.getOtherActionsDropdownModel();
-                }
-            }
-        }
-    }
     // Recorremos el toolbar y devolvemos un array con las acciones que tengan la propiedad otherAction a true,
     // transformadas a MenuItem, para poder mostrarlas en el desplegable de SplitButton
     getOtherActionsDropdownModel() {
         let actions = [];
-        for (let key in this.toolbar) {
-            if (this.toolbar[key].otherAction) {
-                let toolbarItem = this.toolbar[key]; // capture the current toolbar item
+        for (let key in this.toolbar()) {
+            const toolbar = this.toolbar();
+            if (toolbar[key].otherAction) {
+                let toolbarItem = toolbar[key]; // capture the current toolbar item
                 actions.push({
                     label: this.translations[toolbarItem.label],
                     icon: toolbarItem.estilo,
@@ -3223,36 +3206,28 @@ class BitToolbarComponent extends BaseComponent {
         }
         return actions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitToolbarComponent, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitToolbarComponent, isStandalone: false, selector: "bit-toolbar", inputs: { toolbar: "toolbar", ayuda: "ayuda", femenino: "femenino", buttonSize: "buttonSize", otherActionsDropdown: "otherActionsDropdown" }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\n<div class=\"contenedor-toolbar\">\n\n  @if (mostrarOtherActionsEnDesplegable) {\n    @if (otherActionsDropdown) {\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions\" />\n    }\n  }\n\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\n  @if (!mostrarOtherActionsEnDesplegable) {\n    @for (button of (toolbar | otherToolbarAction); track button) {\n      @if (button.visible) {\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\n      }\n    }\n  }\n  <!-- acciones estandar -->\n  @if (visible('new')) {\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{(femenino ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\n  }\n  @if (visible('add')) {\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\n  }\n\n  @if (visible('export')) {\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\n  }\n  @if (visible('save')) {\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\n  }\n  @if (visible('delete')) {\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\n  }\n  @if (visible('print')) {\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\n  }\n  @if (ayuda) {\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda\" [buttonSize]=\"buttonSize\"></bit-boton-ayuda>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i3$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$3.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: BitBotonAyudaComponent, selector: "bit-boton-ayuda", inputs: ["ayuda", "boton", "extraClass", "buttonSize"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: OtherToolbarActionPipe, name: "otherToolbarAction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitToolbarComponent, isStandalone: false, selector: "bit-toolbar", inputs: { toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, femenino: { classPropertyName: "femenino", publicName: "femenino", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, otherActionsDropdown: { classPropertyName: "otherActionsDropdown", publicName: "otherActionsDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, usesInheritance: true, ngImport: i0, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\n<div class=\"contenedor-toolbar\">\n\n  @if (mostrarOtherActionsEnDesplegable()) {\n    @if (otherActionsDropdown()) {\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions()\" />\n    }\n  }\n\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\n  @if (!mostrarOtherActionsEnDesplegable()) {\n    @for (button of (toolbar() | otherToolbarAction); track button) {\n      @if (button.visible) {\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\n      }\n    }\n  }\n  <!-- acciones estandar -->\n  @if (visible('new')) {\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\n  }\n  @if (visible('add')) {\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\n  }\n\n  @if (visible('export')) {\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\n  }\n  @if (visible('save')) {\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\n  }\n  @if (visible('delete')) {\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\n  }\n  @if (visible('print')) {\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\n  }\n  @if (ayuda()) {\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: BitBotonAyudaComponent, selector: "bit-boton-ayuda", inputs: ["ayuda", "boton", "extraClass", "buttonSize"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: OtherToolbarActionPipe, name: "otherToolbarAction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-toolbar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\n<div class=\"contenedor-toolbar\">\n\n  @if (mostrarOtherActionsEnDesplegable) {\n    @if (otherActionsDropdown) {\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions\" />\n    }\n  }\n\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\n  @if (!mostrarOtherActionsEnDesplegable) {\n    @for (button of (toolbar | otherToolbarAction); track button) {\n      @if (button.visible) {\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\n      }\n    }\n  }\n  <!-- acciones estandar -->\n  @if (visible('new')) {\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{(femenino ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\n  }\n  @if (visible('add')) {\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\n  }\n\n  @if (visible('export')) {\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\n  }\n  @if (visible('save')) {\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\n  }\n  @if (visible('delete')) {\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\n  }\n  @if (visible('print')) {\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\n  }\n  @if (ayuda) {\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda\" [buttonSize]=\"buttonSize\"></bit-boton-ayuda>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }], propDecorators: { toolbar: [{
-                type: Input
-            }], ayuda: [{
-                type: Input
-            }], femenino: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], otherActionsDropdown: [{
-                type: Input
-            }], onToolbarButtonPressed: [{
-                type: Output
-            }] } });
+            args: [{ selector: "bit-toolbar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\n<div class=\"contenedor-toolbar\">\n\n  @if (mostrarOtherActionsEnDesplegable()) {\n    @if (otherActionsDropdown()) {\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions()\" />\n    }\n  }\n\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\n  @if (!mostrarOtherActionsEnDesplegable()) {\n    @for (button of (toolbar() | otherToolbarAction); track button) {\n      @if (button.visible) {\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\n      }\n    }\n  }\n  <!-- acciones estandar -->\n  @if (visible('new')) {\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\n  }\n  @if (visible('add')) {\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\n  }\n\n  @if (visible('export')) {\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\n  }\n  @if (visible('save')) {\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\n  }\n  @if (visible('delete')) {\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\n  }\n  @if (visible('print')) {\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\n  }\n  @if (ayuda()) {\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * Componente que muestra miga de pan y toolbar
  */
 class BitHeaderComponent {
     constructor() {
-        this.toolbar = {};
-        this.noToolbar = false;
-        this.otherActionsDropdown = false; // determina si las "other actions" deben mostrarse en línea o como un desplegable
-        this.femenino = false; // género femenino (para los nombres de botones) o no
-        this.onToolbarButtonPressed = new EventEmitter();
+        this.toolbar = input({}, ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
+        this.noToolbar = input(false, ...(ngDevMode ? [{ debugName: "noToolbar" }] : []));
+        this.otherActionsDropdown = input(false, ...(ngDevMode ? [{ debugName: "otherActionsDropdown" }] : [])); // determina si las "other actions" deben mostrarse en línea o como un desplegable
+        this.breadcrumb = input(undefined, ...(ngDevMode ? [{ debugName: "breadcrumb" }] : []));
+        this.masacciones = input(undefined, ...(ngDevMode ? [{ debugName: "masacciones" }] : []));
+        this.colsBreadcrumb = input(undefined, ...(ngDevMode ? [{ debugName: "colsBreadcrumb" }] : []));
+        this.femenino = input(false, ...(ngDevMode ? [{ debugName: "femenino" }] : [])); // género femenino (para los nombres de botones) o no
+        this.ayuda = input(undefined, ...(ngDevMode ? [{ debugName: "ayuda" }] : [])); // clave de la ayuda contextual para la botonera
+        this.onToolbarButtonPressed = output();
     }
     /** Tenemos que capturar el evento y volver a subirlo, por diseño Angular2 no permite enviar un evento de un nieto a su abuelo, solo
      * de hijo a padre
@@ -3261,101 +3236,61 @@ class BitHeaderComponent {
         this.onToolbarButtonPressed.emit(button);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitHeaderComponent, isStandalone: false, selector: "bit-header", inputs: { toolbar: "toolbar", noToolbar: "noToolbar", otherActionsDropdown: "otherActionsDropdown", breadcrumb: "breadcrumb", masacciones: "masacciones", colsBreadcrumb: "colsBreadcrumb", femenino: "femenino", ayuda: "ayuda" }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, ngImport: i0, template: "<!-- <div class=\"grid mt-3 mb-3\">\n<div class=\"col-12 lg:col-4 sm:col-4 caja-breadcrumb\"> -->\n  <!-- ruta de donde nos encontramos (miga de pan) -->\n  <!-- <bit-breadcrumb *ngIf=\"breadcrumb\" [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n</div>\n<div *ngIf=\"noToolbar === false\"\n  class=\"col-12 lg:col-8 sm:col-8\"> -->\n  <!-- botonera de acciones -->\n  <!-- <bit-toolbar\n  [toolbar]=\"toolbar\"\n  [femenino]=\"femenino\"\n  [otherActionsDropdown]=\"otherActionsDropdown\"\n  [ayuda]=\"ayuda\"\n(onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n</div>\n</div> -->\n\n<div class=\"grid mt-3 mb-3\">\n  <div class=\"col-12 caja-breadcrumb\" [ngClass]=\"[colsBreadcrumb ? 'lg:col-' + colsBreadcrumb : 'lg:col-4']\">\n    <!-- ruta de donde nos encontramos (miga de pan) -->\n    @if (breadcrumb) {\n      <bit-breadcrumb [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n    }\n  </div>\n  @if (noToolbar === false) {\n    <div\n      class=\"col-12\" [ngClass]=\"[colsBreadcrumb ? 'lg:col-' + (12- colsBreadcrumb) : 'lg:col-8']\">\n      <!-- botonera de acciones -->\n      <bit-toolbar\n        [toolbar]=\"toolbar\"\n        [femenino]=\"femenino\"\n        [otherActionsDropdown]=\"otherActionsDropdown\"\n        [ayuda]=\"ayuda\"\n      (onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n    </div>\n  }\n</div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BitBreadCrumbComponent, selector: "bit-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: BitToolbarComponent, selector: "bit-toolbar", inputs: ["toolbar", "ayuda", "femenino", "buttonSize", "otherActionsDropdown"], outputs: ["onToolbarButtonPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitHeaderComponent, isStandalone: false, selector: "bit-header", inputs: { toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, noToolbar: { classPropertyName: "noToolbar", publicName: "noToolbar", isSignal: true, isRequired: false, transformFunction: null }, otherActionsDropdown: { classPropertyName: "otherActionsDropdown", publicName: "otherActionsDropdown", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb: { classPropertyName: "breadcrumb", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, masacciones: { classPropertyName: "masacciones", publicName: "masacciones", isSignal: true, isRequired: false, transformFunction: null }, colsBreadcrumb: { classPropertyName: "colsBreadcrumb", publicName: "colsBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, femenino: { classPropertyName: "femenino", publicName: "femenino", isSignal: true, isRequired: false, transformFunction: null }, ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, ngImport: i0, template: "<!-- <div class=\"grid mt-3 mb-3\">\n<div class=\"col-12 lg:col-4 sm:col-4 caja-breadcrumb\"> -->\n  <!-- ruta de donde nos encontramos (miga de pan) -->\n  <!-- <bit-breadcrumb *ngIf=\"breadcrumb\" [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n</div>\n<div *ngIf=\"noToolbar === false\"\n  class=\"col-12 lg:col-8 sm:col-8\"> -->\n  <!-- botonera de acciones -->\n  <!-- <bit-toolbar\n  [toolbar]=\"toolbar\"\n  [femenino]=\"femenino\"\n  [otherActionsDropdown]=\"otherActionsDropdown\"\n  [ayuda]=\"ayuda\"\n(onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n</div>\n</div> -->\n\n<div class=\"grid mt-3 mb-3\">\n  <div class=\"col-12 caja-breadcrumb\" [ngClass]=\"[colsBreadcrumb() ? 'lg:col-' + colsBreadcrumb() : 'lg:col-4']\">\n    <!-- ruta de donde nos encontramos (miga de pan) -->\n    @if (breadcrumb()) {\n      <bit-breadcrumb [breadcrumb]=\"breadcrumb()\" />\n    }\n  </div>\n  @if (noToolbar() === false) {\n    <div\n      class=\"col-12\" [ngClass]=\"[colsBreadcrumb() ? 'lg:col-' + (12- colsBreadcrumb()) : 'lg:col-8']\">\n      <!-- botonera de acciones -->\n      <bit-toolbar [toolbar]=\"toolbar()\"\n        [femenino]=\"femenino()\"\n        [otherActionsDropdown]=\"otherActionsDropdown()\"\n        [ayuda]=\"ayuda()\"\n      (onToolbarButtonPressed)=\"onTBPressed($event)\" />\n    </div>\n  }\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BitBreadCrumbComponent, selector: "bit-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: BitToolbarComponent, selector: "bit-toolbar", inputs: ["toolbar", "ayuda", "femenino", "buttonSize", "otherActionsDropdown"], outputs: ["onToolbarButtonPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-header", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <div class=\"grid mt-3 mb-3\">\n<div class=\"col-12 lg:col-4 sm:col-4 caja-breadcrumb\"> -->\n  <!-- ruta de donde nos encontramos (miga de pan) -->\n  <!-- <bit-breadcrumb *ngIf=\"breadcrumb\" [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n</div>\n<div *ngIf=\"noToolbar === false\"\n  class=\"col-12 lg:col-8 sm:col-8\"> -->\n  <!-- botonera de acciones -->\n  <!-- <bit-toolbar\n  [toolbar]=\"toolbar\"\n  [femenino]=\"femenino\"\n  [otherActionsDropdown]=\"otherActionsDropdown\"\n  [ayuda]=\"ayuda\"\n(onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n</div>\n</div> -->\n\n<div class=\"grid mt-3 mb-3\">\n  <div class=\"col-12 caja-breadcrumb\" [ngClass]=\"[colsBreadcrumb ? 'lg:col-' + colsBreadcrumb : 'lg:col-4']\">\n    <!-- ruta de donde nos encontramos (miga de pan) -->\n    @if (breadcrumb) {\n      <bit-breadcrumb [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n    }\n  </div>\n  @if (noToolbar === false) {\n    <div\n      class=\"col-12\" [ngClass]=\"[colsBreadcrumb ? 'lg:col-' + (12- colsBreadcrumb) : 'lg:col-8']\">\n      <!-- botonera de acciones -->\n      <bit-toolbar\n        [toolbar]=\"toolbar\"\n        [femenino]=\"femenino\"\n        [otherActionsDropdown]=\"otherActionsDropdown\"\n        [ayuda]=\"ayuda\"\n      (onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n    </div>\n  }\n</div>" }]
-        }], propDecorators: { toolbar: [{
-                type: Input
-            }], noToolbar: [{
-                type: Input
-            }], otherActionsDropdown: [{
-                type: Input
-            }], breadcrumb: [{
-                type: Input
-            }], masacciones: [{
-                type: Input
-            }], colsBreadcrumb: [{
-                type: Input
-            }], femenino: [{
-                type: Input
-            }], ayuda: [{
-                type: Input
-            }], onToolbarButtonPressed: [{
-                type: Output
-            }] } });
+            args: [{ selector: "bit-header", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <div class=\"grid mt-3 mb-3\">\n<div class=\"col-12 lg:col-4 sm:col-4 caja-breadcrumb\"> -->\n  <!-- ruta de donde nos encontramos (miga de pan) -->\n  <!-- <bit-breadcrumb *ngIf=\"breadcrumb\" [breadcrumb]=\"breadcrumb\"></bit-breadcrumb>\n</div>\n<div *ngIf=\"noToolbar === false\"\n  class=\"col-12 lg:col-8 sm:col-8\"> -->\n  <!-- botonera de acciones -->\n  <!-- <bit-toolbar\n  [toolbar]=\"toolbar\"\n  [femenino]=\"femenino\"\n  [otherActionsDropdown]=\"otherActionsDropdown\"\n  [ayuda]=\"ayuda\"\n(onToolbarButtonPressed)=\"onTBPressed($event)\"></bit-toolbar>\n</div>\n</div> -->\n\n<div class=\"grid mt-3 mb-3\">\n  <div class=\"col-12 caja-breadcrumb\" [ngClass]=\"[colsBreadcrumb() ? 'lg:col-' + colsBreadcrumb() : 'lg:col-4']\">\n    <!-- ruta de donde nos encontramos (miga de pan) -->\n    @if (breadcrumb()) {\n      <bit-breadcrumb [breadcrumb]=\"breadcrumb()\" />\n    }\n  </div>\n  @if (noToolbar() === false) {\n    <div\n      class=\"col-12\" [ngClass]=\"[colsBreadcrumb() ? 'lg:col-' + (12- colsBreadcrumb()) : 'lg:col-8']\">\n      <!-- botonera de acciones -->\n      <bit-toolbar [toolbar]=\"toolbar()\"\n        [femenino]=\"femenino()\"\n        [otherActionsDropdown]=\"otherActionsDropdown()\"\n        [ayuda]=\"ayuda()\"\n      (onToolbarButtonPressed)=\"onTBPressed($event)\" />\n    </div>\n  }\n</div>" }]
+        }] });
 
 class BitLoadingComponent {
-    constructor(generalUtils) {
-        this.generalUtils = generalUtils;
-        this.loading = false;
+    constructor() {
+        this.generalUtils = inject(GeneralUtils);
+        this.imageSource = input(undefined, ...(ngDevMode ? [{ debugName: "imageSource", alias: "source" }] : [{ alias: "source" }]));
+        this.loading = computed(() => this.generalUtils.loading() > 0, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         console.log("Constructor bitloading");
-        this.inProgressCount = 0;
-    }
-    ngOnInit() {
-        this.subscription = this.generalUtils.observableLoading
-            .pipe(map(value => (value == "start" ? true : false)), startWith(false), delay(0) //esto es para evitar el error ExpressionChangedAfterItHasBeenCheckedError. Mas info en: https://blog.angular-university.io/angular-debugging/
-        )
-            .subscribe(value => {
-            if (value) {
-                this.inProgressCount++;
-            }
-            else {
-                if (this.inProgressCount > 0)
-                    this.inProgressCount--;
-            }
-            this.loading = this.inProgressCount > 0;
-        });
     }
     ngOnDestroy() {
-        this.loading = false;
-        if (this.subscription != null)
-            this.subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitLoadingComponent, deps: [{ token: GeneralUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitLoadingComponent, isStandalone: false, selector: "bit-loading", inputs: { imageSource: ["source", "imageSource"] }, ngImport: i0, template: `
-  @if (loading) {
-    <div class="modal">
-      <div class="grid">
-        <div class="col-12 text-center">
-          <i class="pi pi-spin pi-spinner icono-loading"></i>
+        this.generalUtils.loading.set(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitLoadingComponent, isStandalone: false, selector: "bit-loading", inputs: { imageSource: { classPropertyName: "imageSource", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+      @if (loading()) {
+        <div class="modal">
+          <div class="grid">
+            <div class="col-12 text-center">
+              <i class="pi pi-spin pi-spinner icono-loading"></i>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  }
-  `, isInline: true }); }
+      }
+    `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitLoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "bit-loading",
                     template: `
-  @if (loading) {
-    <div class="modal">
-      <div class="grid">
-        <div class="col-12 text-center">
-          <i class="pi pi-spin pi-spinner icono-loading"></i>
+      @if (loading()) {
+        <div class="modal">
+          <div class="grid">
+            <div class="col-12 text-center">
+              <i class="pi pi-spin pi-spinner icono-loading"></i>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  }
-  `
-                    //styleUrls: ["bit-loading.component.css"]
-                    ,
+      }
+    `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: GeneralUtils }], propDecorators: { imageSource: [{
-                type: Input,
-                args: ["source"]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class BitNotificationToastComponent extends BaseComponent {
-    constructor(bitMessageService, primeMessageService, translateService) {
-        super();
-        this.bitMessageService = bitMessageService;
-        this.primeMessageService = primeMessageService;
-        this.translateService = translateService;
+    constructor() {
+        super(...arguments);
+        this.bitMessageService = inject(BitMessageService);
+        this.primeMessageService = inject(MessageService);
+        this.translateService = inject(TranslateService);
     }
     ngOnInit() {
         this.subscribeToNotifications();
@@ -3389,25 +3324,25 @@ class BitNotificationToastComponent extends BaseComponent {
     getLife(life) {
         return life ? life : DEFAULT_LIFE; // Si no se especifica el tiempo, usamos el valor por defecto
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationToastComponent, deps: [{ token: BitMessageService }, { token: i2$1.MessageService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitNotificationToastComponent, isStandalone: false, selector: "bit-notification-toast", usesInheritance: true, ngImport: i0, template: ` <p-toast key="notification" position="top-right"></p-toast> `, isInline: true, dependencies: [{ kind: "component", type: i3$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitNotificationToastComponent, isStandalone: false, selector: "bit-notification-toast", usesInheritance: true, ngImport: i0, template: ` <p-toast key="notification" position="top-right" /> `, isInline: true, dependencies: [{ kind: "component", type: i1$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationToastComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "bit-notification-toast",
-                    template: ` <p-toast key="notification" position="top-right"></p-toast> `,
+                    template: ` <p-toast key="notification" position="top-right" /> `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: BitMessageService }, { type: i2$1.MessageService }, { type: TranslateService }] });
+        }] });
 const DEFAULT_LIFE = 3000; // Tiempo por defecto en milisegundos para que se cierre la notificación
 
 class BitNotificationErrorComponent extends BaseComponent {
-    constructor(bitMessageService, primeMessageService, translateService) {
-        super();
-        this.bitMessageService = bitMessageService;
-        this.primeMessageService = primeMessageService;
-        this.translateService = translateService;
+    constructor() {
+        super(...arguments);
+        this.bitMessageService = inject(BitMessageService);
+        this.primeMessageService = inject(MessageService);
+        this.translateService = inject(TranslateService);
         this.escape = input(true, ...(ngDevMode ? [{ debugName: "escape" }] : []));
         this.closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
         this.messages = [];
@@ -3520,8 +3455,8 @@ class BitNotificationErrorComponent extends BaseComponent {
             return of([]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationErrorComponent, deps: [{ token: BitMessageService }, { token: i2$1.MessageService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: BitNotificationErrorComponent, isStandalone: false, selector: "bit-notification-error", inputs: { escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: ` <p-toast /> `, isInline: true, dependencies: [{ kind: "component", type: i3$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationErrorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: BitNotificationErrorComponent, isStandalone: false, selector: "bit-notification-error", inputs: { escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: ` <p-toast /> `, isInline: true, dependencies: [{ kind: "component", type: i1$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNotificationErrorComponent, decorators: [{
             type: Component,
@@ -3530,13 +3465,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     template: ` <p-toast /> `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: BitMessageService }, { type: i2$1.MessageService }, { type: TranslateService }] });
+        }] });
 
 class FocusRegisterDirective {
-    constructor(elRef, renderer, focusService) {
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.focusService = focusService;
+    constructor() {
+        this.elRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.focusService = inject(FocusService);
     }
     onFocus() {
         this.focusService.focus(this.elRef.nativeElement.id);
@@ -3544,7 +3479,7 @@ class FocusRegisterDirective {
     onBlur() {
         this.focusService.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FocusRegisterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FocusRegisterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: FocusRegisterDirective, isStandalone: false, selector: "input,select,textarea,bit-input,bit-select", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FocusRegisterDirective, decorators: [{
@@ -3554,7 +3489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FocusService }], propDecorators: { onFocus: [{
+        }], propDecorators: { onFocus: [{
                 type: HostListener,
                 args: ["focus"]
             }], onBlur: [{
@@ -3563,61 +3498,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             }] } });
 
 class BitNGUploadComponent {
-    constructor(generalUtils, changeDetector) {
-        this.generalUtils = generalUtils;
-        this.changeDetector = changeDetector;
-        this.inputAccept = "*";
-        this.onSuccess = new EventEmitter();
-        this.onError = new EventEmitter();
+    constructor() {
+        this.generalUtils = inject(GeneralUtils);
+        this.uploader = input.required(...(ngDevMode ? [{ debugName: "uploader" }] : []));
+        this.hasDropZone = input(...(ngDevMode ? [undefined, { debugName: "hasDropZone" }] : []));
+        this.hasQueue = input(...(ngDevMode ? [undefined, { debugName: "hasQueue" }] : []));
+        this.hasSingleUpload = input(...(ngDevMode ? [undefined, { debugName: "hasSingleUpload" }] : []));
+        this.hasMultipleUpload = input(...(ngDevMode ? [undefined, { debugName: "hasMultipleUpload" }] : []));
+        this.deleteItemAfterUpload = input(...(ngDevMode ? [undefined, { debugName: "deleteItemAfterUpload" }] : []));
+        this.canUpload = input(...(ngDevMode ? [undefined, { debugName: "canUpload" }] : []));
+        this.hasProgressBar = input(...(ngDevMode ? [undefined, { debugName: "hasProgressBar" }] : []));
+        this.sizeDropZone = input(...(ngDevMode ? [undefined, { debugName: "sizeDropZone" }] : []));
+        this.sizeQueue = input(...(ngDevMode ? [undefined, { debugName: "sizeQueue" }] : []));
+        this.inputAccept = input("*", ...(ngDevMode ? [{ debugName: "inputAccept" }] : []));
+        this.onSuccess = output();
+        this.onError = output();
+        this.fileInput = viewChild("fileRef", ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
+        this.hasBaseDropZoneOver = signal(false, ...(ngDevMode ? [{ debugName: "hasBaseDropZoneOver" }] : []));
     }
     ngOnInit() {
-        this.uploader.onSuccessItem = (item, response, status, headers) => {
+        this.uploader().onSuccessItem = (item, response, status, headers) => {
             console.log("success upload file");
             this.stopLoading();
             this.onSuccess.emit({ item, response, status, headers });
-            if (this.deleteItemAfterUpload) {
+            if (this.deleteItemAfterUpload()) {
                 item.remove();
             }
         };
-        this.uploader.onErrorItem = (item, response, status, headers) => {
+        this.uploader().onErrorItem = (item, response, status, headers) => {
             console.log("error upload file");
             this.stopLoading();
             this.onError.emit({ item, response, status, headers });
         };
-        this.uploader.onProgressItem = (item, progress) => {
+        this.uploader().onProgressItem = (item, progress) => {
             console.log(progress);
-            this.changeDetector.detectChanges();
         };
-        this.hasBaseDropZoneOver = false;
+        this.hasBaseDropZoneOver.set(true);
     }
     /** Arrancará el spinner en el caso de que la barra de progreso esté desactivada*/
     startLoading() {
-        if (!this.hasProgressBar) {
+        if (!this.hasProgressBar()) {
             this.generalUtils.startLoading();
         }
     }
     /** Parará el spinner en el caso de que la barra de progreso esté desactivada*/
     stopLoading() {
-        if (!this.hasProgressBar) {
+        if (!this.hasProgressBar()) {
             this.generalUtils.stopLoading();
         }
     }
     /** Sube todos los ficheros en cola al servidor */
     uploadAll() {
         this.startLoading();
-        this.uploader.uploadAll();
+        this.uploader().uploadAll();
     }
     /** Elimina la cola de ficheros y des-selecciona el fichero que pudiera estar seleccionado en el single input file */
     removeQueue() {
         this.stopLoading();
-        this.uploader.clearQueue();
-        this.changeDetector.detectChanges();
+        this.uploader().clearQueue();
         this.removeInputFile();
     }
     /** Cancela la subida de ficheros al servidor */
     cancelQueue() {
         this.stopLoading();
-        this.uploader.cancelAll();
+        this.uploader().cancelAll();
     }
     /** Sube un fichero al servidor de manera individual */
     uploadFile(item) {
@@ -3629,7 +3573,8 @@ class BitNGUploadComponent {
      */
     removeFile(item) {
         this.stopLoading();
-        if (this.fileInput && this.fileInput.nativeElement.value.indexOf(item.file.name) != -1) {
+        const fileInput = this.fileInput();
+        if (fileInput && fileInput.nativeElement.value.indexOf(item.file.name) != -1) {
             this.removeInputFile();
         }
         item.remove();
@@ -3641,49 +3586,21 @@ class BitNGUploadComponent {
     }
     /** Des-selecciona el fichero seleccionado en el input file */
     removeInputFile() {
-        if (this.fileInput)
-            this.fileInput.nativeElement.value = "";
+        const fileInput = this.fileInput();
+        if (fileInput)
+            fileInput.nativeElement.value = "";
     }
     /** Evento que se dispara cuando arrastran un fichero a la zona de drag&drop */
     fileOverBase(e) {
-        this.hasBaseDropZoneOver = e;
+        this.hasBaseDropZoneOver.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNGUploadComponent, deps: [{ token: GeneralUtils }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitNGUploadComponent, isStandalone: false, selector: "bit-ng-upload", inputs: { uploader: "uploader", hasDropZone: "hasDropZone", hasQueue: "hasQueue", hasSingleUpload: "hasSingleUpload", hasMultipleUpload: "hasMultipleUpload", deleteItemAfterUpload: "deleteItemAfterUpload", canUpload: "canUpload", hasProgressBar: "hasProgressBar", sizeDropZone: "sizeDropZone", sizeQueue: "sizeQueue", inputAccept: "inputAccept" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileRef"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    @if (hasDropZone) {\n      <div\n        ng2FileDrop\n        [ngClass]=\"{'nv-file-over': hasBaseDropZoneOver}\"\n        (fileOver)=\"fileOverBase($event)\"\n        [uploader]=\"uploader\"\n        class=\"well my-drop-zone\">\n        <div class=\"contenedor-upload\">\n          <i class=\"fa fa-file documento\"></i>\n          <div>\n            <span>{{ \"bitnglibrary.upload.dropfiles\" | transloco }}</span>\n            <div class=\"grid\">\n              <div class=\"col-12\">\n                @if (hasMultipleUpload) {\n                  <label class=\"btn-upload\">\n                    <input type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple [accept]=\"inputAccept\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.multiple' | transloco}}\n                  </label>\n                }\n                @if (hasSingleUpload) {\n                  <label class=\"btn-upload\">\n                    <input #fileRef type=\"file\" ng2FileSelect [uploader]=\"uploader\" [accept]=\"inputAccept\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.simple' | transloco}}\n                  </label>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n<div class=\"grid\">\n  @if (hasQueue) {\n    <div class=\"col-12\">\n      <p>{{\"bitnglibrary.upload.uploadfiles\" | transloco}}: {{ uploader?.queue?.length }}</p>\n      <p-table [value]=\"uploader.queue\">\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th width=\"50%\">{{\"bitnglibrary.upload.filename\" | transloco}}</th>\n            @if (uploader.options.isHTML5) {\n              <th>{{\"bitnglibrary.upload.filesize\" | transloco}}</th>\n            }\n            @if (uploader.options.isHTML5 && hasProgressBar) {\n              <th>{{\"bitnglibrary.upload.progress\" | transloco}}</th>\n            }\n            @if (canUpload) {\n              <th>Estat</th>\n            }\n            <th>{{\"bitnglibrary.upload.actions\" | transloco}}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item>\n          <tr>\n            <td><strong>{{ item?.file?.name }}</strong></td>\n            @if (uploader.options.isHTML5) {\n              <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>\n            }\n            @if (uploader.options.isHTML5 && hasProgressBar) {\n              <td>\n                <div class=\"progress\" style=\"margin-bottom: 0;\">\n                  <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': item.progress + '%' }\"></div>\n                </div>\n              </td>\n            }\n            @if (canUpload) {\n              <td class=\"p-text-center\">\n                @if (item.isSuccess) {\n                  <span><i class=\"fa fa-check\"></i></span>\n                }\n                @if (item.isCancel) {\n                  <span><i class=\"fa fa-ban\"></i></span>\n                }\n                @if (item.isError) {\n                  <span><i class=\"fa fa-times\"></i></span>\n                }\n              </td>\n            }\n            <td nowrap>\n              @if (canUpload) {\n                <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.upload' | transloco}}\" styleClass=\"p-button-success\"\n                  (click)=\"uploadFile(item)\" [disabled]=\"item.isReady || item.isUploading || item.isSuccess\">\n                </p-button>\n              }\n              @if (canUpload) {\n                <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelupload' | transloco}}\" styleClass=\"p-button-warning\"\n                  (click)=\"cancelFile(item)\" [disabled]=\"!item.isUploading\">\n                </p-button>\n              }\n              <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removefromqueue' | transloco}}\" styleClass=\"p-button-danger\"\n                (click)=\"removeFile(item)\">\n              </p-button>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (hasProgressBar) {\n        <div class=\"cola-progreso\">\n          <span>{{\"bitnglibrary.upload.progressqueue\" | transloco}}<span>{{(uploader.progress.toString() == 'NaN'? (\"bitnglibrary.upload.finishupload\"|transloco): uploader.progress + '&nbsp;%')}}</span></span>\n          <div class=\"progress\">\n            <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': (uploader.progress.toString() == 'NaN'?'0':uploader.progress) + '%' }\"></div>\n          </div>\n        </div>\n      }\n      <div>\n        @if (canUpload) {\n          <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.uploadall' | transloco}}\" styleClass=\"p-button-success\"\n            (click)=\"uploadAll()\" [disabled]=\"!uploader.getNotUploadedItems().length\">\n          </p-button>\n        }\n        @if (canUpload) {\n          <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelall' | transloco}}\" styleClass=\"p-button-warning\"\n            (click)=\"cancelQueue()\" [disabled]=\"!uploader.isUploading\">\n          </p-button>\n        }\n        <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removeall' | transloco}}\" styleClass=\"p-button-danger\"\n          (click)=\"removeQueue()\" [disabled]=\"!uploader.queue.length\">\n        </p-button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i6.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNGUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitNGUploadComponent, isStandalone: false, selector: "bit-ng-upload", inputs: { uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: true, transformFunction: null }, hasDropZone: { classPropertyName: "hasDropZone", publicName: "hasDropZone", isSignal: true, isRequired: false, transformFunction: null }, hasQueue: { classPropertyName: "hasQueue", publicName: "hasQueue", isSignal: true, isRequired: false, transformFunction: null }, hasSingleUpload: { classPropertyName: "hasSingleUpload", publicName: "hasSingleUpload", isSignal: true, isRequired: false, transformFunction: null }, hasMultipleUpload: { classPropertyName: "hasMultipleUpload", publicName: "hasMultipleUpload", isSignal: true, isRequired: false, transformFunction: null }, deleteItemAfterUpload: { classPropertyName: "deleteItemAfterUpload", publicName: "deleteItemAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, canUpload: { classPropertyName: "canUpload", publicName: "canUpload", isSignal: true, isRequired: false, transformFunction: null }, hasProgressBar: { classPropertyName: "hasProgressBar", publicName: "hasProgressBar", isSignal: true, isRequired: false, transformFunction: null }, sizeDropZone: { classPropertyName: "sizeDropZone", publicName: "sizeDropZone", isSignal: true, isRequired: false, transformFunction: null }, sizeQueue: { classPropertyName: "sizeQueue", publicName: "sizeQueue", isSignal: true, isRequired: false, transformFunction: null }, inputAccept: { classPropertyName: "inputAccept", publicName: "inputAccept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuccess: "onSuccess", onError: "onError" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    @if (hasDropZone()) {\n      <div\n        ng2FileDrop\n        [ngClass]=\"{'nv-file-over': hasBaseDropZoneOver()}\"\n        (fileOver)=\"fileOverBase($event)\"\n        [uploader]=\"uploader()\"\n        class=\"well my-drop-zone\">\n        <div class=\"contenedor-upload\">\n          <i class=\"fa fa-file documento\"></i>\n          <div>\n            <span>{{ \"bitnglibrary.upload.dropfiles\" | transloco }}</span>\n            <div class=\"grid\">\n              <div class=\"col-12\">\n                @if (hasMultipleUpload()) {\n                  <label class=\"btn-upload\">\n                    <input type=\"file\" ng2FileSelect [uploader]=\"uploader()\" multiple [accept]=\"inputAccept()\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.multiple' | transloco}}\n                  </label>\n                }\n                @if (hasSingleUpload()) {\n                  <label class=\"btn-upload\">\n                    <input #fileRef type=\"file\" ng2FileSelect [uploader]=\"uploader()\" [accept]=\"inputAccept()\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.simple' | transloco}}\n                  </label>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n<div class=\"grid\">\n  @if (hasQueue()) {\n    <div class=\"col-12\">\n      <p>{{\"bitnglibrary.upload.uploadfiles\" | transloco}}: {{ uploader()?.queue?.length }}</p>\n      <p-table [value]=\"uploader()?.queue\">\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th width=\"50%\">{{\"bitnglibrary.upload.filename\" | transloco}}</th>\n            @if (uploader().options.isHTML5) {\n              <th>{{\"bitnglibrary.upload.filesize\" | transloco}}</th>\n            }\n            @if (uploader().options.isHTML5 && hasProgressBar()) {\n              <th>{{\"bitnglibrary.upload.progress\" | transloco}}</th>\n            }\n            @if (canUpload()) {\n              <th>Estat</th>\n            }\n            <th>{{\"bitnglibrary.upload.actions\" | transloco}}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item>\n          <tr>\n            <td><strong>{{ item?.file?.name }}</strong></td>\n            @if (uploader()?.options?.isHTML5) {\n              <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>\n            }\n            @if (uploader().options.isHTML5 && hasProgressBar()) {\n              <td>\n                <div class=\"progress\" style=\"margin-bottom: 0;\">\n                  <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': item.progress + '%' }\"></div>\n                </div>\n              </td>\n            }\n            @if (canUpload()) {\n              <td class=\"p-text-center\">\n                @if (item.isSuccess) {\n                  <span><i class=\"fa fa-check\"></i></span>\n                }\n                @if (item.isCancel) {\n                  <span><i class=\"fa fa-ban\"></i></span>\n                }\n                @if (item.isError) {\n                  <span><i class=\"fa fa-times\"></i></span>\n                }\n              </td>\n            }\n            <td nowrap>\n              @if (canUpload()) {\n                <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.upload' | transloco}}\" styleClass=\"p-button-success\"\n                  (click)=\"uploadFile(item)\" [disabled]=\"item.isReady || item.isUploading || item.isSuccess\" />\n              }\n              @if (canUpload()) {\n                <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelupload' | transloco}}\" styleClass=\"p-button-warning\"\n                  (click)=\"cancelFile(item)\" [disabled]=\"!item.isUploading\" />\n              }\n              <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removefromqueue' | transloco}}\" styleClass=\"p-button-danger\"\n                (click)=\"removeFile(item)\" />\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (hasProgressBar()) {\n        <div class=\"cola-progreso\">\n          <span>{{\"bitnglibrary.upload.progressqueue\" | transloco}}<span>{{(uploader()?.progress?.toString() == 'NaN'? (\"bitnglibrary.upload.finishupload\"|transloco): uploader()?.progress + '&nbsp;%')}}</span></span>\n          <div class=\"progress\">\n            <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': (uploader()?.progress?.toString() == 'NaN'?'0':uploader()?.progress) + '%' }\"></div>\n          </div>\n        </div>\n      }\n      <div>\n\n        @if (canUpload()) {\n          <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.uploadall' | transloco}}\" styleClass=\"p-button-success\"\n            (click)=\"uploadAll()\" [disabled]=\"!(uploader()?.getNotUploadedItems()?.length)\" />\n        }\n        @if (canUpload()) {\n          <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelall' | transloco}}\" styleClass=\"p-button-warning\"\n            (click)=\"cancelQueue()\" [disabled]=\"!(uploader()?.isUploading)\" />\n        }\n        <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removeall' | transloco}}\" styleClass=\"p-button-danger\"\n          (click)=\"removeQueue()\" [disabled]=\"!(uploader()?.queue?.length)\" />\n      </div>\n    </div>\n  }\n</div>\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNGUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-ng-upload", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    @if (hasDropZone) {\n      <div\n        ng2FileDrop\n        [ngClass]=\"{'nv-file-over': hasBaseDropZoneOver}\"\n        (fileOver)=\"fileOverBase($event)\"\n        [uploader]=\"uploader\"\n        class=\"well my-drop-zone\">\n        <div class=\"contenedor-upload\">\n          <i class=\"fa fa-file documento\"></i>\n          <div>\n            <span>{{ \"bitnglibrary.upload.dropfiles\" | transloco }}</span>\n            <div class=\"grid\">\n              <div class=\"col-12\">\n                @if (hasMultipleUpload) {\n                  <label class=\"btn-upload\">\n                    <input type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple [accept]=\"inputAccept\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.multiple' | transloco}}\n                  </label>\n                }\n                @if (hasSingleUpload) {\n                  <label class=\"btn-upload\">\n                    <input #fileRef type=\"file\" ng2FileSelect [uploader]=\"uploader\" [accept]=\"inputAccept\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.simple' | transloco}}\n                  </label>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n<div class=\"grid\">\n  @if (hasQueue) {\n    <div class=\"col-12\">\n      <p>{{\"bitnglibrary.upload.uploadfiles\" | transloco}}: {{ uploader?.queue?.length }}</p>\n      <p-table [value]=\"uploader.queue\">\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th width=\"50%\">{{\"bitnglibrary.upload.filename\" | transloco}}</th>\n            @if (uploader.options.isHTML5) {\n              <th>{{\"bitnglibrary.upload.filesize\" | transloco}}</th>\n            }\n            @if (uploader.options.isHTML5 && hasProgressBar) {\n              <th>{{\"bitnglibrary.upload.progress\" | transloco}}</th>\n            }\n            @if (canUpload) {\n              <th>Estat</th>\n            }\n            <th>{{\"bitnglibrary.upload.actions\" | transloco}}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item>\n          <tr>\n            <td><strong>{{ item?.file?.name }}</strong></td>\n            @if (uploader.options.isHTML5) {\n              <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>\n            }\n            @if (uploader.options.isHTML5 && hasProgressBar) {\n              <td>\n                <div class=\"progress\" style=\"margin-bottom: 0;\">\n                  <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': item.progress + '%' }\"></div>\n                </div>\n              </td>\n            }\n            @if (canUpload) {\n              <td class=\"p-text-center\">\n                @if (item.isSuccess) {\n                  <span><i class=\"fa fa-check\"></i></span>\n                }\n                @if (item.isCancel) {\n                  <span><i class=\"fa fa-ban\"></i></span>\n                }\n                @if (item.isError) {\n                  <span><i class=\"fa fa-times\"></i></span>\n                }\n              </td>\n            }\n            <td nowrap>\n              @if (canUpload) {\n                <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.upload' | transloco}}\" styleClass=\"p-button-success\"\n                  (click)=\"uploadFile(item)\" [disabled]=\"item.isReady || item.isUploading || item.isSuccess\">\n                </p-button>\n              }\n              @if (canUpload) {\n                <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelupload' | transloco}}\" styleClass=\"p-button-warning\"\n                  (click)=\"cancelFile(item)\" [disabled]=\"!item.isUploading\">\n                </p-button>\n              }\n              <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removefromqueue' | transloco}}\" styleClass=\"p-button-danger\"\n                (click)=\"removeFile(item)\">\n              </p-button>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (hasProgressBar) {\n        <div class=\"cola-progreso\">\n          <span>{{\"bitnglibrary.upload.progressqueue\" | transloco}}<span>{{(uploader.progress.toString() == 'NaN'? (\"bitnglibrary.upload.finishupload\"|transloco): uploader.progress + '&nbsp;%')}}</span></span>\n          <div class=\"progress\">\n            <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': (uploader.progress.toString() == 'NaN'?'0':uploader.progress) + '%' }\"></div>\n          </div>\n        </div>\n      }\n      <div>\n        @if (canUpload) {\n          <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.uploadall' | transloco}}\" styleClass=\"p-button-success\"\n            (click)=\"uploadAll()\" [disabled]=\"!uploader.getNotUploadedItems().length\">\n          </p-button>\n        }\n        @if (canUpload) {\n          <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelall' | transloco}}\" styleClass=\"p-button-warning\"\n            (click)=\"cancelQueue()\" [disabled]=\"!uploader.isUploading\">\n          </p-button>\n        }\n        <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removeall' | transloco}}\" styleClass=\"p-button-danger\"\n          (click)=\"removeQueue()\" [disabled]=\"!uploader.queue.length\">\n        </p-button>\n      </div>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: GeneralUtils }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
-                type: Input
-            }], hasDropZone: [{
-                type: Input
-            }], hasQueue: [{
-                type: Input
-            }], hasSingleUpload: [{
-                type: Input
-            }], hasMultipleUpload: [{
-                type: Input
-            }], deleteItemAfterUpload: [{
-                type: Input
-            }], canUpload: [{
-                type: Input
-            }], hasProgressBar: [{
-                type: Input
-            }], sizeDropZone: [{
-                type: Input
-            }], sizeQueue: [{
-                type: Input
-            }], inputAccept: [{
-                type: Input
-            }], onSuccess: [{
-                type: Output
-            }], onError: [{
-                type: Output
-            }], fileInput: [{
-                type: ViewChild,
-                args: ["fileRef"]
-            }] } });
+            args: [{ selector: "bit-ng-upload", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    @if (hasDropZone()) {\n      <div\n        ng2FileDrop\n        [ngClass]=\"{'nv-file-over': hasBaseDropZoneOver()}\"\n        (fileOver)=\"fileOverBase($event)\"\n        [uploader]=\"uploader()\"\n        class=\"well my-drop-zone\">\n        <div class=\"contenedor-upload\">\n          <i class=\"fa fa-file documento\"></i>\n          <div>\n            <span>{{ \"bitnglibrary.upload.dropfiles\" | transloco }}</span>\n            <div class=\"grid\">\n              <div class=\"col-12\">\n                @if (hasMultipleUpload()) {\n                  <label class=\"btn-upload\">\n                    <input type=\"file\" ng2FileSelect [uploader]=\"uploader()\" multiple [accept]=\"inputAccept()\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.multiple' | transloco}}\n                  </label>\n                }\n                @if (hasSingleUpload()) {\n                  <label class=\"btn-upload\">\n                    <input #fileRef type=\"file\" ng2FileSelect [uploader]=\"uploader()\" [accept]=\"inputAccept()\" />\n                    <i class=\"fa fa-upload\"></i>{{'bitnglibrary.upload.simple' | transloco}}\n                  </label>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n<div class=\"grid\">\n  @if (hasQueue()) {\n    <div class=\"col-12\">\n      <p>{{\"bitnglibrary.upload.uploadfiles\" | transloco}}: {{ uploader()?.queue?.length }}</p>\n      <p-table [value]=\"uploader()?.queue\">\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th width=\"50%\">{{\"bitnglibrary.upload.filename\" | transloco}}</th>\n            @if (uploader().options.isHTML5) {\n              <th>{{\"bitnglibrary.upload.filesize\" | transloco}}</th>\n            }\n            @if (uploader().options.isHTML5 && hasProgressBar()) {\n              <th>{{\"bitnglibrary.upload.progress\" | transloco}}</th>\n            }\n            @if (canUpload()) {\n              <th>Estat</th>\n            }\n            <th>{{\"bitnglibrary.upload.actions\" | transloco}}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item>\n          <tr>\n            <td><strong>{{ item?.file?.name }}</strong></td>\n            @if (uploader()?.options?.isHTML5) {\n              <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>\n            }\n            @if (uploader().options.isHTML5 && hasProgressBar()) {\n              <td>\n                <div class=\"progress\" style=\"margin-bottom: 0;\">\n                  <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': item.progress + '%' }\"></div>\n                </div>\n              </td>\n            }\n            @if (canUpload()) {\n              <td class=\"p-text-center\">\n                @if (item.isSuccess) {\n                  <span><i class=\"fa fa-check\"></i></span>\n                }\n                @if (item.isCancel) {\n                  <span><i class=\"fa fa-ban\"></i></span>\n                }\n                @if (item.isError) {\n                  <span><i class=\"fa fa-times\"></i></span>\n                }\n              </td>\n            }\n            <td nowrap>\n              @if (canUpload()) {\n                <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.upload' | transloco}}\" styleClass=\"p-button-success\"\n                  (click)=\"uploadFile(item)\" [disabled]=\"item.isReady || item.isUploading || item.isSuccess\" />\n              }\n              @if (canUpload()) {\n                <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelupload' | transloco}}\" styleClass=\"p-button-warning\"\n                  (click)=\"cancelFile(item)\" [disabled]=\"!item.isUploading\" />\n              }\n              <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removefromqueue' | transloco}}\" styleClass=\"p-button-danger\"\n                (click)=\"removeFile(item)\" />\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (hasProgressBar()) {\n        <div class=\"cola-progreso\">\n          <span>{{\"bitnglibrary.upload.progressqueue\" | transloco}}<span>{{(uploader()?.progress?.toString() == 'NaN'? (\"bitnglibrary.upload.finishupload\"|transloco): uploader()?.progress + '&nbsp;%')}}</span></span>\n          <div class=\"progress\">\n            <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': (uploader()?.progress?.toString() == 'NaN'?'0':uploader()?.progress) + '%' }\"></div>\n          </div>\n        </div>\n      }\n      <div>\n\n        @if (canUpload()) {\n          <p-button icon=\"fa fa-upload\" title=\"{{'bitnglibrary.upload.uploadall' | transloco}}\" styleClass=\"p-button-success\"\n            (click)=\"uploadAll()\" [disabled]=\"!(uploader()?.getNotUploadedItems()?.length)\" />\n        }\n        @if (canUpload()) {\n          <p-button icon=\"fa fa-ban\" title=\"{{'bitnglibrary.upload.cancelall' | transloco}}\" styleClass=\"p-button-warning\"\n            (click)=\"cancelQueue()\" [disabled]=\"!(uploader()?.isUploading)\" />\n        }\n        <p-button icon=\"fa fa-trash\" title=\"{{'bitnglibrary.upload.removeall' | transloco}}\" styleClass=\"p-button-danger\"\n          (click)=\"removeQueue()\" [disabled]=\"!(uploader()?.queue?.length)\" />\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }] });
 
 /**
  * Componente general que muestra controles de sesión de usuario.
@@ -3691,47 +3608,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * Informa del login actualmente en sesión
  */
 class BitUserControlsComponent {
-    constructor() { }
-    get json() {
-        return this.usuario && JSON.stringify(this.usuario, null, 4);
+    constructor() {
+        this.usuario = input.required(...(ngDevMode ? [{ debugName: "usuario" }] : []));
+        this.json = computed(() => JSON.stringify(this.usuario(), null, 4), ...(ngDevMode ? [{ debugName: "json" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitUserControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitUserControlsComponent, isStandalone: false, selector: "bit-user-controls", inputs: { usuario: "usuario" }, ngImport: i0, template: `
-    @if (usuario) {
-      <span class="userControls"><span class="fa fa-user" title="{{ json }}"></span>&nbsp;&nbsp;{{ usuario.nombreCompleto }} ({{usuario.login}})&nbsp;&nbsp;</span>
-      }
-    `, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitUserControlsComponent, isStandalone: false, selector: "bit-user-controls", inputs: { usuario: { classPropertyName: "usuario", publicName: "usuario", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (usuario()) {\n    <span class=\"userControls\"><span class=\"fa fa-user\" title=\"{{ json() }}\"></span>&nbsp;&nbsp;{{ usuario().nombreCompleto }} ({{usuario().login}})&nbsp;&nbsp;</span>\n}" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitUserControlsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "bit-user-controls",
-                    template: `
-    @if (usuario) {
-      <span class="userControls"><span class="fa fa-user" title="{{ json }}"></span>&nbsp;&nbsp;{{ usuario.nombreCompleto }} ({{usuario.login}})&nbsp;&nbsp;</span>
-      }
-    `
-                    //styleUrls:['bit-user-controls.component.css']
-                    ,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [], propDecorators: { usuario: [{
-                type: Input
-            }] } });
+            args: [{ selector: "bit-user-controls", standalone: false, template: "@if (usuario()) {\n    <span class=\"userControls\"><span class=\"fa fa-user\" title=\"{{ json() }}\"></span>&nbsp;&nbsp;{{ usuario().nombreCompleto }} ({{usuario().login}})&nbsp;&nbsp;</span>\n}" }]
+        }] });
 
 /**
  * Componenente que muestra un paginador en la sección footer.
  **/
 class BitColumnBooleanComponent {
     constructor() {
-        this.textTrue = "Sí";
-        this.textFalse = "No";
+        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : [])); // objeto del que extraer la propiedad
+        this.field = input(undefined, ...(ngDevMode ? [{ debugName: "field" }] : [])); // propiedad booleana que procesar
+        this.textTrue = input("Sí", ...(ngDevMode ? [{ debugName: "textTrue" }] : []));
+        this.textFalse = input("No", ...(ngDevMode ? [{ debugName: "textFalse" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitColumnBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitColumnBooleanComponent, isStandalone: false, selector: "bit-column-boolean", inputs: { data: "data", field: "field", textTrue: "textTrue", textFalse: "textFalse" }, ngImport: i0, template: `
-    @if (data) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitColumnBooleanComponent, isStandalone: false, selector: "bit-column-boolean", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, textTrue: { classPropertyName: "textTrue", publicName: "textTrue", isSignal: true, isRequired: false, transformFunction: null }, textFalse: { classPropertyName: "textFalse", publicName: "textFalse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (data()) {
       <span class="ui-cell-data">
-        {{ data[field] ? textTrue : textFalse }}
+        {{ data()[field()] ? textTrue() : textFalse() }}
       </span>
     }
     `, isInline: true }); }
@@ -3741,49 +3644,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             args: [{
                     selector: "bit-column-boolean",
                     template: `
-    @if (data) {
+    @if (data()) {
       <span class="ui-cell-data">
-        {{ data[field] ? textTrue : textFalse }}
+        {{ data()[field()] ? textTrue() : textFalse() }}
       </span>
     }
     `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }], field: [{
-                type: Input
-            }], textTrue: [{
-                type: Input
-            }], textFalse: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class BitDomainValueComponent {
     constructor() {
-        this.translatedValue = "carregant...";
-        this.emptyText = "";
-    }
-    ngOnChanges() {
-        // cada vez que cambia algo en el input, recalculamos
-        this.translatedValue = this.resolveTranslatedValue();
-    }
-    resolveTranslatedValue() {
-        // buscar traducción para el valor en el dominio
-        let domainMatch = this.data && this.data.find(obj => obj.value == this.value);
-        if (domainMatch) {
-            return domainMatch.label;
-        }
-        else if (this.value) {
-            return String(`??${this.value}??`);
-        }
-        else {
-            return this.emptyText;
-        }
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.emptyText = input("", ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        this.translatedValue = computed(() => {
+            // buscar traducción para el valor en el dominio
+            const data = this.data();
+            let domainMatch = data && data.find(obj => obj.value == this.value());
+            const value = this.value();
+            if (domainMatch) {
+                return domainMatch.label;
+            }
+            else if (value) {
+                return String(`??${value}??`);
+            }
+            else {
+                return this.emptyText() ?? "Carregant...";
+            }
+        }, ...(ngDevMode ? [{ debugName: "translatedValue" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDomainValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitDomainValueComponent, isStandalone: false, selector: "bit-domain-value", inputs: { value: "value", emptyText: "emptyText", data: "data" }, usesOnChanges: true, ngImport: i0, template: `
-    <span>{{ translatedValue }}</span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: BitDomainValueComponent, isStandalone: false, selector: "bit-domain-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span>{{ translatedValue() }}</span>
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDomainValueComponent, decorators: [{
@@ -3791,17 +3685,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             args: [{
                     selector: "bit-domain-value",
                     template: `
-    <span>{{ translatedValue }}</span>
+    <span>{{ translatedValue() }}</span>
   `,
                     standalone: false
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], emptyText: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  *  Clase general que todos los componentes personalizados deben extender. Contiene toda la lógica común para trabajar con
@@ -3810,67 +3698,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 class BitGeneralComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.placeholder = "";
-        this.readOnly = false;
-        this.hideLabel = false; // forzar que no se reserve espacio para el nombre del campo
-        this.forceObligatorio = false;
-        this.onChange = new EventEmitter();
-        this.onTouch = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.onFocus = new EventEmitter();
-    }
-    get dataTestId() {
-        return this.testid ? this.testid : this.nombre;
-    }
-    // decidimos marcar el campo como obligatorio si se ha indicado a la fuerza (por parámetro)
-    // o si el control de formulario asociado está saltando por ser obligatorio y no haberse rellenado
+        this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control", alias: "formControl" }] : [{ alias: "formControl" }]));
+        this.nombre = input(...(ngDevMode ? [undefined, { debugName: "nombre" }] : []));
+        this.nombreDirectiva = input(...(ngDevMode ? [undefined, { debugName: "nombreDirectiva" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.estilo = input(...(ngDevMode ? [undefined, { debugName: "estilo" }] : []));
+        this.tooltipTexto = input(...(ngDevMode ? [undefined, { debugName: "tooltipTexto" }] : []));
+        this.tooltipPosicion = input(...(ngDevMode ? [undefined, { debugName: "tooltipPosicion" }] : []));
+        this.ayuda = input(...(ngDevMode ? [undefined, { debugName: "ayuda" }] : [])); // clave de la ayuda contextual
+        this.placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+        this.hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : [])); // forzar que no se reserve espacio para el nombre del campo
+        this.forceObligatorio = input(false, ...(ngDevMode ? [{ debugName: "forceObligatorio" }] : []));
+        this.testid = input(...(ngDevMode ? [undefined, { debugName: "testid" }] : []));
+        this.log = input(false, ...(ngDevMode ? [{ debugName: "log" }] : []));
+        this.onChange = output();
+        this.onTouch = output();
+        this.onBlur = output();
+        this.onFocus = output();
+        this.elementRef = inject(ElementRef);
+        this.dataTestId = computed(() => {
+            const testid = this.testid();
+            return testid ? testid : this.nombre();
+        }, ...(ngDevMode ? [{ debugName: "dataTestId" }] : []));
+    }
     get obligatorio() {
-        return this.forceObligatorio || (this.control && this.control.errors && this.control.errors["required"]);
+        let control = this.control();
+        return this.forceObligatorio() || (control && control.errors && control.errors["required"]);
     }
     showAyuda() {
-        this.ayudaService.mostrarAyuda(this.ayuda);
+        this.ayudaService.mostrarAyuda(this.ayuda());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitGeneralComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: BitGeneralComponent, isStandalone: true, inputs: { control: ["formControl", "control"], nombre: "nombre", nombreDirectiva: "nombreDirectiva", label: "label", estilo: "estilo", tooltipTexto: "tooltipTexto", tooltipPosicion: "tooltipPosicion", ayuda: "ayuda", placeholder: "placeholder", readOnly: "readOnly", hideLabel: "hideLabel", forceObligatorio: "forceObligatorio", testid: "testid" }, outputs: { onChange: "onChange", onTouch: "onTouch", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: BitGeneralComponent, isStandalone: true, inputs: { control: { classPropertyName: "control", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, nombre: { classPropertyName: "nombre", publicName: "nombre", isSignal: true, isRequired: false, transformFunction: null }, nombreDirectiva: { classPropertyName: "nombreDirectiva", publicName: "nombreDirectiva", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, estilo: { classPropertyName: "estilo", publicName: "estilo", isSignal: true, isRequired: false, transformFunction: null }, tooltipTexto: { classPropertyName: "tooltipTexto", publicName: "tooltipTexto", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosicion: { classPropertyName: "tooltipPosicion", publicName: "tooltipPosicion", isSignal: true, isRequired: false, transformFunction: null }, ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, forceObligatorio: { classPropertyName: "forceObligatorio", publicName: "forceObligatorio", isSignal: true, isRequired: false, transformFunction: null }, testid: { classPropertyName: "testid", publicName: "testid", isSignal: true, isRequired: false, transformFunction: null }, log: { classPropertyName: "log", publicName: "log", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onTouch: "onTouch", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitGeneralComponent, decorators: [{
             type: Directive
-        }], propDecorators: { control: [{
-                type: Input,
-                args: ["formControl"]
-            }], nombre: [{
-                type: Input
-            }], nombreDirectiva: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], estilo: [{
-                type: Input
-            }], tooltipTexto: [{
-                type: Input
-            }], tooltipPosicion: [{
-                type: Input
-            }], ayuda: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], readOnly: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }], forceObligatorio: [{
-                type: Input
-            }], testid: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], onTouch: [{
-                type: Output
-            }], onBlur: [{
-                type: Output
-            }], onFocus: [{
-                type: Output
-            }] } });
+        }] });
 
 /** Clase customizada para componentes personalizados que requieren implementar la interface ControlValueAccessor.
  * Tipicamente para aquellos componentes personalizados que trabajan sobre otros componentes no estándars HTML como
@@ -3878,30 +3742,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  */
 class BitCustomComponent extends BitGeneralComponent {
     constructor() {
-        super();
+        super(...arguments);
+        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
         // nos permite decirle a Angular que nuestro componente ha modificado su valor
         this._onChange = (_) => { };
         // nos permite decirle a Angular que nuestro componente ha sido tacado
         this._onTouch = () => { };
     }
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
+        this.isDisabled.set(isDisabled);
     }
     _onBlur(event = {}) {
-        this.onBlur.emit();
+        this.log() && console.log("_onBlur forComponent:" + this.nombre());
+        this.onBlur.emit({});
         this.touchComponent();
     }
     _onFocus() {
-        this.onFocus.emit();
+        this.log() && console.log("_onFocus forComponent:" + this.nombre());
+        this.onFocus.emit({});
     }
     changeComponentValue(value) {
-        console.log("changeComponentValue", value);
+        this.log() && console.log("changeComponentValue forComponent:" + this.nombre() + " and value:" + value);
         this._onChange(value);
         this.onChange.emit(value);
     }
     touchComponent() {
+        this.log() && console.log("touchComponent forComponent:" + this.nombre());
         this._onTouch();
-        this.onTouch.emit();
+        this.onTouch.emit({});
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -3909,23 +3777,26 @@ class BitCustomComponent extends BitGeneralComponent {
     registerOnTouched(fn) {
         this._onTouch = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: BitCustomComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCustomComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [] });
+        }] });
 
 class BitTextComponent extends BitCustomComponent {
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         } // si es null o undefined (es lo que evalúa el "==null")
         else {
+            this.log() && console.log("value lectura: " + this.value);
             return this.value;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v) {
             this.value = "";
         }
@@ -3934,6 +3805,7 @@ class BitTextComponent extends BitCustomComponent {
         }
     }
     onChangeValue(text) {
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + text);
         this.value = text;
         this.changeComponentValue(this.value);
     }
@@ -3942,7 +3814,7 @@ class BitTextComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTextComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n", dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i3$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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: ["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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: FocusRegisterDirective, selector: "input,select,textarea,bit-input,bit-select" }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTextComponent, decorators: [{
             type: Component,
@@ -3950,23 +3822,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTextComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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 {
     constructor() {
         super(...arguments);
-        this.filas = 2;
+        this.filas = input(2, ...(ngDevMode ? [{ debugName: "filas" }] : []));
     }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         } // si es null o undefined (es lo que evalúa el "==null")
         else {
+            this.log() && console.log("value lectura: " + this.value);
             return this.value;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v) {
             this.value = "";
         }
@@ -3975,15 +3850,16 @@ class BitTextAreaComponent extends BitCustomComponent {
         }
     }
     onChangeValue(text) {
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + text);
         this.value = text;
         this.changeComponentValue(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitTextAreaComponent, isStandalone: false, selector: "bit-textarea", inputs: { filas: "filas" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitTextAreaComponent, isStandalone: false, selector: "bit-textarea", inputs: { filas: { classPropertyName: "filas", publicName: "filas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTextAreaComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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\"></control-messages>\n}\n", dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["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"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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: ["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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTextAreaComponent, decorators: [{
             type: Component,
@@ -3991,16 +3867,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTextAreaComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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\"></control-messages>\n}\n" }]
-        }], propDecorators: { filas: [{
-                type: Input
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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" }]
+        }] });
 
 /** Clase general para componentes personalizados de tipo Fecha como puede ser BitDate, BitTime y BitDateTime */
 class BitCalendarComponent extends BitCustomComponent {
-    constructor(translateService) {
-        super();
-        this.translateService = translateService;
+    constructor() {
+        super(...arguments);
         // calendarios
         this.fechaMinima = input(undefined, ...(ngDevMode ? [{ debugName: "fechaMinima" }] : [])); // fecha mínima seleccionable
         this.fechaMaxima = input(undefined, ...(ngDevMode ? [{ debugName: "fechaMaxima" }] : [])); // fecha máxima seleccionable
@@ -4010,29 +3883,32 @@ class BitCalendarComponent extends BitCustomComponent {
         this.appendTo = input("body", ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
         this.onSelect = output();
         this.dateUtils = inject(DateUtils);
+        this.translateService = inject(TranslateService);
     }
     _onTodayClick(event) {
+        this.log() && console.log("_onTodayClick forComponent:" + this.nombre());
         this.value = new Date();
         this.emitNewValue();
     }
     _onSelect(date) {
+        this.log() && console.log("onSelect forComponent:" + this.nombre() + " with date:" + date);
         this.value = date;
-        console.log("onSelect", date);
         this.emitNewValue();
         this.onSelect.emit(date);
     }
     _onInput(data) {
+        this.log() && console.log("_onInput forComponent:" + this.nombre());
         // recuperamos el valor del campo
         let value = data.currentTarget.value;
         try {
-            console.log("value", value);
+            this.log() && console.log("value", value);
             // si es una fecha, hora o fecha/hora
             if (this.isValueCorrect(value)) {
                 // hacemos una transformación de string a date y de date a string porque en el caso de DateTime la representación visual e informática no tiene nada que ver
                 let d = this.dateUtils.getStringAsDate(value, this.visual_format);
-                console.log("converted to date value", d);
+                this.log() && console.log("converted to date value", d);
                 value = this.getDateAsString(d);
-                console.log("converted to string value", value);
+                this.log() && console.log("converted to string value", value);
                 this.writeValue(value);
                 this.emitNewValue();
             }
@@ -4041,11 +3917,12 @@ class BitCalendarComponent extends BitCustomComponent {
         }
     }
     _onBlur(data) {
+        this.log() && console.log("_onInput forComponent:" + this.nombre());
         super._onBlur();
         // recuperamos el valor del campo
         let value = data.currentTarget.value;
         try {
-            console.log("onBlur value", value);
+            this.log() && console.log("onBlur value", value);
             // Cuando abandonemos el campo si el valor es un truño, seteamos null en el formcontrol
             if (!this.isValueCorrect(value)) {
                 this.writeValue(null);
@@ -4056,6 +3933,7 @@ class BitCalendarComponent extends BitCustomComponent {
         }
     }
     _onClear() {
+        this.log() && console.log("_onClear forComponent:" + this.nombre());
         this.writeValue(null);
         this.emitNewValue();
     }
@@ -4063,46 +3941,53 @@ class BitCalendarComponent extends BitCustomComponent {
         let v = null;
         if (this.value) {
             try {
-                console.log("emitNewValue", this.value);
+                this.log() && console.log("emitNewValue", this.value);
                 v = this.dateUtils.getDateAsString(this.value, this.getDateFormat());
             }
             catch (e) {
             }
         }
+        else {
+            this.log() && console.log("noValue to emit for component:" + this.nombre());
+        }
         this.changeComponentValue(v);
     }
     isValueCorrect(value) {
         return moment(value, this.visual_format, true).isValid();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCalendarComponent, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: BitCalendarComponent, isStandalone: true, inputs: { fechaMinima: { classPropertyName: "fechaMinima", publicName: "fechaMinima", isSignal: true, isRequired: false, transformFunction: null }, fechaMaxima: { classPropertyName: "fechaMaxima", publicName: "fechaMaxima", isSignal: true, isRequired: false, transformFunction: null }, calendarReadOnlyInput: { classPropertyName: "calendarReadOnlyInput", publicName: "calendarReadOnlyInput", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCalendarComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: TranslateService }] });
+        }] });
 
 class BitDateComponent extends BitCalendarComponent {
-    constructor(translateService, dateUtils) {
-        super(translateService);
-        this.translateService = translateService;
-        this.dateUtils = dateUtils;
-        this.placeholder = "dd/mm/yyyy";
+    constructor() {
+        super();
+        this.dateUtils = inject(DateUtils);
+        this.placeholder = input("dd/mm/yyyy", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.visual_format = DateUtils.FORMAT_SHORT_DATE;
     }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         }
         else {
-            return this.dateUtils.getDateAsString(this.value, this.getDateFormat());
+            let v = this.dateUtils.getDateAsString(this.value, this.getDateFormat());
+            this.log() && console.log("value lectura: " + v);
+            return v;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v || v === "") {
             this.value = null;
         }
         else {
             this.value = this.dateUtils.getStringAsDate(v, this.getDateFormat());
+            this.log() && console.log("new value:" + this.value);
         }
     }
     getDateAsString(d) {
@@ -4112,12 +3997,12 @@ class BitDateComponent extends BitCalendarComponent {
     getDateFormat() {
         return this.format() ? this.format() : DateUtils.FORMAT_SHORT_DATE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateComponent, deps: [{ token: TranslateService }, { token: DateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDateComponent, isStandalone: false, selector: "bit-date", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDateComponent, isStandalone: false, selector: "bit-date", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDateComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"dd/MM/yyyy\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\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\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i3$6.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"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateComponent, decorators: [{
             type: Component,
@@ -4125,31 +4010,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitDateComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"dd/MM/yyyy\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\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\"></control-messages>\n}\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }, { type: DateUtils }] });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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: () => [] });
 
 class BitTimeComponent extends BitCalendarComponent {
-    constructor(translateService, dateUtils) {
-        super(translateService);
-        this.translateService = translateService;
-        this.dateUtils = dateUtils;
-        this.placeholder = "hh:mm";
+    constructor() {
+        super();
+        this.dateUtils = inject(DateUtils);
+        this.placeholder = input("hh:mm", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.visual_format = DateUtils.FORMAT_SHORT_TIME;
     }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         }
         else {
-            return this.dateUtils.getTimeAsString(this.value, this.getDateFormat());
+            let v = this.dateUtils.getTimeAsString(this.value, this.getDateFormat());
+            this.log() && console.log("value lectura: " + v);
+            return v;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v) {
             this.value = null;
         }
         else {
             this.value = this.dateUtils.getStringAsDate(v, this.getDateFormat());
+            this.log() && console.log("new value:" + this.value);
         }
     }
     getDateAsString(d) {
@@ -4159,12 +4048,12 @@ class BitTimeComponent extends BitCalendarComponent {
     getDateFormat() {
         return this.format() ? this.format() : DateUtils.FORMAT_SHORT_TIME;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTimeComponent, deps: [{ token: TranslateService }, { token: DateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitTimeComponent, isStandalone: false, selector: "bit-time", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitTimeComponent, isStandalone: false, selector: "bit-time", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitTimeComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"HH:mm\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i3$6.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"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitTimeComponent, decorators: [{
             type: Component,
@@ -4172,31 +4061,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitTimeComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"HH:mm\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }, { type: DateUtils }] });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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: () => [] });
 
 class BitDateTimeComponent extends BitCalendarComponent {
-    constructor(translateService, dateUtils) {
-        super(translateService);
-        this.translateService = translateService;
-        this.dateUtils = dateUtils;
-        this.placeholder = "dd/mm/yyyy hh:mm";
+    constructor() {
+        super();
+        this.dateUtils = inject(DateUtils);
+        this.placeholder = input("dd/mm/yyyy hh:mm", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.visual_format = DateUtils.FORMAT_LONG_DATE;
     }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         }
         else {
-            return this.dateUtils.getDateTimeAsString(this.value, this.getDateFormat());
+            let v = this.dateUtils.getDateTimeAsString(this.value, this.getDateFormat());
+            this.log() && console.log("value lectura: " + v);
+            return v;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v) {
             this.value = null;
         }
         else {
             this.value = this.dateUtils.getStringAsDate(v, this.getDateFormat());
+            this.log() && console.log("new value:" + this.value);
         }
     }
     getDateAsString(d) {
@@ -4206,12 +4099,12 @@ class BitDateTimeComponent extends BitCalendarComponent {
     getDateFormat() {
         return this.format() ? this.format() : DateUtils.FORMAT_LONG_DATE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateTimeComponent, deps: [{ token: TranslateService }, { token: DateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDateTimeComponent, isStandalone: false, selector: "bit-datetime", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDateTimeComponent, isStandalone: false, selector: "bit-datetime", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDateTimeComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"dd/MM/yyyy HH:mm\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\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\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i3$6.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"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDateTimeComponent, decorators: [{
             type: Component,
@@ -4219,18 +4112,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitDateTimeComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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 | date: \"dd/MM/yyyy HH:mm\" }}</p>\n}\n@if (!readOnly) {\n  <p-datepicker\n    class=\"FormControl\"\n    id=\"{{ nombre }}\"\n    name=\"{{ nombre }}\"\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  </p-datepicker>\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\"></control-messages>\n}\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }, { type: DateUtils }] });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ nombre() }}\"\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: () => [] });
 
 class BitCheckBoxComponent extends BitCustomComponent {
     get value_lectura() {
+        this.log() && console.log("value lectura: " + this.value);
         return this.value ? "Sí" : "No";
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
     }
     onChangeValue(event) {
         this.value = event.checked;
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + this.value);
         this.changeComponentValue(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -4238,7 +4134,7 @@ class BitCheckBoxComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitCheckBoxComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    class=\"{{ estilo }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-checkbox>\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\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i1$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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: ["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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitCheckBoxComponent, decorators: [{
             type: Component,
@@ -4246,18 +4142,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitCheckBoxComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    class=\"{{ estilo }}\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-checkbox>\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\"></control-messages>\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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 {
     get value_lectura() {
+        this.log() && console.log("value lectura: " + this.value);
         return this.value ? "Sí" : "No";
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
     }
     onChangeValue(event) {
         this.value = event.checked;
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + this.value);
         this.changeComponentValue(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -4265,7 +4164,7 @@ class BitSwitchComponent extends BitCustomComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitSwitchComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-toggleswitch>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.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"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSwitchComponent, decorators: [{
             type: Component,
@@ -4273,59 +4172,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitSwitchComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-toggleswitch>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n" }]
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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 {
     constructor() {
         super(...arguments);
-        this.multiple = false;
-        this.id = "id";
-        this.customTemplate = false; // si se usa un template personalizado para mostrar los items
-        this.completeMethod = new EventEmitter();
-        this.onSelect = new EventEmitter();
-        this.onClear = new EventEmitter();
+        this.suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.suggestionField = input(...(ngDevMode ? [undefined, { debugName: "suggestionField" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.inputStyleClass = input(...(ngDevMode ? [undefined, { debugName: "inputStyleClass" }] : []));
+        this.id = input("id", ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.displayValue = input(...(ngDevMode ? [undefined, { debugName: "displayValue" }] : []));
+        this.customTemplate = input(false, ...(ngDevMode ? [{ debugName: "customTemplate" }] : [])); // si se usa un template personalizado para mostrar los items
+        this.completeMethod = output();
+        this.onSelect = output();
+        this.onClear = output();
+        this.itemTemplate = contentChild('itemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.suggestions_mapped = computed(() => {
+            let suggestions = this.suggestions();
+            if (suggestions) {
+                let newList = suggestions.map((obj) => ((obj instanceof Object && !this.customTemplate()) ? obj[this.suggestionField()] : obj));
+                this.log() && console.log("suggestions mapped for component: " + this.nombre(), newList);
+                return newList;
+            }
+        }, ...(ngDevMode ? [{ debugName: "suggestions_mapped" }] : []));
     }
     ngAfterViewInit() {
         // Control de errores:
         // 1. Si se quiere usar una template personalizada, se debe especificar el input customTemplate.
         // 2. Si se usa customTemplate, se debe especificar el input suggestionField para poder mapear el objeto en el campo de texto.
         // 3. Si se usa itemTemplate, se debe especificar customTemplate a true. (warning)
-        if (this.customTemplate && !this.itemTemplate) {
+        const customTemplate = this.customTemplate();
+        const itemTemplate = this.itemTemplate();
+        if (customTemplate && !itemTemplate) {
             throw new Error("BitAutoCompleteComponent: Si se especifica el input customTemplate se debe proporcionar una template a través de '<ng-template #itemTemplate let-item>'");
         }
-        else if (this.customTemplate && !this.suggestionField) {
+        else if (customTemplate && !this.suggestionField()) {
             throw new Error("BitAutoCompleteComponent: Si se especifica el input customTemplate, se debe especificar el input suggestionField para poder mapear el objeto en el campo de texto cuando elijamos uno de la lista.");
         }
-        else if (!this.customTemplate && this.itemTemplate) {
-            console.warn("BitAutoCompleteComponent: Se ha proporcionado una template personalizada a través de 'itemTemplate', pero se está pasando de ella. Para usarla, debe establecer customTemplate a true.");
-        }
-    }
-    ngOnChanges(changes) {
-        for (let propName in changes) {
-            if (propName === "suggestions") {
-                let changedProp = changes[propName];
-                let newList = changedProp.currentValue;
-                // El mapeo tiene que ser con todo el objeto, no solo con el campo suggestionField, porque si se usa un template personalizado
-                // se necesita el objeto completo para poder pasarlos a la template y que se pinte correctamente.
-                this.suggestions_mapped = newList && newList.map((obj) => ((obj instanceof Object && !this.customTemplate) ? obj[this.suggestionField] : obj));
-                //console.log("newList", this.suggestions_mapped);
-            }
-        }
-    }
+        else if (!customTemplate && itemTemplate) {
+            this.log() && console.warn("BitAutoCompleteComponent: Se ha proporcionado una template personalizada a través de 'itemTemplate', pero se está pasando de ella. Para usarla, debe establecer customTemplate a true.");
+        }
+    }
+    // ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+    //   for (let propName in changes) {
+    //     if (propName === "suggestions") {
+    //       let changedProp = changes[propName];
+    //       let newList = changedProp.currentValue;
+    //       // El mapeo tiene que ser con todo el objeto, no solo con el campo suggestionField, porque si se usa un template personalizado
+    //       // se necesita el objeto completo para poder pasarlos a la template y que se pinte correctamente.
+    //       this.suggestions_mapped = newList && newList.map((obj: { [x: string]: any }) => ((obj instanceof Object && !this.customTemplate()) ? obj[this.suggestionField()] : obj));
+    //       //console.log("newList", this.suggestions_mapped);
+    //     }
+    //   }
+    // }
     search(event) {
+        this.log() && console.log("search for component: " + this.nombre(), event);
         this.completeMethod.emit(event);
     }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         } // si es null o undefined (es lo que evalúa el "==null")
         else {
+            this.log() && console.log("value lectura: " + this.value);
             return this.value;
         }
     }
     writeValue(v) {
         // El 0 es un valor válido
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (v === null || v === undefined || v === "") {
             this.value = "";
         }
@@ -4334,33 +4252,39 @@ class BitAutoCompleteComponent extends BitCustomComponent {
                 this.value = v.toString();
             }
             else {
-                this.value = this.displayValue;
+                this.value = this.displayValue();
             }
         }
     }
     changeComponentValue(value) {
+        this.log() && console.log(`changeComponentValue forComponent ${this.nombre()} with value ${value}`);
         let valueConverted;
-        if (this.suggestionField) {
+        if (this.suggestionField()) {
             // si estamos especificando que lo que el autocompletar hace es operar sobre una lista de objetos
             // recuperamos el objeto dentro de la lista con el valor del campo suggestionField igual al seleccionado
             let selectedObject = this._findObject(value);
+            this.log() && console.log("selectedObject", selectedObject);
             // el valor reconvertido será el ID del objeto que es lo que vamos a meter en el FormControl
-            valueConverted = selectedObject && selectedObject[this.id];
+            valueConverted = selectedObject && selectedObject[this.id()];
+            this.log() && console.log("valueConverted", valueConverted);
             // emitimos que ha cambiado el objeto
             this.onChange.emit(selectedObject);
         }
         else {
             // si no es una lista de objetos el comportamiento es el de siempre
             valueConverted = value;
+            this.log() && console.log("valueConverted", valueConverted);
             this.onChange.emit(valueConverted);
         }
         this._onChange(valueConverted);
     }
     _onSelect(event) {
         this.value = event.value;
+        this.log() && console.log("_onSelect forComponent: " + this.nombre() + " with value:" + this.value);
         this.changeComponentValue(this.value);
-        if (this.suggestionField) {
+        if (this.suggestionField()) {
             let selectedObject = this._findObject(event.value);
+            this.log() && console.log("selectedObject: " + selectedObject);
             this.onSelect.emit(selectedObject);
         }
         else {
@@ -4369,26 +4293,32 @@ class BitAutoCompleteComponent extends BitCustomComponent {
     }
     _onClear() {
         this.value = "";
+        this.log() && console.log("_onClear forComponent: " + this.nombre());
         this.changeComponentValue(this.value);
-        this.onClear.emit();
+        this.onClear.emit({});
     }
     _findObject(value) {
+        this.log() && console.log("_findObject forComponent: " + this.nombre() + " with value", value);
         // Si se usa un template personalizado, devolvemos el valor directamente, porque ya estará allí, no hace falta buscarlo en la lista de sugerencias
-        if (this.customTemplate) {
+        if (this.customTemplate()) {
             return this.value;
         }
         else {
-            return value && this.suggestions.find((obj) => obj[this.suggestionField] === value);
+            if (value) {
+                let v = this.suggestions().find((obj) => obj[this.suggestionField()] === value);
+                this.log() && console.log("_findObject forComponent: " + this.nombre() + " find value", v);
+                return v;
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitAutoCompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitAutoCompleteComponent, isStandalone: false, selector: "bit-autocomplete", inputs: { suggestions: "suggestions", suggestionField: "suggestionField", multiple: "multiple", inputStyleClass: "inputStyleClass", id: "id", displayValue: "displayValue", customTemplate: "customTemplate" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onClear: "onClear" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitAutoCompleteComponent, isStandalone: false, selector: "bit-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, suggestionField: { classPropertyName: "suggestionField", publicName: "suggestionField", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onClear: "onClear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitAutoCompleteComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></ng-content>&nbsp;\n    @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  <!-- 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    [(ngModel)]=\"value\"\n    id=\"{{ nombre }}\"\n    name=\"{{ 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 }\"></ng-container>\n      </ng-template>\n    }\n  </p-autoComplete>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n", dependencies: [{ kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$5.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", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }] }); }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\n    <ng-content />&nbsp;\n    @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  <!-- 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    [(ngModel)]=\"value\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    aria-label=\"{{ 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}\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", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitAutoCompleteComponent, decorators: [{
             type: Component,
@@ -4398,31 +4328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => BitAutoCompleteComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></ng-content>&nbsp;\n    @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  <!-- 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    [(ngModel)]=\"value\"\n    id=\"{{ nombre }}\"\n    name=\"{{ 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 }\"></ng-container>\n      </ng-template>\n    }\n  </p-autoComplete>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n" }]
-        }], propDecorators: { suggestions: [{
-                type: Input
-            }], suggestionField: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], inputStyleClass: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], displayValue: [{
-                type: Input
-            }], customTemplate: [{
-                type: Input
-            }], completeMethod: [{
-                type: Output
-            }], onSelect: [{
-                type: Output
-            }], onClear: [{
-                type: Output
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: ['itemTemplate', { read: TemplateRef }]
-            }] } });
+                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label>\n    <ng-content />&nbsp;\n    @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  <!-- 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    [(ngModel)]=\"value\"\n    id=\"{{ nombre() }}\"\n    name=\"{{ nombre() }}\"\n    aria-label=\"{{ 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}\n@if (control() != null) {\n  <control-messages [control]=\"control()\" [field]=\"nombre()\" />\n}\n" }]
+        }] });
 
 /**
  * Clase general común a ambos bit-dropdown (El normal y el múltiple).
@@ -4438,75 +4345,51 @@ class BitDropDownGeneralComponent extends BitCustomComponent {
         super();
         this.router = router;
         this.translateService = translateService;
-        this.hideLabel = false; // forzar no reservar espacio para el nombre del campo
-        this.emptyText = "bitnglibrary.bitdropdown.any"; //valor por defecto seleccionable como primer elemento
-        this.includeEmpty = true;
-        this.appendTo = "body";
-        this.group = false;
-        this.atributoLabel = "label"; // El atributo de los objetos de la lista que corresponde al label
-        this.atributoValue = "value"; // El atributo de los objetos de la lista que corresponde al valor
-        this.atributoDisabled = "inactivo"; // El atributo de los objetos de la lista que indica si un valor está deshabilitado
-        this.listaOpciones = [];
-        this.listaOpcionesVisible = [];
-        this.emptyTextResolved = "";
-    }
-    // custom processing after retrieving data array from service
-    // custom processing after retrieving data array from service
-    postRetrieveData() {
-        if (this.listaOpciones) {
-            this.listaOpcionesVisible = Object.assign([], this.listaOpciones);
-            // repasamos si hay opciones a excluir que debamos eliminar
-            if (this.excludedValues) {
-                this.listaOpcionesVisible = this.listaOpcionesVisible.filter((op) => this.excludedValues.indexOf(op.value) < 0);
+        this.hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : [])); // forzar no reservar espacio para el nombre del campo
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : [])); // lista de valores estáticos con lo que inicializamos el select
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.excludedValues = input(...(ngDevMode ? [undefined, { debugName: "excludedValues" }] : []));
+        this.emptyText = input("bitnglibrary.bitdropdown.any", ...(ngDevMode ? [{ debugName: "emptyText" }] : [])); //valor por defecto seleccionable como primer elemento
+        this.includeEmpty = input(true, ...(ngDevMode ? [{ debugName: "includeEmpty" }] : []));
+        this.valueAs = input(...(ngDevMode ? [undefined, { debugName: "valueAs" }] : []));
+        this.appendTo = input("body", ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+        this.group = input(false, ...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.atributoLabel = input("label", ...(ngDevMode ? [{ debugName: "atributoLabel" }] : [])); // El atributo de los objetos de la lista que corresponde al label
+        this.atributoValue = input("value", ...(ngDevMode ? [{ debugName: "atributoValue" }] : [])); // El atributo de los objetos de la lista que corresponde al valor
+        this.atributoDisabled = input("inactivo", ...(ngDevMode ? [{ debugName: "atributoDisabled" }] : [])); // El atributo de los objetos de la lista que indica si un valor está deshabilitado
+        this.translatedEmptyText = toSignal(this.translateService.selectTranslateWithContext(this.emptyText()));
+        this.listaOpciones = computed(() => {
+            let list = this.data() ? this.data().slice() : [];
+            this.log() && console.log("Lista de opciones forComponent:" + this.nombre(), list);
+            return list;
+        }, ...(ngDevMode ? [{ debugName: "listaOpciones" }] : []));
+        this.listaOpcionesVisible = computed(() => {
+            let opciones = [];
+            if (this.listaOpciones()) {
+                opciones = Object.assign([], this.listaOpciones());
+                // repasamos si hay opciones a excluir que debamos eliminar
+                if (this.excludedValues()) {
+                    opciones = opciones.filter((op) => this.excludedValues().indexOf(op.value) < 0);
+                    this.log() && console.log("Lista de opciones forComponent:" + this.nombre() + " después de excludeValues", opciones);
+                }
             }
-        }
-        else {
-            this.listaOpcionesVisible = [];
-        }
-        // determinamos si debemos incluir la opción "sin selección" y con qué texto
-        if (this.includeEmpty) {
-            this.translateService
-                .selectTranslateWithContext(this.emptyText)
-                .pipe(take(1))
-                .subscribe((translation) => {
-                let newOption = { value: null, label: translation };
-                newOption[this.atributoValue] = null;
-                newOption[this.atributoLabel] = translation;
-                this.listaOpcionesVisible.splice(0, 0, newOption);
-                this.emptyTextResolved = translation;
-            });
-        }
+            if (this.includeEmpty()) {
+                let newOption = { value: null, label: this.translatedEmptyText() };
+                newOption[this.atributoValue()] = null;
+                newOption[this.atributoLabel()] = this.translatedEmptyText();
+                opciones.splice(0, 0, newOption);
+                this.log() && console.log("Lista de opciones forComponent:" + this.nombre() + " después de includeEmpty", opciones);
+            }
+            this.log() && console.log("Lista de opciones visibles forComponent:" + this.nombre() + " después de excludeValues", opciones);
+            return opciones;
+        }, ...(ngDevMode ? [{ debugName: "listaOpcionesVisible" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownGeneralComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: BitDropDownGeneralComponent, isStandalone: true, inputs: { hideLabel: "hideLabel", data: "data", id: "id", excludedValues: "excludedValues", emptyText: "emptyText", includeEmpty: "includeEmpty", valueAs: "valueAs", appendTo: "appendTo", group: "group", atributoLabel: "atributoLabel", atributoValue: "atributoValue", atributoDisabled: "atributoDisabled" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownGeneralComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: BitDropDownGeneralComponent, isStandalone: true, inputs: { hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, excludedValues: { classPropertyName: "excludedValues", publicName: "excludedValues", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, includeEmpty: { classPropertyName: "includeEmpty", publicName: "includeEmpty", isSignal: true, isRequired: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, atributoLabel: { classPropertyName: "atributoLabel", publicName: "atributoLabel", isSignal: true, isRequired: false, transformFunction: null }, atributoValue: { classPropertyName: "atributoValue", publicName: "atributoValue", isSignal: true, isRequired: false, transformFunction: null }, atributoDisabled: { classPropertyName: "atributoDisabled", publicName: "atributoDisabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownGeneralComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: TranslateService }], propDecorators: { hideLabel: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], excludedValues: [{
-                type: Input
-            }], emptyText: [{
-                type: Input
-            }], includeEmpty: [{
-                type: Input
-            }], valueAs: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], atributoLabel: [{
-                type: Input
-            }], atributoValue: [{
-                type: Input
-            }], atributoDisabled: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: TranslateService }] });
 
 /**
  * Clase que utiliza un custom componente para select de elementos
@@ -4518,54 +4401,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * @input filter: true indicará que podemos buscar dentro del select, false que no.
  **/
 class BitDropDownComponent extends BitDropDownGeneralComponent {
-    constructor(router, translateService) {
+    constructor() {
+        const router = inject(ActivatedRoute);
+        const translateService = inject(TranslateService);
         super(router, translateService);
+        this.filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : []));
         this.router = router;
         this.translateService = translateService;
-        this.filter = false;
-    }
-    ngOnChanges(changes) {
-        let hayCambios = false;
-        for (let propName in changes) {
-            let changedProp = changes[propName];
-            if (propName === "data") {
-                this.listaOpciones = changedProp.currentValue ? changedProp.currentValue.slice() : [];
-                hayCambios = true;
-            }
-            else if (propName === "excludedValues") {
-                this.excludedValues = changedProp.currentValue;
-                hayCambios = true;
-            }
-            else if (propName === "includeEmpty") {
-                this.includeEmpty = changedProp.currentValue;
-                hayCambios = true;
-            }
-        }
-        if (hayCambios) {
-            this.postRetrieveData();
-        }
     }
     get value_lectura() {
-        let dom = this.listaOpciones && this.listaOpciones.find((d) => d[this.atributoValue] == this.value);
-        return dom ? dom[this.atributoLabel] : this.value;
+        let dom = this.listaOpciones() && this.listaOpciones().find((d) => d[this.atributoValue()] == this.value);
+        let v = dom ? dom[this.atributoLabel()] : this.value;
+        this.log() && console.log("value lectura: " + v);
+        return v;
     }
     writeValue(v) {
-        if (this.valueAs == "string") {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
+        if (this.valueAs() == "string") {
             // convertimos el number a string porque nos han dicho que el ID del select es string
             this.value = v != null ? "" + v : v;
-            console.log("writeValue as string", this.value);
         }
         else {
             this.value = v;
-            console.log("writeValue", this.value);
         }
     }
     _onChangeValue(event) {
         this.value = event.value;
-        console.log("onChangeValue", event.value);
         // convertimos el string seleccionado del select a number
-        if (this.valueAs == "string") {
-            console.log("value as string");
+        if (this.valueAs() == "string") {
+            this.log() && console.log(`_onChangeValue forComponent ${this.nombre()} value as string`);
             this.changeComponentValue(this.value != null ? +event.value : null);
         }
         else {
@@ -4576,14 +4440,14 @@ class BitDropDownComponent extends BitDropDownGeneralComponent {
         this.value = null;
         this.changeComponentValue(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDropDownComponent, isStandalone: false, selector: "bit-dropdown", inputs: { filter: "filter" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDropDownComponent, isStandalone: false, selector: "bit-dropdown", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDropDownComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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\"></control-messages>\n  }\n}\n", dependencies: [{ kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownComponent, decorators: [{
             type: Component,
@@ -4593,113 +4457,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => BitDropDownComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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\"></control-messages>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: TranslateService }], propDecorators: { filter: [{
-                type: Input
-            }] } });
+                    ], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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: () => [] });
 
 /**
  * Clase que utiliza un custom componente para select múltiple de elementos
  *    <bit-dropdown-multiple id="tipolog" [formControl]="formControl"">&nbsp;&nbsp;Tipus d'operació</bit-dropdown-multiple>
  **/
 class BitDropDownMultipleComponent extends BitDropDownGeneralComponent {
-    constructor(router, translateService, changeDetectorRef) {
+    constructor() {
+        const router = inject(ActivatedRoute);
+        const translateService = inject(TranslateService);
         super(router, translateService);
+        this.maxSelectedLabels = input(3, ...(ngDevMode ? [{ debugName: "maxSelectedLabels" }] : []));
+        this.showSeparateSelectedLabels = input(false, ...(ngDevMode ? [{ debugName: "showSeparateSelectedLabels" }] : [])); // indica si se muestran los elementos seleccionados en una columna separada
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : [])); //título que aparece en el link para eliminar un elemento una vez seleccionado
+        this.filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : []));
         this.router = router;
         this.translateService = translateService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.maxSelectedLabels = 3;
-        this.showSeparateSelectedLabels = false; // indica si se muestran los elementos seleccionados en una columna separada
-    }
-    ngOnChanges(changes) {
-        let hayCambios = false;
-        for (let propName in changes) {
-            let changedProp = changes[propName];
-            if (propName === "data") {
-                this.listaOpciones = changedProp.currentValue ? changedProp.currentValue.slice() : [];
-                hayCambios = true;
-            }
-            else if (propName === "excludedValues") {
-                this.excludedValues = changedProp.currentValue;
-                hayCambios = true;
-            }
-            else if (propName === "includeEmpty") {
-                this.includeEmpty = changedProp.currentValue;
-                hayCambios = true;
-            }
-        }
-        if (hayCambios) {
-            this.postRetrieveData();
-        }
     }
     labelSelectedItem(id) {
         let label = "";
-        if (this.listaOpciones) {
-            let selected = this.listaOpciones.find((c) => c[this.atributoValue] == id);
+        if (this.listaOpciones()) {
+            let selected = this.listaOpciones().find((c) => c[this.atributoValue()] == id);
             if (selected) {
-                label = selected[this.atributoLabel];
+                label = selected[this.atributoLabel()];
+                this.log() && console.log(`labelSelectedItem forComponent ${this.nombre()} selected: ${label}`);
             }
         }
         return label;
     }
     deleteSelectedItem(event, item) {
+        this.log() && console.log("deleteSelectedItem forComponent:" + this.nombre(), item);
         event.preventDefault();
         let index = this.value.indexOf(item);
         var currentValue = this.value;
+        this.log() && console.log("currentValue: " + currentValue);
         currentValue.splice(index, 1);
         this.value = currentValue.slice(0);
+        this.log() && console.log("value: " + currentValue);
         this.emitValue();
     }
     get value_lectura() {
-        let vals = this.control.value;
+        let vals = this.control().value;
         if (!!vals) {
             let value = [];
             for (let val of vals) {
-                let opcion = this.listaOpciones.find((d) => d[this.atributoValue] == val);
+                let opcion = this.listaOpciones().find((d) => d[this.atributoValue()] == val);
                 if (opcion) {
-                    value.push(opcion[this.atributoLabel]);
+                    value.push(opcion[this.atributoLabel()]);
                 }
                 else {
                     value.push(val);
                 }
             }
-            return value.join(", ");
+            let v = value.join(", ");
+            this.log() && console.log("value lectura: " + v);
+            return v;
         }
+        this.log() && console.log("value lectura is blank");
         return "";
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
-        if (this.valueAs == "string") {
+        if (this.valueAs() == "string") {
             // convertimos el number a string porque nos han dicho que el ID del select es string
             if (v != null) {
                 this.value = [];
                 v.forEach((item) => this.value.push("" + item));
+                this.log() && console.log("currentValues: ", this.value);
             }
         }
     }
     _onChangeValue(event) {
         this.value = event.value;
+        this.log() && console.log("_onChangeValue forComponent:" + this.nombre() + " with values: " + this.value);
         // convertimos el string selecionado del select a number
         let v = this.value;
-        if (this.valueAs == "string") {
+        if (this.valueAs() == "string") {
             v = [];
             this.value.forEach((item) => v.push(+item));
+            this.log() && console.log("value as string: ", this.value);
         }
         this.emitValue();
     }
     _onClear() {
+        this.log() && console.log("_onClear forComponent:" + this.nombre());
         this.value = null;
         this.emitValue();
     }
     emitValue() {
         this.changeComponentValue(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownMultipleComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDropDownMultipleComponent, isStandalone: false, selector: "bit-dropdown-multiple", inputs: { maxSelectedLabels: "maxSelectedLabels", showSeparateSelectedLabels: "showSeparateSelectedLabels", title: "title", filter: "filter" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitDropDownMultipleComponent, isStandalone: false, selector: "bit-dropdown-multiple", inputs: { maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, showSeparateSelectedLabels: { classPropertyName: "showSeparateSelectedLabels", publicName: "showSeparateSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitDropDownMultipleComponent),
                 multi: true
-            }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label><ng-content></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\n    id=\"{{ id }}\"\n    [(ngModel)]=\"value\"\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  </p-multiSelect>\n  @if (control != null) {\n    <control-messages [control]=\"control\" [field]=\"id\"></control-messages>\n  }\n  @if (showSeparateSelectedLabels) {\n    <div>\n      <label>&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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label><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    aria-label=\"{{ 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>&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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitDropDownMultipleComponent, decorators: [{
             type: Component,
@@ -4707,16 +4563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitDropDownMultipleComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label><ng-content></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\n    id=\"{{ id }}\"\n    [(ngModel)]=\"value\"\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  </p-multiSelect>\n  @if (control != null) {\n    <control-messages [control]=\"control\" [field]=\"id\"></control-messages>\n  }\n  @if (showSeparateSelectedLabels) {\n    <div>\n      <label>&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: () => [{ type: i1$1.ActivatedRoute }, { type: TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { maxSelectedLabels: [{
-                type: Input
-            }], showSeparateSelectedLabels: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label><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    aria-label=\"{{ 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>&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: () => [] });
 
 class ConfigurationEditor {
     constructor() {
@@ -4751,24 +4599,27 @@ class ConfigurationEditor {
 class BitEditorComponent extends BitCustomComponent {
     constructor() {
         super(...arguments);
-        this.tipo = "default";
+        this.tipo = input("default", ...(ngDevMode ? [{ debugName: "tipo" }] : []));
         // si es "custom", se utiliza el objeto de configuracion: configuration.
         // si es "default", no se utiliza ninguna configuracion (se muestran todos los controles)
-        this.configuration = BitEditorComponent.globalConfiguration;
-        this.height = 100;
-        this.onTextChange = new EventEmitter();
+        this.configuration = input(BitEditorComponent.globalConfiguration, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.height = input(100, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.onTextChange = output();
     }
     // es posible tener configuraciones globales en todos los bit-editor de un proyecto
     static { this.globalConfiguration = ConfigurationEditor.newObject(); }
     get value_lectura() {
         if (this.value == null) {
+            this.log() && console.log("value lectura is null");
             return "";
         } // si es null o undefined (es lo que evalúa el "==null")
         else {
+            this.log() && console.log("value lectura: " + this.value);
             return this.value;
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         if (!v) {
             this.value = "";
         }
@@ -4778,6 +4629,7 @@ class BitEditorComponent extends BitCustomComponent {
     }
     onChangeValue(text) {
         this.value = text;
+        this.log() && console.log("_onSelect forComponent: " + this.nombre() + " with value:" + this.value);
         this.changeComponentValue(this.value);
     }
     onInit(quill) {
@@ -4792,17 +4644,19 @@ class BitEditorComponent extends BitCustomComponent {
             });*/
     }
     _onTextChange(event) {
+        this.log() && console.log("_onTextChange forComponent: " + this.nombre() + " with event:", event);
         this.onTextChange.emit(event);
     }
     get configuracion() {
-        return this.configuration ? this.configuration : BitEditorComponent.globalConfiguration;
+        const configuration = this.configuration();
+        return configuration ? configuration : BitEditorComponent.globalConfiguration;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitEditorComponent, isStandalone: false, selector: "bit-editor", inputs: { tipo: "tipo", configuration: "configuration", height: "height" }, outputs: { onTextChange: "onTextChange" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitEditorComponent, isStandalone: false, selector: "bit-editor", inputs: { tipo: { classPropertyName: "tipo", publicName: "tipo", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTextChange: "onTextChange" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitEditorComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-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\n    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  </p-editor>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i2$1.Header, selector: "p-header" }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: i5.TranslocoPipe, name: "transloco" }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-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    aria-label=\"{{ 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"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitEditorComponent, decorators: [{
             type: Component,
@@ -4810,273 +4664,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitEditorComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-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\n    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  </p-editor>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n" }]
-        }], propDecorators: { tipo: [{
-                type: Input
-            }], configuration: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], onTextChange: [{
-                type: Output
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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\" value=\"ordered\" type=\"button\"></button>\n          <button class=\"ql-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    aria-label=\"{{ 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" }]
+        }] });
 
 class BitReadonlyComponent {
-    constructor(router, sessionShared, ayudaService, changeDetectorRef, dateUtils) {
-        this.router = router;
-        this.sessionShared = sessionShared;
-        this.ayudaService = ayudaService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.dateUtils = dateUtils;
-        this.hideLabel = false;
-        this.opcionesDropdown = [];
-    }
-    ngOnInit() {
-        if (!!this.domain && !this.data) {
-            this.router.data.subscribe(result => {
-                let dominios = result["dominios"];
-                let domainTipo = dominios[this.domain];
-                if (domainTipo != null) {
-                    domainTipo.subscribe((result) => {
-                        //console.log(result);
-                        this.sessionShared.set(this.domain, result.slice()); // almacenamos en sesión una copia para evitar transmitir cambios
-                        this.opcionesDropdown = result.slice();
-                        this.changeDetectorRef.detectChanges();
-                    }, (error) => {
-                        console.log("Error carrega dominis", this.domain, error);
-                    });
-                }
-                else {
-                    console.log("Domini sense dades", this.domain);
-                }
-            });
-        }
-        else if (this.data) {
-            this.opcionesDropdown = this.data.slice();
-        }
-    }
-    ngOnChanges(changes) {
-        for (let propName in changes) {
-            if (propName === "data") {
-                let newData = changes[propName].currentValue || [];
-                this.opcionesDropdown = newData.slice();
-                this.changeDetectorRef.detectChanges();
-            }
-        }
+    constructor() {
+        this.router = inject(ActivatedRoute);
+        this.sessionShared = inject(SessionSharedService);
+        this.ayudaService = inject(AyudaService);
+        this.dateUtils = inject(DateUtils);
+        this.ayuda = input(...(ngDevMode ? [undefined, { debugName: "ayuda" }] : []));
+        this.valor = input(...(ngDevMode ? [undefined, { debugName: "valor" }] : []));
+        this.tipo = input("text", ...(ngDevMode ? [{ debugName: "tipo" }] : [])); // text (default), date, datetime, time, boolean, textarea, list, list-multiple
+        this.hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : [])); //lista de valores estáticos con lo que inicializamos el select
+        this.isTextarea = computed(() => this.tipo() === "textarea", ...(ngDevMode ? [{ debugName: "isTextarea" }] : []));
+        this.opcionesDropdown = computed(() => {
+            return (this.data() && this.data().slice()) || [];
+        }, ...(ngDevMode ? [{ debugName: "opcionesDropdown" }] : []));
     }
     showAyuda() {
-        this.ayudaService.mostrarAyuda(this.ayuda);
+        this.ayudaService.mostrarAyuda(this.ayuda());
     }
     get value_lectura() {
-        this.tipo = this.tipo || "text";
-        switch (this.tipo) {
+        const valor = this.valor();
+        switch (this.tipo()) {
             case "date":
-                return this.valor ? this.dateUtils.getDateAsString(this.dateUtils.stringShortToDate(this.valor)) : "";
+                return valor ? this.dateUtils.getDateAsString(this.dateUtils.stringShortToDate(valor)) : "";
             case "datetime":
-                return this.valor ? this.dateUtils.getDateTimeAsString(this.dateUtils.stringToDate(this.valor)) : "";
+                return valor ? this.dateUtils.getDateTimeAsString(this.dateUtils.stringToDate(valor)) : "";
             case "time":
-                return this.valor ? this.dateUtils.getTimeAsString(this.dateUtils.stringToTime(this.valor)) : "";
+                return valor ? this.dateUtils.getTimeAsString(this.dateUtils.stringToTime(valor)) : "";
             case "boolean":
-                return this.valor ? "Sí" : "No";
+                return valor ? "Sí" : "No";
             case "list":
-                let d = this.opcionesDropdown.find(d => d.value == this.valor);
+                let d = this.opcionesDropdown().find(d => d.value == valor);
                 return d ? d.label : "";
             case "list-multiple":
-                let labels = this.opcionesDropdown && this.opcionesDropdown.filter(d => this.valor && this.valor.indexOf(d.value) > -1).map(d => d.label);
+                let labels = this.opcionesDropdown() && this.opcionesDropdown().filter(d => valor && valor.indexOf(d.value) > -1).map(d => d.label);
                 return labels ? labels.join(", ") : null;
             default:
-                return this.valor;
+                return valor;
         }
     }
-    get isTextarea() {
-        return this.tipo === "textarea";
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitReadonlyComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: SessionSharedService }, { token: AyudaService }, { token: i0.ChangeDetectorRef }, { token: DateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitReadonlyComponent, isStandalone: false, selector: "bit-readonly", inputs: { ayuda: "ayuda", valor: "valor", tipo: "tipo", hideLabel: "hideLabel", data: "data", domain: "domain" }, usesOnChanges: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></ng-content>&nbsp;&nbsp;\n    @if (ayuda) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (!isTextarea) {\n  <p class=\"lectura\">{{value_lectura}}</p>\n}\n@if (isTextarea) {\n  <pre class=\"lectura\">{{value_lectura}}</pre>\n}" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitReadonlyComponent, isStandalone: false, selector: "bit-readonly", inputs: { ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, tipo: { classPropertyName: "tipo", publicName: "tipo", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\n    <ng-content />&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (!isTextarea()) {\n  <p class=\"lectura\">{{value_lectura}}</p>\n}\n@if (isTextarea()) {\n  <pre class=\"lectura\">{{value_lectura}}</pre>\n}" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitReadonlyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-readonly", standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></ng-content>&nbsp;&nbsp;\n    @if (ayuda) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (!isTextarea) {\n  <p class=\"lectura\">{{value_lectura}}</p>\n}\n@if (isTextarea) {\n  <pre class=\"lectura\">{{value_lectura}}</pre>\n}" }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: SessionSharedService }, { type: AyudaService }, { type: i0.ChangeDetectorRef }, { type: DateUtils }], propDecorators: { ayuda: [{
-                type: Input
-            }], valor: [{
-                type: Input
-            }], tipo: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], domain: [{
-                type: Input
-            }] } });
-
-class ViewModeDirective {
-    constructor(tpl) {
-        this.tpl = tpl;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ViewModeDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: ViewModeDirective, isStandalone: false, selector: "[viewMode]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ViewModeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[viewMode]",
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-class EditModeDirective {
-    constructor(tpl) {
-        this.tpl = tpl;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditModeDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EditModeDirective, isStandalone: false, selector: "[editMode]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditModeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[editMode]",
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-/**
- * Componente que permite editar en linea valores
- */
-class BitEditableComponent extends BaseComponent {
-    constructor(host, changeDetectorRef) {
-        super();
-        this.host = host;
-        this.changeDetectorRef = changeDetectorRef;
-        this.update = new EventEmitter();
-        this.editMode = new Subject();
-        this.editMode$ = this.editMode.asObservable();
-        this.mode = "view";
-    }
-    ngOnInit() {
-        this.viewModeHandler();
-        this.editModeHandler();
-    }
-    /**alterna entre las dos vistas, la de visualización y la edición */
-    get currentView() {
-        return this.mode === "view" ? this.viewModeTpl.tpl : this.editModeTpl.tpl;
-    }
-    get element() {
-        return this.host.nativeElement;
-    }
-    /**Gestiona el dobleClick sobre el componente */
-    viewModeHandler() {
-        fromEvent(this.element, "click")
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            console.log("click on element", this.element);
-            this.mode = "edit";
-            this.editMode.next(true); //emitimos el evento de que hemos pasado a edición
-            this.changeDetectorRef.detectChanges(); //tenemos que activar el mecanismo de detección de cambios
-        });
-    }
-    /**Gestiona hacer click fuera del componente. Solo se activa si estamos en modo edición  */
-    editModeHandler() {
-        //observable cuando pulsan con el ratón en cualquier parte de la página
-        const clickOutside$ = fromEvent(document, "click").pipe(filter(({ target }) => {
-            //filtramos que el click no sea precisamente en el elemento que estamos editando
-            return this.element.contains(target) === false;
-        }), take(1));
-        //observable cuando pulsan enter en el input
-        fromEvent(this.element, "keyup")
-            .pipe(filter((e) => e.keyCode == 13), takeUntil(this.destroy$))
-            .subscribe((event) => {
-            console.log("event enter pressed");
-            this.throwUpdate();
-        });
-        //cuando editMode se dispara, al hacer dobleclick el usuario, activamos el observable clickOutside para gestionar cuando
-        //el usuario ha terminado de editar el componente
-        this.editMode$.pipe(switchMapTo(clickOutside$), takeUntil(this.destroy$)).subscribe((event) => {
-            console.log("event click outside");
-            this.throwUpdate();
-        });
-    }
-    throwUpdate() {
-        this.update.next(null);
-        this.mode = "view";
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitEditableComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitEditableComponent, isStandalone: false, selector: "bit-editable", outputs: { update: "update" }, queries: [{ propertyName: "viewModeTpl", first: true, predicate: ViewModeDirective, descendants: true }, { propertyName: "editModeTpl", first: true, predicate: EditModeDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngTemplateOutlet="currentView"></ng-container> `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitEditableComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "bit-editable",
-                    template: ` <ng-container *ngTemplateOutlet="currentView"></ng-container> `,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { update: [{
-                type: Output
-            }], viewModeTpl: [{
-                type: ContentChild,
-                args: [ViewModeDirective]
-            }], editModeTpl: [{
-                type: ContentChild,
-                args: [EditModeDirective]
-            }] } });
+            args: [{ selector: "bit-readonly", standalone: false, template: "@if (!hideLabel()) {\n  <label>\n    <ng-content />&nbsp;&nbsp;\n    @if (ayuda()) {\n      <i class=\"btn-ayuda fa fa-question\" (click)=\"showAyuda()\"></i>\n    }\n  </label>\n}\n@if (!isTextarea()) {\n  <p class=\"lectura\">{{value_lectura}}</p>\n}\n@if (isTextarea()) {\n  <pre class=\"lectura\">{{value_lectura}}</pre>\n}" }]
+        }] });
 
 class BitNumberComponent extends BitCustomComponent {
     constructor() {
         super(...arguments);
-        this.modo = "decimal";
-        this.separadorGrupo = false;
-        this.incremento = 1;
+        this.modo = input("decimal", ...(ngDevMode ? [{ debugName: "modo" }] : []));
+        this.divisa = input(...(ngDevMode ? [undefined, { debugName: "divisa" }] : []));
+        this.prefijo = input(...(ngDevMode ? [undefined, { debugName: "prefijo" }] : []));
+        this.sufijo = input(...(ngDevMode ? [undefined, { debugName: "sufijo" }] : []));
+        this.minimo = input(...(ngDevMode ? [undefined, { debugName: "minimo" }] : []));
+        this.maximo = input(...(ngDevMode ? [undefined, { debugName: "maximo" }] : []));
+        this.numeroDecimales = input(...(ngDevMode ? [undefined, { debugName: "numeroDecimales" }] : []));
+        this.maximoDecimales = input(...(ngDevMode ? [undefined, { debugName: "maximoDecimales" }] : []));
+        this.separadorGrupo = input(false, ...(ngDevMode ? [{ debugName: "separadorGrupo" }] : []));
+        this.mostrarBotones = input(...(ngDevMode ? [undefined, { debugName: "mostrarBotones" }] : []));
+        this.incremento = input(1, ...(ngDevMode ? [{ debugName: "incremento" }] : []));
+        this.inputElement = viewChild('inputReference', ...(ngDevMode ? [{ debugName: "inputElement" }] : []));
     }
     get value_lectura() {
+        this.log() && console.log("value lectura: " + this.value);
         return this.value;
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
     }
     onChangeValue(text) {
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + text);
         this.value = text;
         this.changeComponentValue(this.value);
     }
-    // Hasta que https://github.com/primefaces/primeng/issues/11442 no se resuelva,
-    // hacemos esta triquiñuela para que al pulsar el 'punto' o la 'coma'
-    // se nos situe el cursor en la primera posición decimal.
-    // (basado en https://github.com/primefaces/primeng/issues/8985#issuecomment-1351712540 y
-    //  https://stackoverflow.com/a/70303350/9741090)
-    onKeyDown(key) {
-        const input = this.inputElement.nativeElement.firstChild.childNodes[0];
-        if (!input)
-            return;
-        if (key === "," || key === ".") {
-            if (input.value.indexOf(",") === -1) {
-                input.value += ",";
-            }
-            else {
-                let posicionComa = input.value.indexOf(",");
-                input.focus();
-                input.setSelectionRange(posicionComa + 1, posicionComa + 1);
-            }
-        }
-        else if (key === "ArrowLeft") {
-            // corregir efecto cursor a la izquierda si estamos detrás de €
-            if (this.modo === "currency") {
-                let posicionEspacio = input.value.indexOf(String.fromCharCode(160));
-                if (posicionEspacio > 0 && input.selectionStart > posicionEspacio) {
-                    input.setSelectionRange(posicionEspacio, posicionEspacio);
-                }
-            }
-            // corregir efecto cursor a la izquierda con el texto seleccionado por completo
-            if (input.selectionStart === 0 && input.selectionEnd === input.value.length) {
-                input.setSelectionRange(0, 0);
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitNumberComponent, isStandalone: false, selector: "bit-number", inputs: { modo: "modo", divisa: "divisa", prefijo: "prefijo", sufijo: "sufijo", minimo: "minimo", maximo: "maximo", numeroDecimales: "numeroDecimales", maximoDecimales: "maximoDecimales", separadorGrupo: "separadorGrupo", mostrarBotones: "mostrarBotones", incremento: "incremento" }, host: { listeners: { "keydown": "onKeyDown($event.key)" } }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitNumberComponent, isStandalone: false, selector: "bit-number", inputs: { modo: { classPropertyName: "modo", publicName: "modo", isSignal: true, isRequired: false, transformFunction: null }, divisa: { classPropertyName: "divisa", publicName: "divisa", isSignal: true, isRequired: false, transformFunction: null }, prefijo: { classPropertyName: "prefijo", publicName: "prefijo", isSignal: true, isRequired: false, transformFunction: null }, sufijo: { classPropertyName: "sufijo", publicName: "sufijo", isSignal: true, isRequired: false, transformFunction: null }, minimo: { classPropertyName: "minimo", publicName: "minimo", isSignal: true, isRequired: false, transformFunction: null }, maximo: { classPropertyName: "maximo", publicName: "maximo", isSignal: true, isRequired: false, transformFunction: null }, numeroDecimales: { classPropertyName: "numeroDecimales", publicName: "numeroDecimales", isSignal: true, isRequired: false, transformFunction: null }, maximoDecimales: { classPropertyName: "maximoDecimales", publicName: "maximoDecimales", isSignal: true, isRequired: false, transformFunction: null }, separadorGrupo: { classPropertyName: "separadorGrupo", publicName: "separadorGrupo", isSignal: true, isRequired: false, transformFunction: null }, mostrarBotones: { classPropertyName: "mostrarBotones", publicName: "mostrarBotones", isSignal: true, isRequired: false, transformFunction: null }, incremento: { classPropertyName: "incremento", publicName: "incremento", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitNumberComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputReference"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i1$4.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+            }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputReference"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitNumberComponent, decorators: [{
             type: Component,
@@ -5084,52 +4757,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitNumberComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n" }]
-        }], propDecorators: { modo: [{
-                type: Input
-            }], divisa: [{
-                type: Input
-            }], prefijo: [{
-                type: Input
-            }], sufijo: [{
-                type: Input
-            }], minimo: [{
-                type: Input
-            }], maximo: [{
-                type: Input
-            }], numeroDecimales: [{
-                type: Input
-            }], maximoDecimales: [{
-                type: Input
-            }], separadorGrupo: [{
-                type: Input
-            }], mostrarBotones: [{
-                type: Input
-            }], incremento: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['inputReference', { read: ElementRef }]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event.key"]]
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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" }]
+        }] });
 
 class BitAmountComponent extends BitNumberComponent {
     constructor() {
         super(...arguments);
-        this.modo = "currency";
-        this.divisa = "EUR";
-        this.mostrarMoneda = true;
-        this.maximoDecimales = 2;
-        this.separadorGrupo = true;
+        this.prefijo = input(...(ngDevMode ? [undefined, { debugName: "prefijo" }] : []));
+        this.sufijo = input(...(ngDevMode ? [undefined, { debugName: "sufijo" }] : []));
+        this.minimo = input(...(ngDevMode ? [undefined, { debugName: "minimo" }] : []));
+        this.maximo = input(...(ngDevMode ? [undefined, { debugName: "maximo" }] : []));
+        this.mostrarBotones = input(...(ngDevMode ? [undefined, { debugName: "mostrarBotones" }] : []));
+        this.incremento = input(...(ngDevMode ? [undefined, { debugName: "incremento" }] : []));
+        this.modo = input("currency", ...(ngDevMode ? [{ debugName: "modo" }] : []));
+        this.divisa = input("EUR", ...(ngDevMode ? [{ debugName: "divisa" }] : []));
+        this.maximoDecimales = input(2, ...(ngDevMode ? [{ debugName: "maximoDecimales" }] : []));
+        this.separadorGrupo = input(true, ...(ngDevMode ? [{ debugName: "separadorGrupo" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitAmountComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitAmountComponent, isStandalone: false, selector: "bit-amount", inputs: { prefijo: "prefijo", sufijo: "sufijo", minimo: "minimo", maximo: "maximo", mostrarBotones: "mostrarBotones", incremento: "incremento" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitAmountComponent, isStandalone: false, selector: "bit-amount", inputs: { prefijo: { classPropertyName: "prefijo", publicName: "prefijo", isSignal: true, isRequired: false, transformFunction: null }, sufijo: { classPropertyName: "sufijo", publicName: "sufijo", isSignal: true, isRequired: false, transformFunction: null }, minimo: { classPropertyName: "minimo", publicName: "minimo", isSignal: true, isRequired: false, transformFunction: null }, maximo: { classPropertyName: "maximo", publicName: "maximo", isSignal: true, isRequired: false, transformFunction: null }, mostrarBotones: { classPropertyName: "mostrarBotones", publicName: "mostrarBotones", isSignal: true, isRequired: false, transformFunction: null }, incremento: { classPropertyName: "incremento", publicName: "incremento", isSignal: true, isRequired: false, transformFunction: null }, modo: { classPropertyName: "modo", publicName: "modo", isSignal: true, isRequired: false, transformFunction: null }, divisa: { classPropertyName: "divisa", publicName: "divisa", isSignal: true, isRequired: false, transformFunction: null }, maximoDecimales: { classPropertyName: "maximoDecimales", publicName: "maximoDecimales", isSignal: true, isRequired: false, transformFunction: null }, separadorGrupo: { classPropertyName: "separadorGrupo", publicName: "separadorGrupo", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitAmountComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n", dependencies: [{ kind: "component", type: i1$4.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitAmountComponent, decorators: [{
             type: Component,
@@ -5137,20 +4787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitAmountComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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    [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    [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\"></control-messages>\n}\n" }]
-        }], propDecorators: { prefijo: [{
-                type: Input
-            }], sufijo: [{
-                type: Input
-            }], minimo: [{
-                type: Input
-            }], maximo: [{
-                type: Input
-            }], mostrarBotones: [{
-                type: Input
-            }], incremento: [{
-                type: Input
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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    aria-label=\"{{ 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" }]
+        }] });
 
 /** Esta clase contiene información sobre el menú pulsado por el usuairo. Permite setear dicho valor y recuperarlo mediante un signal */
 class MenuService {
@@ -5180,9 +4818,11 @@ class MenuTitle {
 
 class BitSidebarComponent {
     constructor() {
-        this.onSelectLanguage = new EventEmitter();
-        this.onCloseMenu = new EventEmitter();
-        this.onMenuTitle = new EventEmitter();
+        this.items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.visibilidad = input(undefined, ...(ngDevMode ? [{ debugName: "visibilidad" }] : []));
+        this.onSelectLanguage = output();
+        this.onCloseMenu = output();
+        this.onMenuTitle = output();
         // servicio para almacenar datos en la sesión del navegador
         this.storageService = inject(StorageService);
     }
@@ -5191,7 +4831,7 @@ class BitSidebarComponent {
     }
     clickMenu(item) {
         item.expanded = !item.expanded;
-        this.storageService.setData(StorageService.MENU, this.items);
+        this.storageService.setData(StorageService.MENU, this.items());
     }
     clickMenuItem(event, item, subitem) {
         event.stopPropagation();
@@ -5208,22 +4848,12 @@ class BitSidebarComponent {
         this.onSelectLanguage.emit(language);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitSidebarComponent, isStandalone: false, selector: "bit-sidebar", inputs: { items: "items", visibilidad: "visibilidad" }, outputs: { onSelectLanguage: "onSelectLanguage", onCloseMenu: "onCloseMenu", onMenuTitle: "onMenuTitle" }, ngImport: i0, template: "<div id=\"mySidebar\" class=\"sidebar\" [style.min-width]=\"visibilidad ? '300px' : '0px'\">\n  <i class=\"closebtn fa fa-times\" (click)=\"closeMenu()\"></i>\n  <ul>\n    @for (item of items; track item) {\n      <li class=\"item\" (click)=\"clickMenu(item)\">\n        @if (item.items.length > 0) {\n          <i class=\"fa\" [ngClass]=\"{'fa-chevron-right':!item.expanded,'fa-chevron-down':item.expanded}\"></i>\n        }\n        {{ \"menu.\" + item.label | transloco }}\n        @if (item.expanded) {\n          <ul>\n            @for (subitem of item.items; track subitem) {\n              <li class=\"subitem\" [routerLink]=\"subitem.routerLink\" (click)=\"clickMenuItem($event, item, subitem)\">\n                <i class=\"{{subitem.icon}}\"></i>&nbsp;&nbsp;\n                <a>{{ \"menu.\" + subitem.label | transloco }}</a></li>\n            }\n          </ul>\n        }\n      </li>\n    }\n  </ul>\n  <!-- <p class=\"idioma-selector\">    \n    <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"></bit-language-selector>\n  </p> -->\n  <p class=\"nombre-desarrollado\">{{ \"menu.desarrollado-por\" | transloco }} <a href=\"https://www.fundaciobit.org/\" target=\"_blank\">Fundaci\u00F3 Bit</a></p>\n</div>\n", styles: [".idioma-selector{padding:0;width:100%;position:absolute;bottom:44px;text-align:center}.sidebar{height:100%;width:0;position:fixed;z-index:100;top:0;left:0;background-color:#eaeaea;overflow:hidden;padding-top:60px;transition:.3s;cursor:pointer;box-shadow:1px 0 10px #656565}.sidebar>ul{padding-left:20px;overflow-x:hidden;overflow-y:auto;height:86.2%;padding-bottom:30px}.sidebar i,.sidebar a{text-decoration:none}.sidebar i{padding-left:10px;margin-right:5px}.sidebar li{padding:8px 0}.sidebar li.item{font-weight:700;cursor:pointer}li.item ul{padding-left:20px}.sidebar li.subitem{font-weight:400;transition:.5s}.sidebar li.subitem:hover{background:#ffffff80;-webkit-border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.sidebar li.subitem:hover a,.sidebar li.subitem:hover i{color:#0068a0}.sidebar .closebtn{color:#9a9a9a;position:absolute;top:18px;right:25px;font-size:25px}.sidebar .nombre-desarrollado{position:absolute;bottom:-13px;width:100%;background:#fff;padding:20px;text-align:center;cursor:auto}.sidebar .nombre-desarrollado a{font-weight:700;color:#1b8ac6}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitSidebarComponent, isStandalone: false, selector: "bit-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, visibilidad: { classPropertyName: "visibilidad", publicName: "visibilidad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectLanguage: "onSelectLanguage", onCloseMenu: "onCloseMenu", onMenuTitle: "onMenuTitle" }, ngImport: i0, template: "<div id=\"mySidebar\" class=\"sidebar\" [style.min-width]=\"visibilidad() ? '300px' : '0px'\">\n  <i class=\"closebtn fa fa-times\" (click)=\"closeMenu()\"></i>\n  <ul>\n    @for (item of items(); track item) {\n      <li class=\"item\" (click)=\"clickMenu(item)\">\n        @if (item.items.length > 0) {\n          <i class=\"fa\" [ngClass]=\"{'fa-chevron-right':!item.expanded,'fa-chevron-down':item.expanded}\"></i>\n        }\n        {{ \"menu.\" + item.label | transloco }}\n        @if (item.expanded) {\n          <ul>\n            @for (subitem of item.items; track subitem) {\n              <li class=\"subitem\" [routerLink]=\"subitem.routerLink\" (click)=\"clickMenuItem($event, item, subitem)\">\n                <i class=\"{{subitem.icon}}\"></i>&nbsp;&nbsp;\n                <a>{{ \"menu.\" + subitem.label | transloco }}</a></li>\n            }\n          </ul>\n        }\n      </li>\n    }\n  </ul>\n  <!-- <p class=\"idioma-selector\">    \n    <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"></bit-language-selector>\n  </p> -->\n  <p class=\"nombre-desarrollado\">{{ \"menu.desarrollado-por\" | transloco }} <a href=\"https://www.fundaciobit.org/\" target=\"_blank\">Fundaci\u00F3 Bit</a></p>\n</div>\n", styles: [".idioma-selector{padding:0;width:100%;position:absolute;bottom:44px;text-align:center}.sidebar{height:100%;width:0;position:fixed;z-index:100;top:0;left:0;background-color:#eaeaea;overflow:hidden;padding-top:60px;transition:.3s;cursor:pointer;box-shadow:1px 0 10px #656565}.sidebar>ul{padding-left:20px;overflow-x:hidden;overflow-y:auto;height:86.2%;padding-bottom:30px}.sidebar i,.sidebar a{text-decoration:none}.sidebar i{padding-left:10px;margin-right:5px}.sidebar li{padding:8px 0}.sidebar li.item{font-weight:700;cursor:pointer}li.item ul{padding-left:20px}.sidebar li.subitem{font-weight:400;transition:.5s}.sidebar li.subitem:hover{background:#ffffff80;-webkit-border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.sidebar li.subitem:hover a,.sidebar li.subitem:hover i{color:#0068a0}.sidebar .closebtn{color:#9a9a9a;position:absolute;top:18px;right:25px;font-size:25px}.sidebar .nombre-desarrollado{position:absolute;bottom:-13px;width:100%;background:#fff;padding:20px;text-align:center;cursor:auto}.sidebar .nombre-desarrollado a{font-weight:700;color:#1b8ac6}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-sidebar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div id=\"mySidebar\" class=\"sidebar\" [style.min-width]=\"visibilidad ? '300px' : '0px'\">\n  <i class=\"closebtn fa fa-times\" (click)=\"closeMenu()\"></i>\n  <ul>\n    @for (item of items; track item) {\n      <li class=\"item\" (click)=\"clickMenu(item)\">\n        @if (item.items.length > 0) {\n          <i class=\"fa\" [ngClass]=\"{'fa-chevron-right':!item.expanded,'fa-chevron-down':item.expanded}\"></i>\n        }\n        {{ \"menu.\" + item.label | transloco }}\n        @if (item.expanded) {\n          <ul>\n            @for (subitem of item.items; track subitem) {\n              <li class=\"subitem\" [routerLink]=\"subitem.routerLink\" (click)=\"clickMenuItem($event, item, subitem)\">\n                <i class=\"{{subitem.icon}}\"></i>&nbsp;&nbsp;\n                <a>{{ \"menu.\" + subitem.label | transloco }}</a></li>\n            }\n          </ul>\n        }\n      </li>\n    }\n  </ul>\n  <!-- <p class=\"idioma-selector\">    \n    <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"></bit-language-selector>\n  </p> -->\n  <p class=\"nombre-desarrollado\">{{ \"menu.desarrollado-por\" | transloco }} <a href=\"https://www.fundaciobit.org/\" target=\"_blank\">Fundaci\u00F3 Bit</a></p>\n</div>\n", styles: [".idioma-selector{padding:0;width:100%;position:absolute;bottom:44px;text-align:center}.sidebar{height:100%;width:0;position:fixed;z-index:100;top:0;left:0;background-color:#eaeaea;overflow:hidden;padding-top:60px;transition:.3s;cursor:pointer;box-shadow:1px 0 10px #656565}.sidebar>ul{padding-left:20px;overflow-x:hidden;overflow-y:auto;height:86.2%;padding-bottom:30px}.sidebar i,.sidebar a{text-decoration:none}.sidebar i{padding-left:10px;margin-right:5px}.sidebar li{padding:8px 0}.sidebar li.item{font-weight:700;cursor:pointer}li.item ul{padding-left:20px}.sidebar li.subitem{font-weight:400;transition:.5s}.sidebar li.subitem:hover{background:#ffffff80;-webkit-border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.sidebar li.subitem:hover a,.sidebar li.subitem:hover i{color:#0068a0}.sidebar .closebtn{color:#9a9a9a;position:absolute;top:18px;right:25px;font-size:25px}.sidebar .nombre-desarrollado{position:absolute;bottom:-13px;width:100%;background:#fff;padding:20px;text-align:center;cursor:auto}.sidebar .nombre-desarrollado a{font-weight:700;color:#1b8ac6}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], visibilidad: [{
-                type: Input
-            }], onSelectLanguage: [{
-                type: Output
-            }], onCloseMenu: [{
-                type: Output
-            }], onMenuTitle: [{
-                type: Output
-            }] } });
+            args: [{ selector: "bit-sidebar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div id=\"mySidebar\" class=\"sidebar\" [style.min-width]=\"visibilidad() ? '300px' : '0px'\">\n  <i class=\"closebtn fa fa-times\" (click)=\"closeMenu()\"></i>\n  <ul>\n    @for (item of items(); track item) {\n      <li class=\"item\" (click)=\"clickMenu(item)\">\n        @if (item.items.length > 0) {\n          <i class=\"fa\" [ngClass]=\"{'fa-chevron-right':!item.expanded,'fa-chevron-down':item.expanded}\"></i>\n        }\n        {{ \"menu.\" + item.label | transloco }}\n        @if (item.expanded) {\n          <ul>\n            @for (subitem of item.items; track subitem) {\n              <li class=\"subitem\" [routerLink]=\"subitem.routerLink\" (click)=\"clickMenuItem($event, item, subitem)\">\n                <i class=\"{{subitem.icon}}\"></i>&nbsp;&nbsp;\n                <a>{{ \"menu.\" + subitem.label | transloco }}</a></li>\n            }\n          </ul>\n        }\n      </li>\n    }\n  </ul>\n  <!-- <p class=\"idioma-selector\">    \n    <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"></bit-language-selector>\n  </p> -->\n  <p class=\"nombre-desarrollado\">{{ \"menu.desarrollado-por\" | transloco }} <a href=\"https://www.fundaciobit.org/\" target=\"_blank\">Fundaci\u00F3 Bit</a></p>\n</div>\n", styles: [".idioma-selector{padding:0;width:100%;position:absolute;bottom:44px;text-align:center}.sidebar{height:100%;width:0;position:fixed;z-index:100;top:0;left:0;background-color:#eaeaea;overflow:hidden;padding-top:60px;transition:.3s;cursor:pointer;box-shadow:1px 0 10px #656565}.sidebar>ul{padding-left:20px;overflow-x:hidden;overflow-y:auto;height:86.2%;padding-bottom:30px}.sidebar i,.sidebar a{text-decoration:none}.sidebar i{padding-left:10px;margin-right:5px}.sidebar li{padding:8px 0}.sidebar li.item{font-weight:700;cursor:pointer}li.item ul{padding-left:20px}.sidebar li.subitem{font-weight:400;transition:.5s}.sidebar li.subitem:hover{background:#ffffff80;-webkit-border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.sidebar li.subitem:hover a,.sidebar li.subitem:hover i{color:#0068a0}.sidebar .closebtn{color:#9a9a9a;position:absolute;top:18px;right:25px;font-size:25px}.sidebar .nombre-desarrollado{position:absolute;bottom:-13px;width:100%;background:#fff;padding:20px;text-align:center;cursor:auto}.sidebar .nombre-desarrollado a{font-weight:700;color:#1b8ac6}\n"] }]
+        }] });
 
 class BitThemeSelectorComponent {
     constructor() {
@@ -5249,7 +4879,7 @@ class BitThemeSelectorComponent {
         this.onChangeTheme.emit(theme);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitThemeSelectorComponent, isStandalone: false, selector: "bit-theme-selector", outputs: { onChangeTheme: "onChangeTheme" }, ngImport: i0, template: "<p-selectbutton \n    [options]=\"themeList$()\" \n    [ngModel]=\"currentTheme$()\" \n    optionLabel=\"name\" \n    optionValue=\"name\" \n    (onOptionClick)=\"selectGroupChanged($event)\"/>", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$7.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitThemeSelectorComponent, isStandalone: false, selector: "bit-theme-selector", outputs: { onChangeTheme: "onChangeTheme" }, ngImport: i0, template: "<p-selectbutton \n    [options]=\"themeList$()\" \n    [ngModel]=\"currentTheme$()\" \n    optionLabel=\"name\" \n    optionValue=\"name\" \n    (onOptionClick)=\"selectGroupChanged($event)\"/>", 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$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitThemeSelectorComponent, decorators: [{
             type: Component,
@@ -5258,11 +4888,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class BitLanguageSelectorComponent {
     constructor() {
-        this.onSelectLanguage = new EventEmitter();
+        this.onSelectLanguage = output();
         this.localeService = inject(LocaleService);
         this.languageList$ = signal(this.localeService.locales, ...(ngDevMode ? [{ debugName: "languageList$" }] : []));
-        this.currentLanguage$ = signal(this.localeService.locale$(), ...(ngDevMode ? [{ debugName: "currentLanguage$" }] : []));
+        this.currentLanguage$ = linkedSignal(() => this.localeService.locale$());
     }
+    //signal(this.localeService.locale$());
     selectGroupChanged(_event) {
         console.log("event", _event);
         this.selectLanguage(_event.option["value"]);
@@ -5273,14 +4904,12 @@ class BitLanguageSelectorComponent {
         this.onSelectLanguage.emit(language);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitLanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitLanguageSelectorComponent, isStandalone: false, selector: "bit-language-selector", outputs: { onSelectLanguage: "onSelectLanguage" }, ngImport: i0, template: "<p-selectbutton \n    [options]=\"languageList$()\" \n    [ngModel]=\"currentLanguage$()\" \n    optionLabel=\"label\" \n    optionValue=\"value\" \n    (onOptionClick)=\"selectGroupChanged($event)\"/>", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$7.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitLanguageSelectorComponent, isStandalone: false, selector: "bit-language-selector", outputs: { onSelectLanguage: "onSelectLanguage" }, ngImport: i0, template: "<p-selectbutton \n    [options]=\"languageList$()\" \n    [ngModel]=\"currentLanguage$()\" \n    optionLabel=\"label\" \n    optionValue=\"value\" \n    (onOptionClick)=\"selectGroupChanged($event)\"/>", 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$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitLanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: "bit-language-selector", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p-selectbutton \n    [options]=\"languageList$()\" \n    [ngModel]=\"currentLanguage$()\" \n    optionLabel=\"label\" \n    optionValue=\"value\" \n    (onOptionClick)=\"selectGroupChanged($event)\"/>" }]
-        }], propDecorators: { onSelectLanguage: [{
-                type: Output
-            }] } });
+        }] });
 
 class BitSettingsComponent {
     constructor() {
@@ -5304,7 +4933,7 @@ class BitSettingsComponent {
         this.onDarkModeChange.emit(this.isDarkMode); // Emit the new state
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitSettingsComponent, isStandalone: false, selector: "bit-settings", outputs: { onSelectLanguage: "onSelectLanguage", onDarkModeChange: "onDarkModeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <i (click)=\"op.toggle($event)\" class=\"pi pi-cog icono-header\" pTooltip=\"{{ t('configselection') }}\" tooltipPosition=\"left\"></i>\n    <p-popover #op>\n        <div class=\"config-panel-settings\">\n            <span class=\"config-panel-label\">{{ t('themelabel') }}</span>\n            <bit-theme-selector/>\n            <span class=\"config-panel-label\">{{ t('darkmodeselection') }}</span>\n            <p-toggleswitch [(ngModel)]=\"isDarkMode\" (onChange)=\"toggleDarkMode($event);\" attr.data-testid=\"darkMode\"/>\n            <span class=\"config-panel-label\">{{ t('languageselection') }}</span>\n            <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"/>\n        </div>        \n    </p-popover>\n</ng-container>", styles: [".config-panel-settings{display:flex;flex-direction:column;gap:.5rem}.config-panel-label{font-weight:700;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.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: i3$7.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: BitLanguageSelectorComponent, selector: "bit-language-selector", outputs: ["onSelectLanguage"] }, { kind: "component", type: BitThemeSelectorComponent, selector: "bit-theme-selector", outputs: ["onChangeTheme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BitSettingsComponent, isStandalone: false, selector: "bit-settings", outputs: { onSelectLanguage: "onSelectLanguage", onDarkModeChange: "onDarkModeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <i (click)=\"op.toggle($event)\" class=\"pi pi-cog icono-header\" pTooltip=\"{{ t('configselection') }}\" tooltipPosition=\"left\"></i>\n    <p-popover #op>\n        <div class=\"config-panel-settings\">\n            <span class=\"config-panel-label\">{{ t('themelabel') }}</span>\n            <bit-theme-selector/>\n            <span class=\"config-panel-label\">{{ t('darkmodeselection') }}</span>\n            <p-toggleswitch [(ngModel)]=\"isDarkMode\" (onChange)=\"toggleDarkMode($event);\" attr.data-testid=\"darkMode\"/>\n            <span class=\"config-panel-label\">{{ t('languageselection') }}</span>\n            <bit-language-selector (onSelectLanguage)=\"selectLanguage($event)\"/>\n        </div>        \n    </p-popover>\n</ng-container>", styles: [".config-panel-settings{display:flex;flex-direction:column;gap:.5rem}.config-panel-label{font-weight:700;line-height:1}\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: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: BitLanguageSelectorComponent, selector: "bit-language-selector", outputs: ["onSelectLanguage"] }, { kind: "component", type: BitThemeSelectorComponent, selector: "bit-theme-selector", outputs: ["onChangeTheme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSettingsComponent, decorators: [{
             type: Component,
@@ -5598,33 +5227,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 const directives = [
     BitPanelDirective,
-    FocusRegisterDirective,
-    EditModeDirective,
-    ViewModeDirective
+    FocusRegisterDirective
 ];
 
 class BitSwitchSiNoComponent extends BitCustomComponent {
     constructor() {
         super(...arguments);
-        this.valorTrue = true;
-        this.valorFalse = false;
+        this.valorTrue = input(true, ...(ngDevMode ? [{ debugName: "valorTrue" }] : []));
+        this.valorFalse = input(false, ...(ngDevMode ? [{ debugName: "valorFalse" }] : []));
     }
     get value_lectura() {
+        this.log() && console.log("value lectura: " + this.value);
         return this.value ? "Sí" : "No";
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
     }
     onChangeValue(event) {
         this.value = event.checked;
+        this.log() && console.log("_onChangeValue forComponent: " + this.nombre() + " with value:" + this.value);
         this.changeComponentValue(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSwitchSiNoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitSwitchSiNoComponent, isStandalone: false, selector: "bit-switch-si-no", inputs: { valorTrue: "valorTrue", valorFalse: "valorFalse" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitSwitchSiNoComponent, isStandalone: false, selector: "bit-switch-si-no", inputs: { valorTrue: { classPropertyName: "valorTrue", publicName: "valorTrue", isSignal: true, isRequired: false, transformFunction: null }, valorFalse: { classPropertyName: "valorFalse", publicName: "valorFalse", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitSwitchSiNoComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    [trueValue]=\"valorTrue\"\n    [falseValue]=\"valorFalse\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-toggleswitch>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.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"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitSwitchSiNoComponent, decorators: [{
             type: Component,
@@ -5632,37 +5262,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BitSwitchSiNoComponent),
                             multi: true
-                        }], standalone: false, template: "@if (!hideLabel) {\n  <label>\n    <ng-content></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\n    onLabel=\"S\u00ED\"\n    offLabel=\"No\"\n    binary=\"true\"\n    [(ngModel)]=\"value\"\n    name=\"{{ nombre }}\"\n    [disabled]=\"isDisabled\"\n    id=\"{{ nombre }}\"\n    [trueValue]=\"valorTrue\"\n    [falseValue]=\"valorFalse\"\n    (onChange)=\"onChangeValue($event)\"\n    attr.data-testid=\"{{ dataTestId }}\"\n    >\n  </p-toggleswitch>\n}\n@if (control != null) {\n  <control-messages [control]=\"control\" [field]=\"nombre\"></control-messages>\n}\n" }]
-        }], propDecorators: { valorTrue: [{
-                type: Input
-            }], valorFalse: [{
-                type: Input
-            }] } });
+                        }], standalone: false, template: "@if (!hideLabel()) {\n  <label>\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    aria-label=\"{{ 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" }]
+        }] });
 
 class BitMultipleCheckboxComponent extends BitCustomComponent {
     constructor() {
         super(...arguments);
-        this.chekAll = true;
-        this.isCheckAll = false;
+        this.chekAll = input(true, ...(ngDevMode ? [{ debugName: "chekAll" }] : []));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        this.isCheckAll = signal(false, ...(ngDevMode ? [{ debugName: "isCheckAll" }] : []));
+        this.estiloCheckAll = computed(() => {
+            if (this.isCheckAll()) {
+                return "pi pi-check-square";
+            }
+            else {
+                return "pi pi-stop";
+            }
+        }, ...(ngDevMode ? [{ debugName: "estiloCheckAll" }] : []));
     }
     get value_lectura() {
         if (this.value) {
             // Mostramos los labels del dominio que está en data.
-            return this.value.map((v) => {
-                const label = this.data?.find((d) => d.value === v)?.label;
+            let v = this.value.map((v) => {
+                const label = this.data()?.find((d) => d.value === v)?.label;
                 return label ? label : v;
             })?.join(", ");
+            this.log() && console.log("value lectura", v);
+            return v;
         }
         else {
+            this.log() && console.log("value lectura is blank");
             return "";
         }
     }
     writeValue(v) {
+        this.log() && console.log(`writeValue forComponent ${this.nombre()} with value ${v}`);
         this.value = v;
         this.refreshCheckAll();
     }
     onChangeValue(event) {
         let selected = event && event.checked;
+        this.log() && console.log("onChangeValue forComponent: " + this.nombre() + " selected:" + selected);
         if (selected && selected.length > 0) {
             this.value = selected;
         }
@@ -5673,34 +5313,29 @@ class BitMultipleCheckboxComponent extends BitCustomComponent {
         this.changeComponentValue(this.value);
     }
     onCheckAll() {
-        this.isCheckAll = !this.isCheckAll;
-        if (this.isCheckAll) {
-            this.value = this.data.map((v) => v.value);
+        this.isCheckAll.update((value) => !value);
+        this.log() && console.log("onCheckAll forComponent: " + this.nombre() + " with new value for checkAll:" + this.isCheckAll());
+        if (this.isCheckAll()) {
+            this.value = this.data().map((v) => v.value);
+            this.log() && console.log("currentValue: " + this.value);
         }
         else {
             this.value = null;
+            this.log() && console.log("currentValue is null");
         }
         this.changeComponentValue(this.value);
     }
-    get estiloCheckAll() {
-        if (this.isCheckAll) {
-            return "pi pi-check-square";
-        }
-        else {
-            return "pi pi-stop";
-        }
-    }
     refreshCheckAll() {
-        this.isCheckAll = this.data?.length === this.value?.length;
+        this.isCheckAll.set(this.data()?.length === this.value?.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitMultipleCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitMultipleCheckboxComponent, isStandalone: false, selector: "bit-checkbox-multiple", inputs: { chekAll: "chekAll", data: "data" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BitMultipleCheckboxComponent, isStandalone: false, selector: "bit-checkbox-multiple", inputs: { chekAll: { classPropertyName: "chekAll", publicName: "chekAll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BitMultipleCheckboxComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel) {\n    <label>\n      <ng-content></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          [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\"></control-messages>\n    }\n  }\n\n\n</ng-container>\n", dependencies: [{ kind: "component", type: i1$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: BitControlMessages, selector: "control-messages", inputs: ["control", "field"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label>\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          aria-label=\"{{ 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: ["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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BitMultipleCheckboxComponent, decorators: [{
             type: Component,
@@ -5710,12 +5345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => BitMultipleCheckboxComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel) {\n    <label>\n      <ng-content></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          [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\"></control-messages>\n    }\n  }\n\n\n</ng-container>\n" }]
-        }], propDecorators: { chekAll: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
+                    ], standalone: false, template: "<ng-container *transloco=\"let t\">\n\n  @if (!hideLabel()) {\n    <label>\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          aria-label=\"{{ 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" }]
+        }] });
 
 const modules = [
     AccordionModule,
@@ -5801,13 +5432,12 @@ const formComponents = [
     BitDropDownMultipleComponent,
     BitEditorComponent,
     BitReadonlyComponent,
-    BitEditableComponent,
     BitNumberComponent,
     BitAmountComponent
 ];
 class SharedLibraryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SharedLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: SharedLibraryModule, declarations: [BitPanelDirective, FocusRegisterDirective, EditModeDirective, ViewModeDirective, BitBreadCrumbComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: SharedLibraryModule, declarations: [BitPanelDirective, FocusRegisterDirective, BitBreadCrumbComponent,
             BitControlMessages,
             BitDialogComponent,
             BitFooterComponent,
@@ -5841,7 +5471,6 @@ class SharedLibraryModule {
             BitDropDownMultipleComponent,
             BitEditorComponent,
             BitReadonlyComponent,
-            BitEditableComponent,
             BitNumberComponent,
             BitAmountComponent, BytesPipe, CapitalizePipe, CutTextPipe, DomainValuePipe, DomainListValuePipe, ListValuePipe, OtherToolbarActionPipe, CantidadMonedaPipe, RemoveLineBreaksPipe, SiONoPipe, StringifyPipe], imports: [AccordionModule,
             AutoCompleteModule,
@@ -5929,7 +5558,7 @@ class SharedLibraryModule {
             ToggleButtonModule,
             TooltipModule,
             TreeModule,
-            TreeTableModule, BitPanelDirective, FocusRegisterDirective, EditModeDirective, ViewModeDirective, BytesPipe, CapitalizePipe, CutTextPipe, DomainValuePipe, DomainListValuePipe, ListValuePipe, OtherToolbarActionPipe, CantidadMonedaPipe, RemoveLineBreaksPipe, SiONoPipe, StringifyPipe, BitBreadCrumbComponent,
+            TreeTableModule, BitPanelDirective, FocusRegisterDirective, BytesPipe, CapitalizePipe, CutTextPipe, DomainValuePipe, DomainListValuePipe, ListValuePipe, OtherToolbarActionPipe, CantidadMonedaPipe, RemoveLineBreaksPipe, SiONoPipe, StringifyPipe, BitBreadCrumbComponent,
             BitControlMessages,
             BitDialogComponent,
             BitFooterComponent,
@@ -5963,7 +5592,6 @@ class SharedLibraryModule {
             BitDropDownMultipleComponent,
             BitEditorComponent,
             BitReadonlyComponent,
-            BitEditableComponent,
             BitNumberComponent,
             BitAmountComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SharedLibraryModule, providers: [{ provide: TRANSLOCO_SCOPE, useValue: "bitnglibrary" }, MessageService], imports: [modules, RouterModule, FileUploadModule$1, TranslocoModule, AccordionModule,
@@ -6092,9 +5720,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }] });
 
 class CustomHttpInterceptor {
-    constructor(bitMessageService, generalUtils) {
-        this.bitMessageService = bitMessageService;
-        this.generalUtils = generalUtils;
+    constructor() {
+        this.bitMessageService = inject(BitMessageService);
+        this.generalUtils = inject(GeneralUtils);
         console.log("construyendo el CustomHttpInterceptor");
     }
     intercept(request, next) {
@@ -6112,13 +5740,13 @@ class CustomHttpInterceptor {
             this.generalUtils.stopLoading();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CustomHttpInterceptor, deps: [{ token: BitMessageService }, { token: GeneralUtils }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CustomHttpInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CustomHttpInterceptor, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CustomHttpInterceptor, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: BitMessageService }, { type: GeneralUtils }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Permite registrar los servicios de DataService que utilizarán los servicios EntityCollectionService para alimentar su signalStore
@@ -6812,5 +6440,5 @@ function normalizeRoot(root) {
  * Generated bundle index. Do not edit.
  */
 
-export { Autocomplete, AutocompleteDataService, AyudaContextual, AyudaService, BASE_RESULTADOS_PAGE, BIT_NOTIFICATION_MAX_LIFE, BaseCRUDService, BaseComponent, BaseDataAdapterService, BaseDataService, BaseFilter, BitAmountComponent, BitAutoCompleteComponent, BitBotonAyudaComponent, BitBreadCrumbComponent, BitCalendarComponent, BitCheckBoxComponent, BitColumnBooleanComponent, BitControlMessages, BitCustomComponent, BitDateComponent, BitDateTimeComponent, BitDialogComponent, BitDomainValueComponent, BitDropDownComponent, BitDropDownGeneralComponent, BitDropDownMultipleComponent, BitEditableComponent, BitEditorComponent, BitFooterComponent, BitFooterMessagesComponent, BitGeneralComponent, BitHeaderComponent, BitHelpComponent, BitLanguageSelectorComponent, BitLoadingComponent, BitMessage, BitMessageService, BitMultipleCheckboxComponent, BitNGUploadComponent, BitNotification, BitNotificationError, BitNotificationErrorComponent, BitNotificationToastComponent, BitNumberComponent, BitPajigatorComponent, BitPanelDirective, BitPanelService, BitReadonlyComponent, BitSettingsComponent, BitSidebarComponent, BitSwitchComponent, BitSwitchSiNoComponent, BitTextAreaComponent, BitTextComponent, BitThemeSelectorComponent, BitTimeComponent, BitToolbarComponent, BitUserControlsComponent, BytesPipe, CanDeactivateGuard, CanDeactivateGuardFn, CantidadMonedaPipe, CapitalizePipe, ClearItemsService, ConfigurationEditor, CustomHttpInterceptor, CustomValidators, CutTextPipe, DateUtils, DefaultDataService, Domain, DomainListValuePipe, DomainService, DomainValuePipe, DownloadService, EditModeDirective, EntityCollectionServiceBase, EntityDataService, EntityHttpResourceUrls, EntityOp, Error$1 as Error, Fichero, FocusRegisterDirective, FocusService, FormType, GENERIC_TYPE, GeneralUtils, HttpUrlGenerator, HttpUtilsService, Item, ListValuePipe, LocaleService, LocatorService, MenuService, MenuTitle, OP_ERROR, OP_SUCCESS, OtherToolbarActionPipe, PageStatus, PropsFilterFnFactory, RemoveLineBreaksPipe, SessionSharedService, SharedLibraryModule, SiONoPipe, StorageService, StringifyPipe, TYPE_BLANK, TYPE_FORM, TYPE_LIST, TYPE_SCROLL, TableViewService, ThemeFBitService, ToolbarService, TranslateService, UploadService, ViewModeDirective, addButtonToToolbar, assign, baseFilterFn, buildButtonToolbar, buildDefaultToolbarForm, buildTranslatedMessage, choose, components, deleteElement, emptyFilter, entityDefaultDispatcherOptions, formComponents, getFileNameFromResponse, getInitToolbar, getToolbarObjectLoadedDefault, httpUtilsServiceInjectables, initialEntityState, isNumber, isString, makeErrorOp, makeSuccessOp, makeToolbarChildList, makeToolbarForm, makeToolbarList, normalizeRoot, objectToQueryParametersWithZeroValues, objectoToQueryParameters, reject, removeNull, replaceAll, setErrorUpdater, setFilterUpdater, setLoadedUpdater, setLoadingUpdater, setPatternUpdater, setTotalItemsUpdater, upsertElement };
+export { Autocomplete, AutocompleteDataService, AyudaContextual, AyudaService, BASE_RESULTADOS_PAGE, BIT_NOTIFICATION_MAX_LIFE, BaseCRUDService, BaseComponent, BaseDataAdapterService, BaseDataService, BaseFilter, BitAmountComponent, BitAutoCompleteComponent, BitBotonAyudaComponent, BitBreadCrumbComponent, BitCalendarComponent, BitCheckBoxComponent, BitColumnBooleanComponent, BitControlMessages, BitCustomComponent, BitDateComponent, BitDateTimeComponent, BitDialogComponent, BitDomainValueComponent, BitDropDownComponent, BitDropDownGeneralComponent, BitDropDownMultipleComponent, BitEditorComponent, BitFooterComponent, BitFooterMessagesComponent, BitGeneralComponent, BitHeaderComponent, BitHelpComponent, BitLanguageSelectorComponent, BitLoadingComponent, BitMessage, BitMessageService, BitMultipleCheckboxComponent, BitNGUploadComponent, BitNotification, BitNotificationError, BitNotificationErrorComponent, BitNotificationToastComponent, BitNumberComponent, BitPajigatorComponent, BitPanelDirective, BitPanelService, BitReadonlyComponent, BitSettingsComponent, BitSidebarComponent, BitSwitchComponent, BitSwitchSiNoComponent, BitTextAreaComponent, BitTextComponent, BitThemeSelectorComponent, BitTimeComponent, BitToolbarComponent, BitUserControlsComponent, BytesPipe, CanDeactivateGuard, CanDeactivateGuardFn, CantidadMonedaPipe, CapitalizePipe, ClearItemsService, ConfigurationEditor, CustomHttpInterceptor, CustomValidators, CutTextPipe, DateUtils, DefaultDataService, Domain, DomainListValuePipe, DomainService, DomainValuePipe, DownloadService, EntityCollectionServiceBase, EntityDataService, EntityHttpResourceUrls, EntityOp, Error$1 as Error, Fichero, FocusRegisterDirective, FocusService, FormType, GENERIC_TYPE, GeneralUtils, HttpUrlGenerator, HttpUtilsService, Item, ListValuePipe, LocaleService, LocatorService, MenuService, MenuTitle, OP_ERROR, OP_SUCCESS, OtherToolbarActionPipe, PageStatus, PropsFilterFnFactory, RemoveLineBreaksPipe, SessionSharedService, SharedLibraryModule, SiONoPipe, StorageService, StringifyPipe, TYPE_BLANK, TYPE_FORM, TYPE_LIST, TYPE_SCROLL, TableViewService, ThemeFBitService, ToolbarService, TranslateService, UploadService, addButtonToToolbar, assign, baseFilterFn, buildButtonToolbar, buildDefaultToolbarForm, buildTranslatedMessage, choose, components, deleteElement, emptyFilter, entityDefaultDispatcherOptions, formComponents, getFileNameFromResponse, getInitToolbar, getToolbarObjectLoadedDefault, httpUtilsServiceInjectables, initialEntityState, isNumber, isString, makeErrorOp, makeSuccessOp, makeToolbarChildList, makeToolbarForm, makeToolbarList, normalizeRoot, objectToQueryParametersWithZeroValues, objectoToQueryParameters, reject, removeNull, replaceAll, setErrorUpdater, setFilterUpdater, setLoadedUpdater, setLoadingUpdater, setPatternUpdater, setTotalItemsUpdater, upsertElement };
 //# sourceMappingURL=bit-ng-library.mjs.map