sf-crud 13.1.28 → 13.2.29

package/fesm2022/sf-crud.mjs

@@ -1,58 +1,58 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, Input, HostBinding, Output, Component, ViewChild, ViewChildren, ChangeDetectionStrategy } from '@angular/core';
-import * as _ from 'lodash';
-import * as jsonpath from 'jsonpath';
-import * as i5 from '@angular/common';
+import { InjectionToken, Injectable, Optional, Inject, signal, computed, inject, EventEmitter, HostBinding, Input, Output, Component, ViewChild, ViewChildren, ChangeDetectionStrategy } from '@angular/core';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5$1 from '@angular/forms';
+import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i8 from 'primeng/table';
+import * as i6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i7 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i11 from 'primeng/inputtext';
+import * as i9 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i12 from 'primeng/toolbar';
+import * as i10 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
-import * as i19$1 from 'primeng/tooltip';
+import * as i19 from 'primeng/tooltip';
 import { TooltipModule, Tooltip } from 'primeng/tooltip';
-import * as i10$1 from 'primeng/dialog';
+import * as i10$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { CardModule } from 'primeng/card';
-import * as i13 from 'primeng/iconfield';
+import * as i11 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i14 from 'primeng/inputicon';
+import * as i12 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
-import * as i15 from 'primeng/select';
+import * as i13 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i16 from 'primeng/multiselect';
+import * as i14 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i17 from 'primeng/splitbutton';
+import * as i15 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
-import * as i18 from 'primeng/tag';
+import * as i16 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i19 from 'primeng/avatar';
+import * as i17 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i20 from 'primeng/skeleton';
+import * as i18 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i1 from '@angular/common/http';
-import * as i2 from '@angular/router';
-import { RouterOutlet } from '@angular/router';
+import * as jsonpath from 'jsonpath';
 import { BehaviorSubject, Subject, firstValueFrom } from 'rxjs';
 import moment from 'moment';
+import * as _ from 'lodash';
+import * as i2 from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 import * as i1$1 from 'primeng/dynamicdialog';
 import * as i3 from 'primeng/api';
 import Swal from 'sweetalert2';
 import * as i3$1 from 'primeng/steps';
 import { StepsModule } from 'primeng/steps';
-import * as i6$1 from 'sf-simulador';
+import * as i6$2 from 'sf-simulador';
 import { SfSimuladorModule } from 'sf-simulador';
-import * as i6 from 'primeng/fluid';
+import * as i6$1 from 'primeng/fluid';
 import { FluidModule } from 'primeng/fluid';
 import * as i7$1 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i8$1 from 'primeng/inputmask';
+import * as i8 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import * as i12$1 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
@@ -68,10 +68,10 @@ import * as i18$1 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { SelectButton } from 'primeng/selectbutton';
-import * as i10 from 'sf-pdfsign';
+import * as i10$1 from 'sf-pdfsign';
 import { SfPdfsignModule, PDF_GATEWAY_SERVICE } from 'sf-pdfsign';
 import * as i2$1 from '@angular/platform-browser';
-import * as i4 from 'sf-ado';
+import * as i4$1 from 'sf-ado';
 
 const GENERAL_CRUD_SERVICE = new InjectionToken('GENERAL_CRUD_SERVICE');
 
@@ -718,7 +718,6 @@ class SfCrudService {
             this.__index = +localStorage.getItem("index");
             localStorage.clear();
         }
-        console.log("Session cargada: ", existSession, this._esquemas, this._registros, this._dataSet);
         return existSession;
     }
     get reasons() {
@@ -942,74 +941,417 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     args: [APP_DIALOG_COMPONENT]
                 }] }, { type: i1$1.DialogService }] });
 
-class TableroComponent {
+class TableroService {
     generalService;
     router;
     sfCrudService;
     stepService;
     dialogService;
+    _data = signal([]);
+    _initialData = signal([]);
+    _currentPage = signal(1);
+    _rowsPerPage = signal(10);
+    _totalRecords = signal(0);
+    _searchValue = signal('');
+    _initialLoadDone = signal(false);
+    _itemSelected = signal(null);
+    _showCreateButton = signal(false);
+    _optionsMap = signal(new Map());
+    _config = signal(null);
+    _table = signal(null);
+    _menuItems = signal([]);
+    _btn = signal({ create: undefined, read: undefined, update: undefined, delete: undefined });
+    _loading = signal({ inProgress: false, target: undefined });
+    searchTimeout = null;
+    data = this._data.asReadonly();
+    initialData = this._initialData.asReadonly();
+    currentPage = this._currentPage.asReadonly();
+    rowsPerPage = this._rowsPerPage.asReadonly();
+    totalRecords = this._totalRecords.asReadonly();
+    searchValue = this._searchValue.asReadonly();
+    initialLoadDone = this._initialLoadDone.asReadonly();
+    itemSelected = this._itemSelected.asReadonly();
+    showCreateButton = this._showCreateButton.asReadonly();
+    optionsMap = this._optionsMap.asReadonly();
+    table = this._table.asReadonly();
+    menuItems = this._menuItems.asReadonly();
+    btn = this._btn.asReadonly();
+    loading = this._loading.asReadonly();
+    config = this._config.asReadonly();
+    isLoadingData = computed(() => this._loading().inProgress && this._loading().target === 'data');
+    displayData = computed(() => {
+        if (this.isLoadingData()) {
+            return Array(this._rowsPerPage()).fill({});
+        }
+        return this.data();
+    });
+    first = computed(() => {
+        return (this._currentPage() - 1) * this._rowsPerPage();
+    });
+    constructor(generalService, router, sfCrudService, stepService, dialogService) {
+        this.generalService = generalService;
+        this.router = router;
+        this.sfCrudService = sfCrudService;
+        this.stepService = stepService;
+        this.dialogService = dialogService;
+    }
+    setTable(value) {
+        this._table.set(value);
+    }
+    setShowCreateButton(value) {
+        this._showCreateButton.set(value);
+    }
+    setConfig(config) {
+        this._config.set(config);
+    }
+    setOptionsMap(column, options) {
+        const currentMap = this._optionsMap();
+        currentMap.set(column, options);
+        this._optionsMap.set(currentMap);
+    }
+    setData(data) {
+        this._data.set(data);
+    }
+    setInitialLoadDone(value) {
+        this._initialLoadDone.set(value);
+    }
+    setLoading(loading) {
+        this._loading.set(loading);
+    }
+    clearOptions() {
+        this._optionsMap.set(new Map());
+    }
+    setOptions(options) {
+        this._optionsMap.set(options);
+    }
+    initialize(config) {
+        this._config.set(config);
+        this._rowsPerPage.set(config.rowsPerPage || 10);
+        if (!config.environment) {
+            config.environment = JSON.parse(sessionStorage.getItem('ConfigJSON') || '{}');
+        }
+        this.generalService.environment = config.environment;
+        if (config.table) {
+            this._table.set(config.table);
+        }
+    }
+    getInfoTablero() {
+        const table = this._table();
+        const config = this._config();
+        if (!table || !config)
+            return;
+        this.setLoading({ inProgress: true, target: 'data' });
+        // Solo resetear datos si no es paginación, para mantener el skeleton con las filas correctas
+        // if (typeLoad !== 'data') {
+        //   this._data.set([]);
+        //   this._initialData.set([]);
+        //   this._totalRecords.set(0);
+        // }
+        let url = this.applyKeys(table.keys, `${this.generalService.jsonConfig[table.server]}${table.endpoint}`, config.dataExt);
+        this.generalService.genericRequest(table.method, url, config.dataExt)
+            .then((res) => {
+            let aux;
+            if (!Array.isArray(res))
+                aux = res.data;
+            else
+                aux = res;
+            this._initialData.set(_.cloneDeep(aux));
+            this.generateData(aux);
+            this._initialLoadDone.set(true);
+            this.setLoading({ inProgress: false, target: 'data' });
+        }).catch((error) => {
+            console.error('Error fetching tablero data:', error);
+            this.setLoading({ inProgress: false, target: 'data' });
+        });
+    }
+    generateData(data) {
+        const table = this._table();
+        if (!table)
+            return;
+        const previousTotalRecords = this._totalRecords();
+        const newData = [];
+        let totalRecords = 0;
+        data.forEach((item) => {
+            let newItem = {};
+            table.columns.forEach(col => {
+                if (col.col)
+                    newItem[col.col] = this.getValue(col.col, item);
+            });
+            if (table?.dataKey && !newItem[table.dataKey]) {
+                newItem[table.dataKey] = this.getValue(table.dataKey, item);
+            }
+            if (table?.customPaginator && totalRecords === 0 && item['TotalRecords'] !== undefined) {
+                totalRecords = item['TotalRecords'] || data.length;
+            }
+            // const missingKeys = Object.keys(item).filter(key => !(key in newItem));
+            // missingKeys.forEach(key => {
+            //   newItem[key] = item[key];
+            // })
+            newData.push(newItem);
+        });
+        if (totalRecords === 0) {
+            totalRecords = previousTotalRecords > 0 ? previousTotalRecords : newData.length;
+        }
+        this._data.set(newData);
+        this._totalRecords.set(totalRecords);
+    }
+    getValue(path, item) {
+        if (path.includes("."))
+            return jsonpath.query(item, path)[0];
+        return item[path];
+    }
+    applyKeys(keys, endpoint, data) {
+        const config = this._config();
+        if (!config)
+            return '';
+        keys.forEach(key => {
+            switch (key.key) {
+                case '@ndoc':
+                    endpoint = endpoint.replace(key.key, config?.user?.UsuarioSistema?.NDOC || '');
+                    break;
+                case '@tdoc':
+                    endpoint = endpoint.replace(key.key, config?.user?.UsuarioSistema?.TDOC || '');
+                    break;
+                case '@idKatios':
+                    endpoint = endpoint.replace(key.key, config?.idKatios);
+                    break;
+                case '@pageNumber':
+                    endpoint = endpoint.replace(key.key, this._currentPage().toString());
+                    break;
+                case '@pageSize':
+                    endpoint = endpoint.replace(key.key, this._rowsPerPage().toString());
+                    break;
+                case '@searchValue':
+                    endpoint = endpoint.replace(key.key, encodeURIComponent(this._searchValue()));
+                    break;
+                default:
+                    if (endpoint.includes(key.key) && data)
+                        endpoint = endpoint.replace(key.key, jsonpath.query(data, key?.scope || '')[0]);
+                    break;
+            }
+        });
+        return endpoint;
+    }
+    setItemSelected(item) {
+        this._itemSelected.set(item);
+    }
+    loadOptions() {
+        const config = this._config();
+        if (!config?.opciones)
+            return;
+        const items = [];
+        const buttons = { ...this._btn() };
+        buttons.create = config.opciones.find(x => x.label == 'Crear');
+        config.opciones.filter((opc) => opc.valor.action).forEach(opc => {
+            items.push({ label: opc.label, icon: opc.icon, command: () => this.execAction(opc.valor) });
+        });
+        this._menuItems.set(items);
+        this._btn.set(buttons);
+    }
+    verifyCreateButton() {
+        const table = this._table();
+        if (table?.createButton && table?.createButton?.verify === 'filterList') {
+            const options = this._optionsMap().get(table.createButton.column)?.length > 0;
+            console.log('Verificando botón de crear, opciones cargadas:', options, this._optionsMap());
+            this._showCreateButton.set(options);
+        }
+    }
+    showAddDialog() {
+        this.verifyCreateButton();
+        const table = this._table();
+        if (!this.showCreateButton() && table?.dialog) {
+            this.dialogService.showDialog('create', table.dialog);
+        }
+        else {
+            this.redirect('create');
+        }
+    }
+    redirect(accion, data) {
+        this.stepService.reset();
+        this.sfCrudService.reset();
+        const btn = this._btn();
+        const table = this._table();
+        if (!table || !btn)
+            return;
+        switch (accion) {
+            case 'create':
+                this.router.navigateByUrl(btn.create?.valor?.redirect || '');
+                break;
+            case 'read':
+                this.router.navigateByUrl(this.applyKeys(table.keys, btn.read.valor.redirect, data));
+                break;
+            case 'update':
+                this.router.navigateByUrl(this.applyKeys(table.keys, btn.update.valor.redirect, data));
+                break;
+            case 'delete':
+                this.router.navigateByUrl(this.applyKeys(table.keys, btn.delete.valor.redirect, data));
+                break;
+            default:
+                break;
+        }
+    }
+    goToDetail() {
+        const table = this._table();
+        const selected = this._itemSelected();
+        if (table?.redirect && table?.dataKey && selected) {
+            const data = this._initialData();
+            const dataToEvaluate = data.find(d => d[table.dataKey || 'id'] === selected[table.dataKey || 'id']);
+            this.router.navigateByUrl(this.applyKeys(table.keys, table.redirect, dataToEvaluate));
+        }
+    }
+    execAction(params) {
+        const table = this._table();
+        const itemSelected = this._itemSelected();
+        switch (params.action) {
+            case 'redirect':
+                this.router.navigateByUrl(this.applyKeys(table.keys, params.link, itemSelected)).then(() => {
+                    if (params.reload)
+                        window.location.reload();
+                });
+                return undefined;
+            default:
+                return { data: _.cloneDeep(itemSelected), params };
+        }
+    }
+    pageChange(newPage, newRows) {
+        const table = this._table();
+        if (table?.customPaginator) {
+            if (!this._initialLoadDone()) {
+                return;
+            }
+            // Solo recargar si realmente cambió la página o el tamaño
+            if (newPage !== this._currentPage() || newRows !== this._rowsPerPage()) {
+                this._currentPage.set(newPage);
+                //this._rowsPerPage.set(newRows);
+                this.getInfoTablero();
+            }
+        }
+    }
+    onGlobalSearch(value) {
+        if (value === this._searchValue())
+            return;
+        this._searchValue.set(value);
+        // Cancelar búsqueda anterior si existe
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        // Debounce de 400ms para evitar múltiples llamadas
+        this.searchTimeout = setTimeout(() => {
+            this._currentPage.set(1);
+            this.getInfoTablero();
+        }, 400);
+    }
+    destroy() {
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        this._data.set([]);
+        this._initialData.set([]);
+        this._currentPage.set(1);
+        this._rowsPerPage.set(10);
+        this._totalRecords.set(0);
+        this._searchValue.set('');
+        this._initialLoadDone.set(false);
+        this._itemSelected.set(null);
+        this._showCreateButton.set(false);
+        this._optionsMap.set(new Map());
+        this._table.set(null);
+        this._menuItems.set([]);
+        this._btn.set({ create: undefined, read: undefined, update: undefined, delete: undefined });
+        this._loading.set({ inProgress: false, target: undefined });
+        this._config.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroService, deps: [{ token: GeneralService }, { token: i2.Router }, { token: SfCrudService }, { token: StepService }, { token: CrudDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: GeneralService }, { type: i2.Router }, { type: SfCrudService }, { type: StepService }, { type: CrudDialogService }] });
+
+class TableroComponent {
+    generalService;
+    sfCrudService;
+    tableroService;
     service = inject(GENERAL_CRUD_SERVICE);
     opciones = [];
     idEntidad = '';
     idKatios = '';
-    environment; // Hacer opcional el environment
+    environment;
     user;
     dataExt;
     showCreateButton = false;
     customConfig = false;
     table;
     onSelectAction = new EventEmitter();
+    customFilters = false;
+    rowsPerPage = 10;
+    optionsMap = new Map();
     color2;
     colorButtons;
-    items = [];
-    data = [];
-    initialData = [];
-    btn = { create: undefined, read: undefined, update: undefined, delete: undefined };
     itemSelected;
-    loading;
-    optionsMap = new Map();
-    customFilters = false;
-    currentPage = 1;
-    rowsPerPage = 10;
-    totalRecords = 0;
-    initialLoadDone = false;
-    searchValue = '';
-    searchTimeout = null;
-    get skeletonRows() {
-        return Array(this.rowsPerPage).fill(0);
+    constructor(generalService, sfCrudService, tableroService) {
+        this.generalService = generalService;
+        this.sfCrudService = sfCrudService;
+        this.tableroService = tableroService;
+    }
+    get displayData() {
+        return this.tableroService.displayData();
+    }
+    get loading() {
+        return this.tableroService.loading();
     }
     get isLoadingData() {
-        return this.loading.inProgress && this.loading.target === 'data';
+        return this.tableroService.isLoadingData();
     }
-    get displayData() {
-        if (this.isLoadingData) {
-            return this.skeletonRows.map(() => ({}));
-        }
-        return this.data;
+    get totalRecords() {
+        return this.tableroService.totalRecords();
     }
-    constructor(generalService, router, sfCrudService, stepService, dialogService) {
-        this.generalService = generalService;
-        this.router = router;
-        this.sfCrudService = sfCrudService;
-        this.stepService = stepService;
-        this.dialogService = dialogService;
-        this.loading = { inProgress: false, target: undefined };
+    get currentPage() {
+        return this.tableroService.currentPage();
+    }
+    get totalRows() {
+        return this.tableroService.rowsPerPage();
+    }
+    get btn() {
+        return this.tableroService.btn();
+    }
+    get tableConfig() {
+        return this.tableroService.table();
+    }
+    get initialLoadDone() {
+        return this.tableroService.initialLoadDone();
+    }
+    get first() {
+        return this.tableroService.first();
     }
     ngOnInit() {
-        if (!this.environment) {
-            this.environment = JSON.parse(sessionStorage.getItem('ConfigJSON') || '{}');
-        }
-        this.generalService.environment = this.environment;
+        if (this.tableroService.config())
+            return;
+        const config = {
+            idEntidad: this.idEntidad,
+            idKatios: this.idKatios,
+            environment: this.environment,
+            user: this.user,
+            dataExt: this.dataExt,
+            opciones: this.opciones,
+            table: this.table,
+            customConfig: this.customConfig,
+            customFilters: this.customFilters,
+            rowsPerPage: this.rowsPerPage
+        };
+        this.tableroService.initialize(config);
         this.VerifyConfigExist();
     }
     ngOnChanges(changes) {
         if (changes['dataExt'] && !changes['dataExt'].firstChange) {
             if (!this.customFilters)
-                this.optionsMap.clear();
-            this.showCreateButton = false;
-            this.loading.target = undefined;
-            this.getInfoTablero('data');
-            this.loadOptions();
+                this.tableroService.clearOptions();
+            this.tableroService.setShowCreateButton(this.showCreateButton);
+            this.tableroService.getInfoTablero();
+            this.tableroService.loadOptions();
             if (!this.customFilters)
                 this.initFilterOptions();
         }
@@ -1017,41 +1359,48 @@ class TableroComponent {
             this.VerifyConfigExist();
         }
     }
+    ngOnDestroy() {
+        this.tableroService.destroy();
+    }
     VerifyConfigExist() {
-        if (this.customConfig && this.table) {
-            console.log(this.table);
-            this.getInfoTablero();
-            this.loadOptions();
-            if (!this.customFilters)
-                this.initFilterOptions();
+        if (this.tableroService.config()?.customConfig && this.tableroService.table()) {
+            this.tableroService.getInfoTablero();
+            this.tableroService.loadOptions();
+            this.verifyOptions();
         }
         else {
             this.loadConfigCrud();
         }
     }
+    verifyOptions() {
+        if (this.tableroService.config()?.customFilters && this.optionsMap.size === 0) {
+            this.tableroService.setOptions(this.optionsMap);
+        }
+        else {
+            if (!this.tableroService.config()?.customFilters)
+                this.initFilterOptions();
+        }
+    }
     loadConfigCrud() {
-        this.loading.inProgress = true;
-        this.sfCrudService.formLoading = this.loading;
+        this.tableroService.setLoading({ inProgress: true, target: undefined });
         this.service.getCrudByEntity(this.idKatios, this.idEntidad).subscribe({
             next: (res) => {
                 if (res) {
                     if (res.data)
                         res = res.data;
-                    this.table = res.tablero || undefined;
-                    this.getInfoTablero();
-                    this.loadOptions();
-                    if (!this.customFilters)
-                        this.initFilterOptions();
+                    this.tableroService.setTable(res.tablero || undefined);
+                    this.tableroService.setLoading({ inProgress: false, target: undefined });
+                    this.tableroService.getInfoTablero();
+                    this.tableroService.loadOptions();
+                    this.verifyOptions();
                 }
                 else {
-                    this.loading.inProgress = false;
-                    this.sfCrudService.formLoading = this.loading;
+                    this.tableroService.setLoading({ inProgress: false, target: undefined });
                 }
             },
             error: (err) => {
                 console.error(err);
-                this.loading.inProgress = false;
-                this.sfCrudService.formLoading = this.loading;
+                this.tableroService.setLoading({ inProgress: false, target: undefined });
             }
         });
     }
@@ -1087,215 +1436,63 @@ class TableroComponent {
     //         // throw new Error(err)
     //       })
     // }
-    getInfoTablero(typeLoad) {
-        //this.submit(0)
-        this.loading.inProgress = true;
-        this.loading.target = typeLoad || undefined;
-        this.sfCrudService.formLoading = this.loading;
-        // Solo resetear datos si no es paginación, para mantener el skeleton con las filas correctas
-        if (typeLoad !== 'data') {
-            this.data = [];
-            this.initialData = [];
-            this.totalRecords = 0;
-        }
-        let url = this.aplyKeys(this.table.keys, `${this.generalService.jsonConfig[this.table.server]}${this.table.endpoint}`, this.dataExt);
-        this.generalService.genericRequest(this.table.method, url, this.dataExt)
-            .then((res) => {
-            let aux;
-            if (!Array.isArray(res))
-                aux = res.data;
-            else
-                aux = res;
-            this.initialData = _.cloneDeep(aux);
-            this.generateData(aux);
-            this.initialLoadDone = true;
-        }).catch((error) => {
-            console.error('Error fetching tablero data:', error);
-            this.loading.inProgress = false;
-            this.loading.target = typeLoad || undefined;
-            this.sfCrudService.formLoading = this.loading;
-        });
-    }
-    generateData(data) {
-        const previousTotalRecords = this.totalRecords;
-        this.data = [];
-        this.totalRecords = 0;
-        data.forEach((item) => {
-            let newItem = {};
-            this.table.columns.forEach(col => {
-                newItem[col.col] = this.getValue(col.col, item);
-            });
-            if (this.table?.dataKey && !newItem[this.table.dataKey]) {
-                newItem[this.table.dataKey] = item[this.table.dataKey];
-            }
-            if (this.table?.customPaginator && this.totalRecords === 0 && item['TotalRecords'] !== undefined) {
-                this.totalRecords = item['TotalRecords'] || data.length;
-            }
-            const missingKeys = Object.keys(item).filter(key => !(key in newItem));
-            missingKeys.forEach(key => {
-                newItem[key] = item[key];
-            });
-            this.data.push(newItem);
-        });
-        if (this.totalRecords === 0) {
-            // Si es paginación y no vino totalRecords, mantener el anterior
-            this.totalRecords = previousTotalRecords > 0 ? previousTotalRecords : this.data.length;
-        }
-        this.loading.inProgress = false;
-        this.sfCrudService.formLoading = this.loading;
-    }
     initFilterOptions() {
-        this.table?.columns.filter(col => col.filter?.config).forEach(col => this.generateFilterOptions(col));
-    }
-    verifyCreateButton() {
-        if (this.table?.createButton && this.table?.createButton?.verify === 'filterList') {
-            this.showCreateButton = this.optionsMap.get(this.table.createButton.column)?.length > 0;
-        }
+        this.tableroService.table()?.columns.filter(col => col.filter?.config).forEach(col => this.generateFilterOptions(col));
     }
     generateFilterOptions(col) {
-        const url = this.aplyKeys(this.table.keys, `${this.generalService.jsonConfig[col.filter.config.server]}${col.filter.config.endpoint}`, this.dataExt);
-        this.generalService.genericRequest(col.filter.config.method, url, this.dataExt)
+        const url = this.tableroService.applyKeys(this.tableroService.table().keys, `${this.generalService.jsonConfig[col.filter.config.server]}${col.filter.config.endpoint}`, this.tableroService.config()?.dataExt);
+        this.generalService.genericRequest(col.filter.config.method, url, this.tableroService.config()?.dataExt)
             .then((res) => {
             if (!Array.isArray(res) && res.data)
                 res = res.data;
-            this.optionsMap.set(col.col, res);
+            this.tableroService.setOptionsMap(col.col, res);
         })
             .catch((error) => {
-            this.optionsMap.set(col.col, []);
+            this.tableroService.setOptionsMap(col.col, []);
             console.error('Error fetching filter options:', error);
         });
     }
-    getValue(path, item) {
-        if (path.includes("."))
-            return jsonpath.query(item, path)[0];
-        return item[path];
-    }
     externalLinkAction() {
-        this.opciones.filter((opc) => opc.valor.action).forEach(opc => this.execAction(opc.valor));
-    }
-    loadOptions() {
-        this.items = [];
-        this.btn.create = this.opciones.find(x => x.label == 'Crear');
-        this.opciones.filter((opc) => opc.valor.action).forEach(opc => {
-            this.items.push({ label: opc.label, icon: opc.icon, command: () => this.execAction(opc.valor) });
-        });
-    }
-    redirect(accion, data) {
-        this.stepService.reset();
-        this.sfCrudService.reset();
-        switch (accion) {
-            case 'create':
-                this.router.navigateByUrl(this.btn.create?.valor?.redirect || '');
-                break;
-            case 'read':
-                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.read.valor.redirect, data));
-                break;
-            case 'update':
-                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.update.valor.redirect, data));
-                break;
-            case 'delete':
-                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.delete.valor.redirect, data));
-                break;
-            default:
-                break;
-        }
-    }
-    aplyKeys(keys, endpoint, data) {
-        keys.forEach(key => {
-            switch (key.key) {
-                case '@ndoc':
-                    endpoint = endpoint.replace(key.key, this.user?.UsuarioSistema?.NDOC || '');
-                    break;
-                case '@tdoc':
-                    endpoint = endpoint.replace(key.key, this.user?.UsuarioSistema?.TDOC || '');
-                    break;
-                case '@idKatios':
-                    endpoint = endpoint.replace(key.key, this.idKatios);
-                    break;
-                case '@pageNumber':
-                    endpoint = endpoint.replace(key.key, this.currentPage.toString());
-                    break;
-                case '@pageSize':
-                    endpoint = endpoint.replace(key.key, this.rowsPerPage.toString());
-                    break;
-                case '@searchValue':
-                    endpoint = endpoint.replace(key.key, encodeURIComponent(this.searchValue));
-                    break;
-                default:
-                    if (endpoint.includes(key.key) && data)
-                        endpoint = endpoint.replace(key.key, jsonpath.query(data, key?.scope || '')[0]);
-                    break;
+        this.tableroService.optionsMap().forEach((opc) => {
+            if (opc.valor.action) {
+                this.execAction(opc.valor);
             }
         });
-        return endpoint;
     }
     execAction(params) {
-        switch (params.action) {
-            case 'redirect':
-                this.router.navigateByUrl(this.aplyKeys(this.table.keys, params.link, this.itemSelected)).then(() => {
-                    if (params.reload)
-                        window.location.reload();
-                });
-                break;
-            default:
-                this.onSelectAction.emit({ data: _.cloneDeep(this.itemSelected), params });
-                break;
-        }
+        const result = this.tableroService.execAction(params);
+        if (result)
+            this.onSelectAction.emit(result);
     }
     onGlobalFilter(event, dt) {
         const target = event.target;
         dt.filterGlobal(target.value, 'contains');
     }
     showAddDialog() {
-        this.verifyCreateButton();
-        if (!this.showCreateButton && this.table?.dialog) {
-            this.dialogService.showDialog('create', this.table.dialog);
-        }
-        else {
-            this.redirect('create');
-        }
+        this.tableroService.showAddDialog();
     }
-    goToDetail(row) {
-        if (this.table?.redirect) {
-            this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.table.redirect, row.data));
-        }
+    goToDetail(event) {
+        this.tableroService.setItemSelected(event.data);
+        this.tableroService.goToDetail();
     }
     pageChange(event) {
-        if (this.table?.customPaginator) {
-            if (!this.initialLoadDone) {
-                return;
-            }
-            const newPage = Math.floor(event.first / event.rows) + 1;
-            const newRows = event.rows;
-            // Solo recargar si realmente cambió la página o el tamaño
-            if (newPage !== this.currentPage || newRows !== this.rowsPerPage) {
-                this.currentPage = newPage;
-                this.rowsPerPage = newRows;
-                this.getInfoTablero('data');
-            }
-        }
+        const newPage = Math.floor(event.first / event.rows) + 1;
+        const newRows = event.rows;
+        this.tableroService.pageChange(newPage, newRows);
     }
     onGlobalSearch(event) {
         const target = event.target;
-        this.searchValue = target.value;
-        // Cancelar búsqueda anterior si existe
-        if (this.searchTimeout) {
-            clearTimeout(this.searchTimeout);
-        }
-        // Debounce de 400ms para evitar múltiples llamadas
-        this.searchTimeout = setTimeout(() => {
-            this.currentPage = 1;
-            this.getInfoTablero('data');
-        }, 400);
+        const value = target.value;
+        this.tableroService.onGlobalSearch(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, deps: [{ token: GeneralService }, { token: i2.Router }, { token: SfCrudService }, { token: StepService }, { token: CrudDialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableroComponent, isStandalone: true, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt", showCreateButton: "showCreateButton", customConfig: "customConfig", table: "table", optionsMap: "optionsMap", customFilters: "customFilters", rowsPerPage: "rowsPerPage" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"table?.columns && initialLoadDone\" #dt [columns]=\"table.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"table?.customPaginator || false\"\r\n    [first]=\"(currentPage - 1) * rowsPerPage\" [globalFilterFields]=\"table?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"table?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"table?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{table?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"table?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"table?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                    @case('date:yyyy-mm-dd'){\r\n                    {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                    }\r\n                    @case('currency:USD'){\r\n                    {{rowData[col.col] | currency: 'USD'}}\r\n                    }\r\n                    @case('tag'){\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                    }\r\n                    @case('icon'){\r\n                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\r\n                    }\r\n                    @default{\r\n                    {{rowData[col.col]}}\r\n                    }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(table?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{table?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i8.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i12.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i15.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i16.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i17.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i18.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i19.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i20.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, deps: [{ token: GeneralService }, { token: SfCrudService }, { token: TableroService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableroComponent, isStandalone: true, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt", showCreateButton: "showCreateButton", customConfig: "customConfig", table: "table", customFilters: "customFilters", rowsPerPage: "rowsPerPage", optionsMap: "optionsMap" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"totalRows\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\"\r\n    [first]=\"first\" [globalFilterFields]=\"tableConfig?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"tableConfig?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{tableConfig?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"tableConfig?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"tableConfig?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"tableConfig?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                    @case('date:yyyy-mm-dd'){\r\n                    {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                    }\r\n                    @case('currency:USD'){\r\n                    {{rowData[col.col] | currency: 'USD'}}\r\n                    }\r\n                    @case('tag'){\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                    }\r\n                    @case('icon'){\r\n                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\r\n                    }\r\n                    @default{\r\n                    {{rowData[col.col]}}\r\n                    }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"tableConfig?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(tableConfig?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i10.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i13.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i14.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i15.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i16.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i17.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i18.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-crudtablero', imports: [CommonModule, FormsModule, TableModule, ButtonModule, DropdownModule, InputTextModule, ToolbarModule, TooltipModule, DialogModule, CardModule, IconFieldModule, InputIconModule,
-                        SelectModule, MultiSelectModule, SplitButtonModule, TagModule, AvatarModule, SkeletonModule], standalone: true, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"table?.columns && initialLoadDone\" #dt [columns]=\"table.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"table?.customPaginator || false\"\r\n    [first]=\"(currentPage - 1) * rowsPerPage\" [globalFilterFields]=\"table?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"table?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"table?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{table?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"table?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"table?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                    @case('date:yyyy-mm-dd'){\r\n                    {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                    }\r\n                    @case('currency:USD'){\r\n                    {{rowData[col.col] | currency: 'USD'}}\r\n                    }\r\n                    @case('tag'){\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                    }\r\n                    @case('icon'){\r\n                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\r\n                    }\r\n                    @default{\r\n                    {{rowData[col.col]}}\r\n                    }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(table?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{table?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: GeneralService }, { type: i2.Router }, { type: SfCrudService }, { type: StepService }, { type: CrudDialogService }], propDecorators: { opciones: [{
+                        SelectModule, MultiSelectModule, SplitButtonModule, TagModule, AvatarModule, SkeletonModule], standalone: true, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"totalRows\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\"\r\n    [first]=\"first\" [globalFilterFields]=\"tableConfig?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"tableConfig?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{tableConfig?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"tableConfig?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"tableConfig?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"tableConfig?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                    @case('date:yyyy-mm-dd'){\r\n                    {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                    }\r\n                    @case('currency:USD'){\r\n                    {{rowData[col.col] | currency: 'USD'}}\r\n                    }\r\n                    @case('tag'){\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                    }\r\n                    @case('icon'){\r\n                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\r\n                    }\r\n                    @default{\r\n                    {{rowData[col.col]}}\r\n                    }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"tableConfig?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(tableConfig?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: GeneralService }, { type: SfCrudService }, { type: TableroService }], propDecorators: { opciones: [{
                 type: Input
             }], idEntidad: [{
                 type: Input
@@ -1315,18 +1512,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], onSelectAction: [{
                 type: Output
+            }], customFilters: [{
+                type: Input
+            }], rowsPerPage: [{
+                type: Input
+            }], optionsMap: [{
+                type: Input
             }], color2: [{
                 type: HostBinding,
                 args: ["style.--secondary-color"]
             }], colorButtons: [{
                 type: HostBinding,
                 args: ["style.--button-color"]
-            }], optionsMap: [{
-                type: Input
-            }], customFilters: [{
-                type: Input
-            }], rowsPerPage: [{
-                type: Input
             }] } });
 
 class CrudConfig {
@@ -1349,6 +1546,8 @@ class ConfigTablero {
     selectionMode;
     redirect;
     customPaginator;
+    rowsPerPage;
+    label;
 }
 class ConfigRegistro {
     operations = [];
@@ -1515,7 +1714,7 @@ class StepComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, deps: [{ token: i2.Router }, { token: StepService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StepComponent, isStandalone: true, selector: "app-step", inputs: { items: "items" }, ngImport: i0, template: "<div>\r\n    <div id=\"step-container\">\r\n        <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n    </div>\r\n\r\n    <div class=\"content\">\r\n        <router-outlet></router-outlet>\r\n    </div>\r\n    <div class=\"buttons-step\">\r\n        <div >\r\n            <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n                (click)=\"requestNaviagtion(-1)\"></button>\r\n        </div>\r\n        <span >\r\n            <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\"  icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n                (click)=\"requestNaviagtion(1)\"></button>\r\n        </span>\r\n        <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n            [style]=\"{'margin-left': '10px'}\"></button>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}::ng-deep{& ul[role=tablist]{padding-bottom:10px}.p-steps-number{color:#fff!important}}.buttons-step{margin-bottom:1.5rem}.buttons-step button{height:3.5rem}.buttons-step ::ng-deep .p-button{background-color:var(--button-color);border-color:var(--button-color)}.buttons-step .p-button-icon-only{width:3.5rem}#step-container{overflow-x:scroll;scrollbar-width:20px;padding-bottom:5px}.buttons-step{display:flex;justify-content:space-evenly}.content{margin-block:30px}@media screen and (max-width: 765px){::ng-deep{.p-steps-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:inherit;text-align:center}}::ng-deep .p-steps-item a.p-menuitem-link{margin-inline:0!important;width:90vw}}\n"], dependencies: [{ kind: "ngmodule", type: StepsModule }, { kind: "component", type: i3$1.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StepComponent, isStandalone: true, selector: "app-step", inputs: { items: "items" }, ngImport: i0, template: "<div>\r\n    <div id=\"step-container\">\r\n        <p-steps #stepsComponent [model]=\"items\" [readonly]=\"false\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onactiveIndexChange($event)\"></p-steps>\r\n    </div>\r\n\r\n    <div class=\"content\">\r\n        <router-outlet></router-outlet>\r\n    </div>\r\n    <div class=\"buttons-step\">\r\n        <div >\r\n            <button pButton *ngIf=\"activeIndex != 0\" icon=\"pi pi-arrow-left\" [disabled]=\"loading\"\r\n                (click)=\"requestNaviagtion(-1)\"></button>\r\n        </div>\r\n        <span >\r\n            <button pButton *ngIf=\"!(activeIndex + 1 >= items.length)\"  icon=\"pi pi-arrow-right\" [disabled]=\"loading\"\r\n                (click)=\"requestNaviagtion(1)\"></button>\r\n        </span>\r\n        <button pButton *ngIf=\"activeIndex >= items.length - 1\" label=\"Finalizar\" [disabled]=\"loading\" (click)=\"requestNaviagtion(0)\"\r\n            [style]=\"{'margin-left': '10px'}\"></button>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .p-steps-number{background-color:var(--secondary-color)!important}::ng-deep .p-button{border-radius:6px}::ng-deep .p-steps-item .p-menuitem-link{margin-inline:15vw}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{color:#fff;font-family:sans-serif}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title{color:#4b5563;font-family:inherit}::ng-deep{& ul[role=tablist]{padding-bottom:10px}.p-steps-number{color:#fff!important}}.buttons-step{margin-bottom:1.5rem}.buttons-step button{height:3.5rem}.buttons-step ::ng-deep .p-button{background-color:var(--button-color);border-color:var(--button-color)}.buttons-step .p-button-icon-only{width:3.5rem}#step-container{overflow-x:scroll;scrollbar-width:20px;padding-bottom:5px}.buttons-step{display:flex;justify-content:space-evenly}.content{margin-block:30px}@media screen and (max-width: 765px){::ng-deep{.p-steps-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:inherit;text-align:center}}::ng-deep .p-steps-item a.p-menuitem-link{margin-inline:0!important;width:90vw}}\n"], dependencies: [{ kind: "ngmodule", type: StepsModule }, { kind: "component", type: i3$1.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
@@ -1679,7 +1878,7 @@ class FileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileUploadComponent, deps: [{ token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FileUploadComponent, isStandalone: true, selector: "sf-file-upload", inputs: { limit: "limit", files: "files", loading: "loading", configName: "configName", accept: "accept" }, outputs: { onUpload: "onUpload", onDeleteFile: "onDeleteFile" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"screen\" #screen>\r\n    <div class=\"fileUp\">\r\n        <div class=\"botones\">\r\n            <input type=\"file\" (change)=\"appendFiles($event)\" class=\"file-input\" #fileUpload multiple>\r\n            <button pButton pRipple type=\"button\" icon=\"pi pi-plus\" class=\"p-button-info\" (click)=\"fileUpload.click()\"\r\n                [disabled]=\"limit == files.length || loading\"></button>\r\n            <button *ngIf=\"limit != 1\" pButton pRipple type=\"button\" icon=\"pi pi-upload\" class=\"button-upload p-button-info\"\r\n                (click)=\"emitFiles()\" [disabled]=\"files.length == 0 || loading\"></button>\r\n        </div>\r\n\r\n        <hr>\r\n        <div class=\"imgs\">\r\n            <ul>\r\n                <li *ngFor=\"let file of files; let i = index\" [ngSwitch]=\"file.type\">\r\n                    <p>{{i+1}}. {{files[i].name}}</p>\r\n                    <div>\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-external-link\" class=\"p-button-rounded\"\r\n                        (click)=\"openFile(file)\"></button>\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-times\" class=\"p-button-rounded p-button-danger\"\r\n                        (click)=\"dropFile(file)\"></button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["#screen{container-type:inline-size}iframe{width:100%;padding:10px;text-align:center}.fileUp{border:1.5px solid gray;border-radius:5px;text-align:center}.fileUp .imgs{min-height:40px;margin-block:7px;max-height:135px;overflow-y:scroll}.fileUp hr{color:gray;margin:0}.fileUp .imgs ul li{text-decoration:none;display:flex;margin-block:5px;padding-inline:5px}.fileUp .imgs ul{padding-inline-start:30px}.fileUp .imgs ul li div{text-decoration:none;display:grid;grid-template-columns:50% 50%;margin-block:5px;margin-right:5px}.fileUp .botones *{margin-block:7px;margin-inline:10px}.fileUp .imgs ul li p{text-align:left;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.fileUp .imgs ul li p,.fileUp .imgs ul li button{margin-block:auto;margin-inline:5px;text-align:left}.fileUp .imgs ul li img,.fileUp .imgs ul li iframe{text-align:center;width:80%;padding-inline:10%}.file-input{display:none}::ng-deep .p-button.p-button-info,.p-buttonset.p-button-info>.p-button,.p-splitbutton.p-button-info>.p-button{background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animate-pulse{animation:pulse 1.5s infinite}@container (width < 768px){.fileUp .imgs ul li{display:grid;grid-template-columns:60% 40%}.fileUp .imgs ul li img,.fileUp .imgs ul li iframe{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FileUploadComponent, isStandalone: true, selector: "sf-file-upload", inputs: { limit: "limit", files: "files", loading: "loading", configName: "configName", accept: "accept" }, outputs: { onUpload: "onUpload", onDeleteFile: "onDeleteFile" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"screen\" #screen>\r\n    <div class=\"fileUp\">\r\n        <div class=\"botones\">\r\n            <input type=\"file\" (change)=\"appendFiles($event)\" class=\"file-input\" #fileUpload multiple>\r\n            <button pButton pRipple type=\"button\" icon=\"pi pi-plus\" class=\"p-button-info\" (click)=\"fileUpload.click()\"\r\n                [disabled]=\"limit == files.length || loading\"></button>\r\n            <button *ngIf=\"limit != 1\" pButton pRipple type=\"button\" icon=\"pi pi-upload\" class=\"button-upload p-button-info\"\r\n                (click)=\"emitFiles()\" [disabled]=\"files.length == 0 || loading\"></button>\r\n        </div>\r\n\r\n        <hr>\r\n        <div class=\"imgs\">\r\n            <ul>\r\n                <li *ngFor=\"let file of files; let i = index\" [ngSwitch]=\"file.type\">\r\n                    <p>{{i+1}}. {{files[i].name}}</p>\r\n                    <div>\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-external-link\" class=\"p-button-rounded\"\r\n                        (click)=\"openFile(file)\"></button>\r\n                        <button pButton pRipple type=\"button\" icon=\"pi pi-times\" class=\"p-button-rounded p-button-danger\"\r\n                        (click)=\"dropFile(file)\"></button>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["#screen{container-type:inline-size}iframe{width:100%;padding:10px;text-align:center}.fileUp{border:1.5px solid gray;border-radius:5px;text-align:center}.fileUp .imgs{min-height:40px;margin-block:7px;max-height:135px;overflow-y:scroll}.fileUp hr{color:gray;margin:0}.fileUp .imgs ul li{text-decoration:none;display:flex;margin-block:5px;padding-inline:5px}.fileUp .imgs ul{padding-inline-start:30px}.fileUp .imgs ul li div{text-decoration:none;display:grid;grid-template-columns:50% 50%;margin-block:5px;margin-right:5px}.fileUp .botones *{margin-block:7px;margin-inline:10px}.fileUp .imgs ul li p{text-align:left;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.fileUp .imgs ul li p,.fileUp .imgs ul li button{margin-block:auto;margin-inline:5px;text-align:left}.fileUp .imgs ul li img,.fileUp .imgs ul li iframe{text-align:center;width:80%;padding-inline:10%}.file-input{display:none}::ng-deep .p-button.p-button-info,.p-buttonset.p-button-info>.p-button,.p-splitbutton.p-button-info>.p-button{background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animate-pulse{animation:pulse 1.5s infinite}@container (width < 768px){.fileUp .imgs ul li{display:grid;grid-template-columns:60% 40%}.fileUp .imgs ul li img,.fileUp .imgs ul li iframe{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -2263,7 +2462,7 @@ class ControlComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ControlComponent, deps: [{ token: GeneralService }, { token: SfCrudService }, { token: i0.ChangeDetectorRef }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo", showCssClass: "showCssClass", environment: "environment", context: "context" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked", setDependencyValue: "setDependencyValue" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\"\r\n    [ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\"\r\n    [class.show]=\"showCssClass\">\r\n    <div class=\"label-container\">\r\n        <label [for]=\"label\">{{label}}</label>\r\n        <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n            [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n            (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n    </div>\r\n\r\n    <ng-container *ngSwitchCase=\"'string'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'input'\">\r\n                <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n                    [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n                    (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n                    [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'password'\">\r\n                <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n                    [disabled]=\"control.disabled || false\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'email'\">\r\n                <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n                    [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n                    (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phone'\">\r\n                <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n                    [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n                    [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\"\r\n                    [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'enum'\">\r\n                <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n                    placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n                    [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n                    placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n                    (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n                    [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n                <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n                    (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || false\" [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n                    <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"flex align-items-center gap-2\">\r\n                            <div>{{ item._display }}</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-autoComplete>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'input:search'\">\r\n                <div class=\"p-inputgroup\">\r\n                    <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n                        (keyup.enter)=\"doFocusOut()\" />\r\n                    <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'file'\">\r\n                <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n                    [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n                    [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n                    (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'calendar'\">\r\n                <!-- <div class=\"p-col-12\">\r\n                    <p-inputgroup>\r\n                        <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n                            (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n                        <p-calendar\r\n                                [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n                                [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n                                [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n                                [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                                (onBlur)=\"onChangeDate()\"\r\n                            ></p-calendar>\r\n                    </p-inputgroup>\r\n                    \r\n                </div> -->\r\n                <p-datepicker [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || false\" [showOnFocus]=\"control.hide\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></p-datepicker>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'numeric'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'currency'\">\r\n                <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <p-inputgroup>\r\n                    <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n                        (keyup.enter)=\"doFocusOut()\" />\r\n                    <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n                </p-inputgroup>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || false\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'array'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'file'\">\r\n                <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n                    [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n                    [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n                    (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'multiselect'\">\r\n                <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n                    [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n                    [placeholder]=\"control.config?.placeholder\"\r\n                    [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n                    [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n                    [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || false\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", styles: ["::ng-deep .label-container{& label{margin-right:10px;color:#55585b;font-size:17px}& i{font-size:1.1rem}}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .p-inputgroup{p-calendar{display:contents;::ng-deep input{display:none!important}::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}}p-inputMask{display:contents;::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}}}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$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: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i7$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i8$1.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i15.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i16.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i12$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i14$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i15$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i16$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i17$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i18$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i19$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ControlComponent, isStandalone: true, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo", showCssClass: "showCssClass", environment: "environment", context: "context" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked", setDependencyValue: "setDependencyValue" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\">\r\n    <p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p>\r\n</ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container ml-0\"\r\n    [ngClass]=\"control.labelPosition === 'horizontal' ? (control.reverse ? 'flex gap-2 flex-row-reverse items-left' : 'flex gap-2 items-left') : (control.reverse ? 'flex flex-column flex-column-reverse' : 'flex flex-column')\"\r\n    [class.show]=\"showCssClass\">\r\n    <div class=\"label-container\">\r\n        <label [for]=\"label\">{{label}}</label>\r\n        <i #tooltip *ngIf=\"control.tooltip\" class=\"pi pi-question-circle\"\r\n            [tooltipPosition]=\"control.tooltipPosition || 'top'\" [pTooltip]=\"control.tooltip\"\r\n            (touchstart)=\"onTouchDescription()\" (touchend)=\"onUnTouchDescription()\"></i>\r\n    </div>\r\n\r\n    <ng-container *ngSwitchCase=\"'string'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'input'\">\r\n                <input pInputText [name]=\"label\" type=\"text\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n                    [disabled]=\"control.disabled || false\" [autocomplete]=\"control.autocomplete || 'off'\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [rows]=\"control.config?.rows ? control.config.rows : 4\" [(ngModel)]=\"value\"\r\n                    (input)=\"sendValue()\" pInputTextarea [disabled]=\"control.config?.disabled || false\"\r\n                    [autoResize]=\"control.config?.autoresize || false\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'password'\">\r\n                <input pInputText type=\"password\" [(ngModel)]=\"value\" (input)=\"sendValue()\"\r\n                    [disabled]=\"control.disabled || false\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'email'\">\r\n                <input pInputText type=\"text\" [(ngModel)]=\"value\" placeholder=\"email@example.com\"\r\n                    [disabled]=\"control.disabled || false\" autocomplete=\"email\" (input)=\"onInputEmail(false)\"\r\n                    (focusout)=\"onInputEmail(true)\" (keyup.enter)=\"doFocusOut()\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phone'\">\r\n                <p-inputMask mask=\"(999) 999-9999\" [(ngModel)]=\"value\" placeholder=\"(999) 999-9999\"\r\n                    [disabled]=\"control.disabled || false\" autocomplete=\"tel-national\"\r\n                    [unmask]=\"control.unmask || false\" (onComplete)=\"sendValue()\"></p-inputMask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <input pInputText type=\"text\" [value]=\"value | formatAddress: control.separador\" autocomplete=\"off\"\r\n                    [disabled]=\"clicked\" (keydown)=\"onClickedAddres()\" (focus)=\"onClickedAddres()\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'enum'\">\r\n                <p-select [options]=\"control.enum\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" appendTo=\"body\"\r\n                    placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n                    [optionLabel]=\"control.config.optionLabel\" [showClear]=\"control.config.showClear\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\" appendTo=\"body\"\r\n                    placeholder=\"Seleccione una opci\u00F3n\" [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown:replace'\">\r\n                <p-select [lazy]=\"isLoading\" [options]=\"dataFromService\" (onChange)=\"sendValueFromObject($event)\"\r\n                    [optionLabel]=\"control.config.optionLabel\" appendTo=\"body\" placeholder=\"Seleccione una opci\u00F3n\"\r\n                    [disabled]=\"control.disabled || false\"></p-select>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n                    (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [field]=\"control.field\"\r\n                    [minLength]=\"1\" (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || false\" (onClear)=\"setValue.emit(null)\"></p-autoComplete>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocompleteCustom'\">\r\n                <p-autoComplete [showEmptyMessage]=\"true\" [suggestions]=\"dataFromService\" appendTo=\"body\"\r\n                    (completeMethod)=\"loadDataFromControlBusquedaService($event)\" [minLength]=\"1\"\r\n                    (onSelect)=\"sendValueFromObject($event)\" [(ngModel)]=\"tempValue\"\r\n                    [disabled]=\"control.disabled || false\" [field]=\"control.field\" (onClear)=\"setValue.emit(null)\">\r\n                    <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"flex align-items-center gap-2\">\r\n                            <div>{{ item._display }}</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-autoComplete>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'input:search'\">\r\n                <div class=\"p-inputgroup\">\r\n                    <input type=\"text\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n                        (keyup.enter)=\"doFocusOut()\" />\r\n                    <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'file'\">\r\n                <sf-file-upload *ngIf=\"!isLoading\" [accept]=\"control.config?.accept || 'image/*,application/pdf'\"\r\n                    [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\" [configName]=\"control.config?.configName\"\r\n                    [limit]=\"control.config?.limit || 1\" (onUpload)=\"onUpload($event)\"\r\n                    (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'calendar'\">\r\n                <!-- <div class=\"p-col-12\">\r\n                    <p-inputgroup>\r\n                        <p-inputMask [(ngModel)]=\"tempValue\" [mask]=\"maskDate\" [placeholder]=\"control.placeholder\"\r\n                            (onBlur)=\"onChangeSDate($event)\" [disabled]=\"control.disabled || false\"></p-inputMask>\r\n                        <p-calendar\r\n                                [(ngModel)]=\"value\" class=\"only-icon\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2035\"\r\n                                [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\" [disabled]=\"control.disabled || false\"\r\n                                [showOnFocus]=\"!control.hide\" [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\"\r\n                                [touchUI]=\"control.touchUI || false\" [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                                (onBlur)=\"onChangeDate()\"\r\n                            ></p-calendar>\r\n                    </p-inputgroup>\r\n                    \r\n                </div> -->\r\n                <p-datepicker [(ngModel)]=\"value\" inputId=\"icondisplay\" [monthNavigator]=\"true\" [yearNavigator]=\"true\"\r\n                    yearRange=\"1900:2035\" [dateFormat]=\"control.format || 'yy-mm-dd'\" appendTo=\"body\"\r\n                    [disabled]=\"control.disabled || false\" [showOnFocus]=\"control.hide\"\r\n                    [placeholder]=\"control.placeholder || 'aaaa-mm-dd'\" [showIcon]=\"control.showIcon || false\"\r\n                    (onSelect)=\"onChangeDate()\" (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\"\r\n                    class=\"p-0\"></p-datepicker>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'numeric'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'currency'\">\r\n                <p-inputNumber [ngModel]=\"value\" (ngModelChange)=\"value = $event; sendValue()\" mode=\"decimal\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\" [prefix]=\"control.currency || '$ '\"\r\n                    [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal'\">\r\n                <p-inputNumber [ngModel]=\"value\" mode=\"decimal\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percentage'\">\r\n                <p-inputNumber [ngModel]=\"value\" suffix=\" %\" (ngModelChange)=\"value = $event; sendValue()\"\r\n                    (onInput)=\"sendValue()\" [min]=\"control.min || null\" [max]=\"control.max || null\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 2\" [locale]=\"control.locale || undefined\"\r\n                    [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <p-inputgroup>\r\n                    <input type=\"number\" pInputText [(ngModel)]=\"value\" (focusout)=\"sendValue()\"\r\n                        (keyup.enter)=\"doFocusOut()\" />\r\n                    <button type=\"button\" pButton icon=\"pi pi-search\" (click)=\"searchValue(value)\"></button>\r\n                </p-inputgroup>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'incremental'\">\r\n                <p-inputnumber [(ngModel)]=\"value\" [showButtons]=\"true\" buttonLayout=\"horizontal\" inputId=\"horizontal\"\r\n                    spinnerMode=\"horizontal\" [step]=\"control.step || 1\" [mode]=\"control.mode || 'currency'\"\r\n                    [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" [locale]=\"control.locale || undefined\"\r\n                    [useGrouping]=\"control.useGrouping || false\" [disabled]=\"control.disabled || false\"\r\n                    (ngModelChange)=\"value = $event; sendValue()\">\r\n                    <ng-template #incrementbuttonicon>\r\n                        <span class=\"pi pi-plus\"></span>\r\n                    </ng-template>\r\n                    <ng-template #decrementbuttonicon>\r\n                        <span class=\"pi pi-minus\"></span>\r\n                    </ng-template>\r\n                </p-inputnumber>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'array'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'file'\">\r\n                <sf-file-upload *ngIf=\"!isLoading\" [loading]=\"uploadingFiles\" [files]=\"uploadedFiles\"\r\n                    [configName]=\"control.config?.configName\" [limit]=\"control.config?.limit || 1\"\r\n                    [accept]=\"control.config?.accept || 'image/*,application/pdf'\" (onUpload)=\"onUpload($event)\"\r\n                    (onDeleteFile)=\"onDeleteFile($event)\"></sf-file-upload>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'multiselect'\">\r\n                <p-multiSelect [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\"\r\n                    [optionLabel]=\"control.config?.optionLabel\" [optionValue]=\"control.config?.optionValue\"\r\n                    [placeholder]=\"control.config?.placeholder\"\r\n                    [display]=\"control.config?.display || 'chip'\"></p-multiSelect>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"tempValue\" (onChange)=\"onChangeSwitch()\" [id]=\"label\"\r\n                    [trueValue]=\"control?.trueValue !== undefined ? control?.trueValue: null\"\r\n                    [falseValue]=\"control?.falseValue !== undefined ? control?.falseValue: null\"></p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <p-checkbox [(ngModel)]=\"tempCheckVal\" [binary]=\"control?.binary !== undefined ? control?.binary: true\"\r\n                    (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"control.subtype\">\r\n            <ng-container *ngSwitchCase=\"'group'\">\r\n                <p-selectbutton [options]=\"dataFromService\" [(ngModel)]=\"value\" (onChange)=\"sendValue()\" \r\n                    [disabled]=\"control.disabled || false\" [optionLabel]=\"control.config.optionLabel\"\r\n                    [optionValue]=\"control.field || control.config.optionValue\"></p-selectbutton>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>", styles: ["::ng-deep .label-container{& label{margin-right:10px;color:#55585b;font-size:17px}& i{font-size:1.1rem}}::ng-deep .p-tooltip{max-width:15rem;font-size:.85rem;text-align:center}.control-container ::ng-deep .p-inputtext,.control-container ::ng-deep .p-inputwrapper,.control-container ::ng-deep .p-select,.control-container ::ng-deep .p-datepicker{width:100%}.control-container.show ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container.show ::ng-deep .p-component,.control-container.show ::ng-deep .p-component *{border-radius:6px}.control-container.show ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container.show ::ng-deep .p-inputtext:focus,.control-container.show ::ng-deep .p-inputtext:active,.control-container.show ::ng-deep .p-inputwrapper:focus,.control-container.show ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container.show ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container.show ::ng-deep .p-dropdown{background:#fff;border:1px solid #d1d5db;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.control-container.show ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container.show ::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container.show ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container.show ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container.show ::ng-deep .p-button.p-button-danger,.control-container.show ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container.show ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container.show ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container.show ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container.show ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container.show ::ng-deep .p-datepicker{padding:0}.control-container.show ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container.show ::ng-deep .p-datepicker-month,.control-container.show ::ng-deep .p-datepicker-month:focus,.control-container.show ::ng-deep .p-datepicker-year:focus,.control-container.show ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.show .p-inputgroup{p-calendar{display:contents;::ng-deep input{display:none!important}::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}}p-inputMask{display:contents;::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}}}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i7$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i8.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i13.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i14.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i12$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i14$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i15$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i16$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i17$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i18$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i19.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ControlComponent, decorators: [{
             type: Component,
@@ -2696,13 +2895,13 @@ class FormComponent {
             return;
         this.setValue(value.data, value.scope, i, j, k);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [{ token: SfCrudService }, { token: i2$1.DomSanitizer }, { token: StepService }, { token: i4.AdoService }, { token: i4.JWTService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador", showCss: "showCss" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n  <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n    Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n    <br>\r\n  </ng-container>\r\n  <br>\r\n  <ng-container *ngIf=\"isAddressDialog\">\r\n    Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n  </ng-container>\r\n  <p-fluid>\r\n    <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n        <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n            <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n                {{element?.label}}\r\n            </div>\r\n            <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                          <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n                            <p>{{el.label}}</p>\r\n                          </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n                            <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n                            <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n                                [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n                                (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n                            <sf-simulador  [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n                                (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n                        </ng-container>\r\n                        <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n                            <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'ADO'\">\r\n                          <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n                            <div class=\"data-ado-container\">\r\n                              <ng-container *ngIf=\"proceso\">\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n                                (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n                                (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n                                <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n                                (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n                              </ng-container>\r\n                              <div class=\"buttons\">\r\n                                <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n                              </div>\r\n                            </div>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n                          </div>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'Table'\">\r\n                            <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n                                <ng-template pTemplate=\"caption\">\r\n                                    <div class=\"flex align-items-center justify-content-between\">\r\n                                        <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n                                            class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n                                    </div>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"header\" let-columns>\r\n                                    <tr>\r\n                                        <th *ngFor=\"let col of columns\">\r\n                                            {{col.label}}\r\n                                        </th>\r\n                                        <ng-container>\r\n                                            <th></th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n                                    <tr>\r\n                                        <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                                            <ng-container *ngSwitchCase=\"'control'\">\r\n                                                <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n                                                    [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n                                                    (sendNotification)=\"sendNotification($event)\"\r\n                                                    (sendObject)=\"applyValuesFromObject($event)\"\r\n                                                    (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n                                                    [showTempValue]=\"true\" [showCssClass]=\"showCss\"\r\n                                                    >\r\n                                                </sf-control>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'text'\">\r\n                                                <td>{{rowData[col.col]}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'address'\">\r\n                                              <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n                                                <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n                                                <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n                                                <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                                <td>\r\n                                                    <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n                                                    <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n                                                </td>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                        <ng-container>\r\n                                            <td>\r\n                                                <button pButton pRipple type=\"button\"\r\n                                                    (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n                                                    class=\"p-button-rounded p-button-info mr-1\"></button>\r\n                                                <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n                                                    icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n                <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n                    <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                    [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                        <ng-container [ngSwitch]=\"el.type\">\r\n                            <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n                                [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n                                (sendNotification)=\"sendNotification($event)\"\r\n                                (sendObject)=\"applyValuesFromObject($event)\"\r\n                                (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n                                (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        </ng-container>\r\n                    </div>\r\n                    <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n                    [label]=\"element.deleteButton.label\" />\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n                        <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh;& iframe{width:80%;margin-inline:10%}}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content;>*{margin-inline:4px}>div{display:flex;align-items:center;>*{margin-inline:4px}}}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%;& pdf-viewer{min-height:130vh!important;max-height:130vh!important}}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%;& pdf-viewer{min-height:60vh!important;max-height:120vh!important}}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center;.buttons{max-width:80vw;flex-direction:row}}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: "component", type: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo", "showCssClass", "environment", "context"], outputs: ["setValue", "sendObject", "addressClicked", "setDependencyValue"] }, { kind: "ngmodule", type: SfPdfsignModule }, { kind: "component", type: i10.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "ngmodule", type: SfSimuladorModule }, { kind: "component", type: i6$1.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [{ token: SfCrudService }, { token: i2$1.DomSanitizer }, { token: StepService }, { token: i4$1.AdoService }, { token: i4$1.JWTService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador", showCss: "showCss" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n  <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n    Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n    <br>\r\n  </ng-container>\r\n  <br>\r\n  <ng-container *ngIf=\"isAddressDialog\">\r\n    Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n  </ng-container>\r\n  <p-fluid>\r\n    <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n        <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n            <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n                {{element?.label}}\r\n            </div>\r\n            <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                          <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n                            <p>{{el.label}}</p>\r\n                          </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n                            <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n                            <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n                                [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n                                (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n                            <sf-simulador  [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n                                (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n                        </ng-container>\r\n                        <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n                            <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'ADO'\">\r\n                          <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n                            <div class=\"data-ado-container\">\r\n                              <ng-container *ngIf=\"proceso\">\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n                                (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n                                (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n                                <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n                                (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n                              </ng-container>\r\n                              <div class=\"buttons\">\r\n                                <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n                              </div>\r\n                            </div>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n                          </div>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'Table'\">\r\n                            <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n                                <ng-template pTemplate=\"caption\">\r\n                                    <div class=\"flex align-items-center justify-content-between\">\r\n                                        <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n                                            class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n                                    </div>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"header\" let-columns>\r\n                                    <tr>\r\n                                        <th *ngFor=\"let col of columns\">\r\n                                            {{col.label}}\r\n                                        </th>\r\n                                        <ng-container>\r\n                                            <th></th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n                                    <tr>\r\n                                        <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                                            <ng-container *ngSwitchCase=\"'control'\">\r\n                                                <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n                                                    [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n                                                    (sendNotification)=\"sendNotification($event)\"\r\n                                                    (sendObject)=\"applyValuesFromObject($event)\"\r\n                                                    (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n                                                    [showTempValue]=\"true\" [showCssClass]=\"showCss\"\r\n                                                    >\r\n                                                </sf-control>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'text'\">\r\n                                                <td>{{rowData[col.col]}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'address'\">\r\n                                              <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n                                                <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n                                                <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n                                                <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                                <td>\r\n                                                    <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n                                                    <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n                                                </td>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                        <ng-container>\r\n                                            <td>\r\n                                                <button pButton pRipple type=\"button\"\r\n                                                    (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n                                                    class=\"p-button-rounded p-button-info mr-1\"></button>\r\n                                                <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n                                                    icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n                <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n                    <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                    [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                        <ng-container [ngSwitch]=\"el.type\">\r\n                            <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n                                [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n                                (sendNotification)=\"sendNotification($event)\"\r\n                                (sendObject)=\"applyValuesFromObject($event)\"\r\n                                (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n                                (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        </ng-container>\r\n                    </div>\r\n                    <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n                    [label]=\"element.deleteButton.label\" />\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n                        <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh;& iframe{width:80%;margin-inline:10%}}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content;>*{margin-inline:4px}>div{display:flex;align-items:center;>*{margin-inline:4px}}}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%;& pdf-viewer{min-height:130vh!important;max-height:130vh!important}}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%;& pdf-viewer{min-height:60vh!important;max-height:120vh!important}}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center;.buttons{max-width:80vw;flex-direction:row}}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6$1.Fluid, selector: "p-fluid" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: "component", type: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo", "showCssClass", "environment", "context"], outputs: ["setValue", "sendObject", "addressClicked", "setDependencyValue"] }, { kind: "ngmodule", type: SfPdfsignModule }, { kind: "component", type: i10$1.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "ngmodule", type: SfSimuladorModule }, { kind: "component", type: i6$2.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-form', imports: [Tooltip, CommonModule, FormsModule, FluidModule, ButtonModule, TableModule, ControlComponent, SfPdfsignModule, SfSimuladorModule], standalone: true, template: "<div *ngIf=\"controlsLoaded\" class=\"frm-container\">\r\n  <ng-container *ngIf=\"isAddressDialog && currentAddress\">\r\n    Direcci\u00F3n actual: {{currentAddress | formatAddress: separador}}\r\n    <br>\r\n  </ng-container>\r\n  <br>\r\n  <ng-container *ngIf=\"isAddressDialog\">\r\n    Direcci\u00F3n nueva: {{newAddress | formatAddress: separador}}\r\n  </ng-container>\r\n  <p-fluid>\r\n    <div *ngFor=\"let element of uiEsquema.elements; let i = index\" [class]=\"element?.class\" #a>\r\n        <ng-container [ngSwitch]=\"element.type\" *ngIf=\"visible[i][0]\">\r\n            <div class=\"label\" *ngSwitchCase=\"'Label'\" [style]=\"element?.style\">\r\n                {{element?.label}}\r\n            </div>\r\n            <ng-container *ngSwitchCase=\"'HorizontalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                          <div *ngSwitchCase=\"'Texto'\" [ngStyle]=\"{'height': '100%', 'margin-block': 'auto'}\">\r\n                            <p>{{el.label}}</p>\r\n                          </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'VerticalLayout'\">\r\n                <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                    <ng-container [ngSwitch]=\"el.type\" *ngIf=\"visible[i][j]\">\r\n                        <sf-control *ngSwitchCase=\"'Control'\" [control]=\"controls[i][j]\" [label]=\"el.label\"\r\n                            [value]=\"values[i][j]\" (setValue)=\"setValue($event, el.scope, i, j)\"\r\n                            (sendNotification)=\"sendNotification($event)\"\r\n                            (sendObject)=\"applyValuesFromObject($event)\"\r\n                            (addressClicked)=\"openPopUpDireccion(el.scope)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        <div *ngSwitchCase=\"'PDF'\" class=\"pdf\">\r\n                            <iframe [src]=\"values[i][j]\" frameborder=\"0\" allow=\"geolocation *; camera *;\"></iframe>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'PDF-SIGN'\">\r\n                            <sf-sign [allowDownload]=\"true\" [idkatios]=\"idKatios\" [tdoc]=\"data.pdf.tdoc\" [ndoc]=\"data.pdf.ndoc\"\r\n                                [idDocument]=\"data.pdf.id\" [typeDocument]=\"data.pdf.idDoc\"\r\n                                (stateDocument)=\"onStateDocument($event)\"></sf-sign>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'SIMULADOR'\">\r\n                            <sf-simulador  [simulador]=\"data\" [otherToolTips]=\"data.otherTooltips\"\r\n                                (simuladorChange)=\"onSimuladorChange($event)\" (enProceso)=\"emitLoadingForm($event)\"></sf-simulador>\r\n                        </ng-container>\r\n                        <div *ngSwitchCase=\"'ADO'\" class=\"buttons\">\r\n                            <p-button *ngIf=\"!data?.ADO?.dataProceso?.idProceso\" [ngStyle]=\"el?.ngStyle\" (click)=\"goToADO()\" label=\"Validar identidad\"></p-button>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'ADO'\">\r\n                          <div *ngIf=\"data?.ADO?.dataProceso?.idProceso\">\r\n                            <div class=\"data-ado-container\">\r\n                              <ng-container *ngIf=\"proceso\">\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === true\" pTooltip=\"Validado\" tooltipPosition=\"top\" id=\"Validado\" class=\"pi pi-user\" style=\"color: green\"\r\n                                (touchstart)=\"onTouchDescription('Validado', false)\" (touchend)=\"onUnTouchDescription('Validado')\"></i>\r\n                                <i *ngIf=\"proceso?.respuestaProceso?.EsExitoso === false\" pTooltip=\"No validado\" tooltipPosition=\"top\" id=\"No-Validado\" class=\"pi pi-user\" style=\"color: red\"\r\n                                (touchstart)=\"onTouchDescription('No-Validado', false)\" (touchend)=\"onUnTouchDescription('No-Validado')\"></i>\r\n                                <i *ngIf=\"!proceso?.respuestaProceso\" pTooltip=\"Sin validar\" tooltipPosition=\"top\" class=\"pi pi-user\" id=\"Sin-Validar\" style=\"color: gray\"\r\n                                (touchstart)=\"onTouchDescription('Sin-Validar', false)\" (touchend)=\"onUnTouchDescription('Sin-Validar')\"></i>\r\n                              </ng-container>\r\n                              <div class=\"buttons\">\r\n                                <button pButton icon=\"pi pi-external-link\" (click)=\"goToADO()\" pTooltip=\"Abrir\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-copy\" (click)=\"copyToClipboard(proceso.id)\" pTooltip=\"Copiar\" [disabled]=\"!proceso\"></button>\r\n                                <button pButton icon=\"pi pi-refresh\" (click)=\"refreshIntegracion(proceso.id)\" pTooltip=\"Refrescar\" [disabled]=\"!proceso\"></button>\r\n                              </div>\r\n                            </div>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && !proceso.respuestaProceso && proceso.estado == 'PROCESANDO'\">Procesando</p>\r\n                            <p class=\"result-ado\" *ngIf=\"proceso && proceso.respuestaProceso && proceso.estado == 'TERMINADO'\">{{proceso.respuestaProceso.Detalle ?? proceso.respuestaProceso.Mensaje}}</p>\r\n                          </div>\r\n                        </div>\r\n                        <ng-container *ngSwitchCase=\"'Table'\">\r\n                            <p-table [value]=\"values[i][j]\" [columns]=\"controls[i][j].config.columns\">\r\n                                <ng-template pTemplate=\"caption\">\r\n                                    <div class=\"flex align-items-center justify-content-between\">\r\n                                        <button pButton pRipple icon=\"pi pi-plus\" (click)=\"addObjectArray(el)\"\r\n                                            class=\"p-button-success\" [disabled]=\"controls[i][j].disabled === true\"></button>\r\n                                    </div>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"header\" let-columns>\r\n                                    <tr>\r\n                                        <th *ngFor=\"let col of columns\">\r\n                                            {{col.label}}\r\n                                        </th>\r\n                                        <ng-container>\r\n                                            <th></th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\r\n                                    <tr>\r\n                                        <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                                            <ng-container *ngSwitchCase=\"'control'\">\r\n                                                <sf-control [control]=\"extracControlFromTableElements(i, j, col)\" [label]=\"\"\r\n                                                    [value]=\"extracValueFromTableElements(i, j, rowIndex, col)\"\r\n                                                    (sendNotification)=\"sendNotification($event)\"\r\n                                                    (sendObject)=\"applyValuesFromObject($event)\"\r\n                                                    (setValue)=\"setValue($event, extracValueFromTableElements(i, j, rowIndex, col).scope, i, j)\"\r\n                                                    [showTempValue]=\"true\" [showCssClass]=\"showCss\"\r\n                                                    >\r\n                                                </sf-control>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'text'\">\r\n                                                <td>{{rowData[col.col]}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'address'\">\r\n                                              <td>{{rowData[col.col] | formatAddress: extracControlFromTableElements(i, j, col).separador }}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'currency:USD'\">\r\n                                                <td>{{rowData[col.col] | currency: 'USD'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:yyyy-mm-dd'\">\r\n                                                <td>{{rowData[col.col] | date: 'yyyy-mm-dd'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'date:dd/mm/yyyy'\">\r\n                                                <td>{{rowData[col.col] | date: 'dd/MM/yyyy'}}</td>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                                <td>\r\n                                                    <i *ngIf=\"rowData[col.col]\" class=\"pi pi-check\"></i>\r\n                                                    <i *ngIf=\"!rowData[col.col]\" class=\"pi pi-times\"></i>\r\n                                                </td>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                        <ng-container>\r\n                                            <td>\r\n                                                <button pButton pRipple type=\"button\"\r\n                                                    (click)=\"editRow(el, rowData, rowIndex)\" icon=\"pi pi-pencil\"\r\n                                                    class=\"p-button-rounded p-button-info mr-1\"></button>\r\n                                                <button pButton pRipple type=\"button\" (click)=\"deleteRow(el, rowIndex)\" [disabled]=\"controls[i][j].disabled === true\"\r\n                                                    icon=\"pi pi-trash\" class=\"p-button-rounded p-button-danger\"></button>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'ArrayLayout'\">\r\n                <div *ngFor=\"let arrayItem of getArrayItems(element.scope); let arrayIndex = index\" [ngClass]=\"element.classElements || 'flex align-items-center w-full'\">\r\n                    <div *ngFor=\"let el of element.elements; let j =index\" [class]=\"el?.class\"\r\n                    [class.hidden]=\"el.hidden || false\" [style.display]=\"el.hide ? 'none' : null\">\r\n                        <ng-container [ngSwitch]=\"el.type\">\r\n                            <sf-control *ngSwitchCase=\"'Control'\" [control]=\"getControl(el,arrayIndex)\" [label]=\"el.label\"\r\n                                [value]=\"values[i][j] || getValueFromData(element,el,arrayIndex)\" (setValue)=\"setValue($event, el.scope, i, j,arrayIndex)\"\r\n                                (sendNotification)=\"sendNotification($event)\"\r\n                                (sendObject)=\"applyValuesFromObject($event)\"\r\n                                (addressClicked)=\"openPopUpDireccion(el.scope)\"\r\n                                (setDependencyValue)=\"setDependencyValue($event, i, j, arrayIndex)\" [showCssClass]=\"showCss\"></sf-control>\r\n                        </ng-container>\r\n                    </div>\r\n                    <p-button *ngIf=\"element.deleteButton && !(element.deleteButton.hide?.index === arrayIndex)\" [icon]=\"element.deleteButton.icon\" [rounded]=\"element.deleteButton.rounded || false\" [text]=\"element.deleteButton.text || true\" [severity]=\"element.deleteButton.severity || 'danger'\" (click)=\"removeArrayItem(element, i, arrayIndex)\" \r\n                    [label]=\"element.deleteButton.label\" />\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <div *ngIf=\"element.addButton\" class=\"flex items-center justify-content-between mb-2\">\r\n                        <p-button [icon]=\"element.addButton.icon\" [label]=\"element.addButton.label\" (click)=\"addArrayItem(element, i)\" [severity]=\"element.addButton.severity || 'primary'\"/>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    </p-fluid>\r\n</div>\r\n\r\n<!-- <p-toast *ngIf=\"isDialog\"></p-toast> -->\r\n", styles: [":not(.col-12) .label{display:flex;justify-content:center;align-items:center;padding-inline:.5rem;margin-bottom:15px;margin-top:20px;border-radius:13px;font-size:18px;font-size:inherit;background-color:var(--primary-color);text-align:center;color:var(--normal-text-color)}.pdf{display:flex;width:100%;height:80vh;& iframe{width:80%;margin-inline:10%}}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content;>*{margin-inline:4px}>div{display:flex;align-items:center;>*{margin-inline:4px}}}i.pi-user{font-size:2rem}.result-ado{min-height:1rem;text-align:center}sf-simulador{display:flow-root;width:80%;margin-inline:auto;margin-bottom:35px}sf-sign{display:block;margin-inline:auto;width:80%;& pdf-viewer{min-height:130vh!important;max-height:130vh!important}}.buttons{display:flex;justify-content:space-evenly}::ng-deep *{box-shadow:none}.frm-container ::ng-deep .p-inputtext:focus,.frm-container ::ng-deep .p-inputtext:active,.frm-container ::ng-deep .p-inputwrapper:focus,.frm-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.frm-container ::ng-deep :not(:disabled):active,.frm-container ::ng-deep :not(.p-disabled) .p-inputtext:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper:hover,.frm-container ::ng-deep :not(.p-disabled) .p-inputwrapper-focus,.frm-container ::ng-deep .p-radiobutton-box .p-highlight,.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover{border-color:var(--button-color)}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{background:var(--button-color);border-color:var(--button-color)!important}@media screen and (max-width:765px){:not(.col-12) .label{height:fit-content}.field{margin-bottom:.5rem}.pdf>iframe{width:100%;margin-inline:0}sf-sign{width:100%;& pdf-viewer{min-height:60vh!important;max-height:120vh!important}}sf-simulador{display:block;width:100%;margin-inline:auto}.data-ado-container{text-align:center;.buttons{max-width:80vw;flex-direction:row}}.buttons{flex-direction:column;align-items:center}}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover{border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover{color:var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-radiobutton .p-radiobutton-box .p-radiobutton-icon{background-color:#fff}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider{background-color:#e5e7eb}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-range{background-color:var(--primary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}\n"] }]
-        }], ctorParameters: () => [{ type: SfCrudService }, { type: i2$1.DomSanitizer }, { type: StepService }, { type: i4.AdoService }, { type: i4.JWTService }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: SfCrudService }, { type: i2$1.DomSanitizer }, { type: StepService }, { type: i4$1.AdoService }, { type: i4$1.JWTService }], propDecorators: { color: [{
                 type: HostBinding,
                 args: ["style.--primary-color"]
             }], color2: [{
@@ -3454,13 +3653,13 @@ class RegistroComponent {
         }
         return Promise.resolve(this.sfCrudService.mascaras);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RegistroComponent, deps: [{ token: GeneralService }, { token: i2.ActivatedRoute }, { token: i3.MessageService }, { token: SfCrudService }, { token: StepService }, { token: i6$1.SfSimuladorService }, { token: NotificationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RegistroComponent, isStandalone: true, selector: "sf-registro", inputs: { idKatios: "idKatios", trx: "trx", id: "id", user: "user", dataExt: "dataExt", ids: "ids", environment: "environment", buttonsFooterTemplate: "buttonsFooterTemplate", back_route: "back_route", showLoadingConfig: "showLoadingConfig", loadingTemplate: "loadingTemplate", showHeader: "showHeader", showCssClass: "showCssClass", idEntidad: "idEntidad" }, outputs: { sendData: "sendData", onSubmit: "onSubmit", onLoaded: "onLoaded" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showLoadingConfig && loadingTemplate && !sfCrudService.crudLoaded; else content\">\r\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n    <div class=\"card\">\r\n        <!--TODO convertir en template y editarla en -->\r\n        <h5 *ngIf=\"sfCrudService.registros.length >= 1 && showHeader\" class=\"card-header mb-2\"\r\n            style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n            <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] :\r\n                ''}}</span>\r\n            <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\"\r\n                (click)=\"back()\"></button>\r\n        </h5>\r\n        <div *ngIf=\"items.length > 1\">\r\n            <app-step [items]=\"items\"></app-step>\r\n        </div>\r\n        <div *ngIf=\"items.length == 1\">\r\n            <app-form [data]=\"sfCrudService.dataset[0]\" [esquema]=\"sfCrudService.esquemas[0]\"\r\n                [uiEsquema]=\"sfCrudService.uiEsquemas[0]\" [isDialog]=\"false\" [showCss]=\"showCssClass\"></app-form>\r\n\r\n            <!--renderizar un codigo personalizado desde el componente padre o renderizar el que se tiene por defecto-->\r\n            <ng-container *ngTemplateOutlet=\"buttonsFooterTemplate || defaultButtonsFooterTemplate\"></ng-container>\r\n            <ng-template #defaultButtonsFooterTemplate>\r\n                <div class=\"card-footer mt-2\" *ngIf=\"btnSubmit\">\r\n                    <button pButton pRipple type=\"button\" [icon]=\"btnSubmit.icon\" [label]=\"btnSubmit.label\"\r\n                        (click)=\"onClickBtnSubmit()\"></button>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n\r\n    <span *ngFor=\"let item of dialogElements; let $index=index\">\r\n        <p-dialog [(visible)]=\"displays[$index]\" [modal]=\"true\" [header]=\"'Detalle'\" [closable]=\"false\">\r\n            <!-- TODO header = currentElement.element.label ? currentElement.element.label: -->\r\n            <app-form [data]=\"item.data\" [esquema]=\"item.esquema\" [uiEsquema]=\"item.uiEsquema\" [isDialog]=\"true\"\r\n                [id]=\"ids[indexCrud]\" [isAddressDialog]=\"item.isAddressDialog === true\"\r\n                [separador]=\"item.separador\"></app-form>\r\n            <ng-template pTemplate=\"footer\">\r\n                <p-button icon=\"pi pi-times\" (onClick)=\"removeDialogItem()\" label=\"Cancelar\"></p-button>\r\n                <p-button icon=\"pi pi-check\" [disabled]=\"item.esquema.disabled === true\"\r\n                    (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus [autofocus]=\"true\"></p-button>\r\n            </ng-template>\r\n        </p-dialog>\r\n    </span>\r\n</ng-template>", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CardModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: StepComponent, selector: "app-step", inputs: ["items"] }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["uiEsquema", "esquema", "data", "isDialog", "isAddressDialog", "separador", "showCss"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i10$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RegistroComponent, deps: [{ token: GeneralService }, { token: i2.ActivatedRoute }, { token: i3.MessageService }, { token: SfCrudService }, { token: StepService }, { token: i6$2.SfSimuladorService }, { token: NotificationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RegistroComponent, isStandalone: true, selector: "sf-registro", inputs: { idKatios: "idKatios", trx: "trx", id: "id", user: "user", dataExt: "dataExt", ids: "ids", environment: "environment", buttonsFooterTemplate: "buttonsFooterTemplate", back_route: "back_route", showLoadingConfig: "showLoadingConfig", loadingTemplate: "loadingTemplate", showHeader: "showHeader", showCssClass: "showCssClass", idEntidad: "idEntidad" }, outputs: { sendData: "sendData", onSubmit: "onSubmit", onLoaded: "onLoaded" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showLoadingConfig && loadingTemplate && !sfCrudService.crudLoaded; else content\">\r\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n    <div class=\"card\">\r\n        <!--TODO convertir en template y editarla en -->\r\n        <h5 *ngIf=\"sfCrudService.registros.length >= 1 && showHeader\" class=\"card-header mb-2\"\r\n            style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n            <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] :\r\n                ''}}</span>\r\n            <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\"\r\n                (click)=\"back()\"></button>\r\n        </h5>\r\n        <div *ngIf=\"items.length > 1\">\r\n            <app-step [items]=\"items\"></app-step>\r\n        </div>\r\n        <div *ngIf=\"items.length == 1\">\r\n            <app-form [data]=\"sfCrudService.dataset[0]\" [esquema]=\"sfCrudService.esquemas[0]\"\r\n                [uiEsquema]=\"sfCrudService.uiEsquemas[0]\" [isDialog]=\"false\" [showCss]=\"showCssClass\"></app-form>\r\n\r\n            <!--renderizar un codigo personalizado desde el componente padre o renderizar el que se tiene por defecto-->\r\n            <ng-container *ngTemplateOutlet=\"buttonsFooterTemplate || defaultButtonsFooterTemplate\"></ng-container>\r\n            <ng-template #defaultButtonsFooterTemplate>\r\n                <div class=\"card-footer mt-2\" *ngIf=\"btnSubmit\">\r\n                    <button pButton pRipple type=\"button\" [icon]=\"btnSubmit.icon\" [label]=\"btnSubmit.label\"\r\n                        (click)=\"onClickBtnSubmit()\"></button>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n\r\n    <span *ngFor=\"let item of dialogElements; let $index=index\">\r\n        <p-dialog [(visible)]=\"displays[$index]\" [modal]=\"true\" [header]=\"'Detalle'\" [closable]=\"false\">\r\n            <!-- TODO header = currentElement.element.label ? currentElement.element.label: -->\r\n            <app-form [data]=\"item.data\" [esquema]=\"item.esquema\" [uiEsquema]=\"item.uiEsquema\" [isDialog]=\"true\"\r\n                [id]=\"ids[indexCrud]\" [isAddressDialog]=\"item.isAddressDialog === true\"\r\n                [separador]=\"item.separador\"></app-form>\r\n            <ng-template pTemplate=\"footer\">\r\n                <p-button icon=\"pi pi-times\" (onClick)=\"removeDialogItem()\" label=\"Cancelar\"></p-button>\r\n                <p-button icon=\"pi pi-check\" [disabled]=\"item.esquema.disabled === true\"\r\n                    (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus [autofocus]=\"true\"></p-button>\r\n            </ng-template>\r\n        </p-dialog>\r\n    </span>\r\n</ng-template>", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CardModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: StepComponent, selector: "app-step", inputs: ["items"] }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["uiEsquema", "esquema", "data", "isDialog", "isAddressDialog", "separador", "showCss"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i10$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RegistroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-registro', imports: [CommonModule, CardModule, ButtonModule, StepComponent, FormComponent, DialogModule, FormsModule], standalone: true, template: "<ng-container *ngIf=\"showLoadingConfig && loadingTemplate && !sfCrudService.crudLoaded; else content\">\r\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n    <div class=\"card\">\r\n        <!--TODO convertir en template y editarla en -->\r\n        <h5 *ngIf=\"sfCrudService.registros.length >= 1 && showHeader\" class=\"card-header mb-2\"\r\n            style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n            <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] :\r\n                ''}}</span>\r\n            <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\"\r\n                (click)=\"back()\"></button>\r\n        </h5>\r\n        <div *ngIf=\"items.length > 1\">\r\n            <app-step [items]=\"items\"></app-step>\r\n        </div>\r\n        <div *ngIf=\"items.length == 1\">\r\n            <app-form [data]=\"sfCrudService.dataset[0]\" [esquema]=\"sfCrudService.esquemas[0]\"\r\n                [uiEsquema]=\"sfCrudService.uiEsquemas[0]\" [isDialog]=\"false\" [showCss]=\"showCssClass\"></app-form>\r\n\r\n            <!--renderizar un codigo personalizado desde el componente padre o renderizar el que se tiene por defecto-->\r\n            <ng-container *ngTemplateOutlet=\"buttonsFooterTemplate || defaultButtonsFooterTemplate\"></ng-container>\r\n            <ng-template #defaultButtonsFooterTemplate>\r\n                <div class=\"card-footer mt-2\" *ngIf=\"btnSubmit\">\r\n                    <button pButton pRipple type=\"button\" [icon]=\"btnSubmit.icon\" [label]=\"btnSubmit.label\"\r\n                        (click)=\"onClickBtnSubmit()\"></button>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n\r\n    <span *ngFor=\"let item of dialogElements; let $index=index\">\r\n        <p-dialog [(visible)]=\"displays[$index]\" [modal]=\"true\" [header]=\"'Detalle'\" [closable]=\"false\">\r\n            <!-- TODO header = currentElement.element.label ? currentElement.element.label: -->\r\n            <app-form [data]=\"item.data\" [esquema]=\"item.esquema\" [uiEsquema]=\"item.uiEsquema\" [isDialog]=\"true\"\r\n                [id]=\"ids[indexCrud]\" [isAddressDialog]=\"item.isAddressDialog === true\"\r\n                [separador]=\"item.separador\"></app-form>\r\n            <ng-template pTemplate=\"footer\">\r\n                <p-button icon=\"pi pi-times\" (onClick)=\"removeDialogItem()\" label=\"Cancelar\"></p-button>\r\n                <p-button icon=\"pi pi-check\" [disabled]=\"item.esquema.disabled === true\"\r\n                    (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus [autofocus]=\"true\"></p-button>\r\n            </ng-template>\r\n        </p-dialog>\r\n    </span>\r\n</ng-template>", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [{ type: GeneralService }, { type: i2.ActivatedRoute }, { type: i3.MessageService }, { type: SfCrudService }, { type: StepService }, { type: i6$1.SfSimuladorService }, { type: NotificationService }, { type: i2.Router }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: GeneralService }, { type: i2.ActivatedRoute }, { type: i3.MessageService }, { type: SfCrudService }, { type: StepService }, { type: i6$2.SfSimuladorService }, { type: NotificationService }, { type: i2.Router }], propDecorators: { color: [{
                 type: HostBinding,
                 args: ["style.--primary-color"]
             }], color2: [{
@@ -3533,5 +3732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_DIALOG_COMPONENT, ChangeData, ConfigRegistro, ConfigTablero, ConstructionId, ControlComponent, CrudConfig, FormComponent, GENERAL_CRUD_SERVICE, Key, Notification, NotificationService, Operation, OverrideConfig, RegistroComponent, RequestChecking, SfCrudComponent, SfCrudService, Shema, StepService, TableroComponent, Validations, keyEsquema };
+export { APP_DIALOG_COMPONENT, ChangeData, ConfigRegistro, ConfigTablero, ConstructionId, ControlComponent, CrudConfig, FormComponent, GENERAL_CRUD_SERVICE, Key, Notification, NotificationService, Operation, OverrideConfig, RegistroComponent, RequestChecking, SfCrudComponent, SfCrudService, Shema, StepService, TableroComponent, TableroService, Validations, keyEsquema };
 //# sourceMappingURL=sf-crud.mjs.map