sf-crud 13.0.1 → 13.0.3

package/fesm2022/sf-crud.mjs

@@ -14,8 +14,8 @@ import * as i8 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i7 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i8$1 from '@angular/common';
-import * as i9 from 'primeng/iconfield';
+import * as i9 from '@angular/common';
+import * as i9$1 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
 import * as i10 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
@@ -36,30 +36,32 @@ import * as i7$2 from 'sf-simulador';
 import { SfSimuladorModule } from 'sf-simulador';
 import * as i10$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i12$1 from 'primeng/toast';
+import * as i12$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i5 from 'primeng/steps';
 import { StepsModule } from 'primeng/steps';
-import * as i15$1 from 'primeng/tooltip';
+import * as i16 from 'primeng/tooltip';
 import { Tooltip, TooltipModule } from 'primeng/tooltip';
 import * as i3 from '@angular/platform-browser';
 import * as i5$1 from 'sf-ado';
 import { SfAdoModule } from 'sf-ado';
 import * as i4 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i6 from 'primeng/datepicker';
+import * as i6 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i7$1 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i7$1 from '@angular/forms';
+import * as i8$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i9$1 from 'primeng/inputmask';
+import * as i10$1 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
-import * as i10$1 from 'primeng/inputnumber';
+import * as i11$1 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i11$1 from 'primeng/inputswitch';
+import * as i12$1 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i13$1 from 'primeng/multiselect';
+import * as i14$1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i14$1 from 'primeng/select';
+import * as i15$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { AccordionModule } from 'primeng/accordion';
 import { AvatarGroupModule } from 'primeng/avatargroup';
@@ -70,7 +72,6 @@ import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { CalendarModule } from 'primeng/calendar';
 import { CarouselModule } from 'primeng/carousel';
 import { CascadeSelectModule } from 'primeng/cascadeselect';
-import { CheckboxModule } from 'primeng/checkbox';
 import { ChipModule } from 'primeng/chip';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -170,6 +171,7 @@ class ValidationRequired {
     field;
     message;
     conditions;
+    validation;
 }
 class ValidationEqual extends ValidationRequired {
     value;
@@ -285,10 +287,10 @@ class GeneralService {
                 throw new Error("Invalid method");
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GeneralService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GeneralService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeneralService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeneralService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GeneralService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeneralService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -404,6 +406,16 @@ class SfCrudService {
     _tfmUser;
     _crudLoaded = new BehaviorSubject(false);
     _mascaras = [];
+    _disabledFields = new BehaviorSubject({ fields: [], disabled: false });
+    _operation = new BehaviorSubject({});
+    disabledFields$ = this._disabledFields.asObservable();
+    operation$ = this._operation.asObservable();
+    notifyFieldsToDisable(fields, disabled = true) {
+        this._disabledFields.next({ fields, disabled });
+    }
+    notifyChangeOperation(object) {
+        this._operation.next(object);
+    }
     get user() {
         if (!this._tfmUser)
             this._tfmUser = JSON.parse(localStorage.getItem("oSessionTFM"));
@@ -508,6 +520,10 @@ class SfCrudService {
      * @returns
      */
     applyObjectKeys(data, keysEsquema, registro) {
+        if (!data || typeof data !== 'object') {
+            console.warn('applyObjectKeys received invalid data:', data);
+            return data;
+        }
         for (let i = 0; i < keysEsquema.length; i++) {
             const opt = keysEsquema[i];
             let value = undefined;
@@ -515,18 +531,32 @@ class SfCrudService {
                 let keyFound = (registro.keys ?? [undefined])[opt.indexKey];
                 this.applyKey(keyFound, registro, data);
             }
-            else if (opt.indexData !== undefined) {
-                if (opt.isArray) {
-                    value = jsonpath.query(data, opt.scope);
+            else if (opt.indexData !== undefined && opt.scope) {
+                try {
+                    if (opt.isArray) {
+                        value = jsonpath.query(data, opt.scope);
+                    }
+                    else {
+                        const result = jsonpath.query(data, opt.scope);
+                        value = result.length > 0 ? result[0] : undefined;
+                    }
                 }
-                else {
-                    value = jsonpath.query(data, opt.scope)[0];
+                catch (err) {
+                    console.warn('Error querying jsonpath:', opt.scope, err);
+                    continue;
                 }
             }
-            if (opt.key == "$")
+            if (opt.key == "$" && value && typeof value === 'object') {
                 Object.assign(this._dataSet[opt.indexData], value);
-            else if (opt.key && ((value !== undefined && value !== null) || (opt.canBeValueUndefined === undefined || opt.canBeValueUndefined === true)))
-                jsonpath.value(this._dataSet[opt.indexData], opt.key, value);
+            }
+            else if (opt.key && ((value !== undefined && value !== null) || (opt.canBeValueUndefined === undefined || opt.canBeValueUndefined === true))) {
+                try {
+                    jsonpath.value(this._dataSet[opt.indexData], opt.key, value);
+                }
+                catch (err) {
+                    console.warn('Error setting jsonpath value:', opt.key, err);
+                }
+            }
         }
         return data;
     }
@@ -598,7 +628,7 @@ class SfCrudService {
         const err = [];
         //Solo si se cumple la condicion, se valida
         operation.validations?.required?.forEach(x => {
-            const cumpleCond = x.conditions ? this.isConditionsCompleted(x.conditions, conditions, data) : true;
+            const cumpleCond = x.conditions ? this.isConditionsCompleted(x.conditions, conditions, data) : (x.validation ? this.isValidationSuccess(x.validation, data) : true);
             if (cumpleCond && (!jsonpath.query(data, x.field)[0] ||
                 (Array.isArray(jsonpath.query(data, x.field)[0]) && jsonpath.query(data, x.field)[0].length == 0)))
                 err.push(x.message);
@@ -627,6 +657,43 @@ class SfCrudService {
         });
         return err;
     }
+    /**
+     * Removes fields marked with uiOnly: true and empty/null values from the data object
+     * @param data The data object to clean
+     * @param schema The schema that describes the data structure
+     * @returns A new object without uiOnly fields and empty values
+     */
+    removeUiOnlyFields(data, schema) {
+        if (!data || !schema || !schema.properties)
+            return data;
+        const result = { ...data };
+        Object.entries(schema.properties).forEach(([key, property]) => {
+            const propertySchema = property;
+            const value = result[key];
+            const shouldRemove = (propertySchema && propertySchema.uiOnly === true) ||
+                value === null || value === undefined ||
+                (typeof value === 'string' && value.trim() === '');
+            if (shouldRemove) {
+                delete result[key];
+            }
+            else if (propertySchema && propertySchema.type === 'object' && propertySchema.properties) {
+                const cleanedNestedObject = this.removeUiOnlyFields(result[key], propertySchema);
+                if (Object.keys(cleanedNestedObject).length > 0) {
+                    result[key] = cleanedNestedObject;
+                }
+                else {
+                    delete result[key];
+                }
+            }
+        });
+        return result;
+    }
+    isValidationSuccess(validation, data) {
+        const value = jsonpath.query(data, validation);
+        if (value.length == 0)
+            return false;
+        return !value[0];
+    }
     set esquemas(esquemas) {
         this._esquemas = esquemas;
     }
@@ -862,10 +929,6 @@ class SfCrudService {
             default:
                 break;
         }
-        console.log('setValueEvent sale:');
-        console.log(data);
-        console.log(esquema);
-        console.log(params);
     }
     armarNuevaDireccion(tipo, dataDireccion, separador) {
         let resultado;
@@ -889,10 +952,10 @@ class SfCrudService {
         }
         return resultado;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -958,10 +1021,10 @@ class StepService {
     get customChildrenEvents$() {
         return this._customChildrenEvents.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1003,6 +1066,10 @@ class TableroComponent {
         this.generalService.environment = this.environment;
         this.loadConfigCrud();
     }
+    ngOnChanges(changes) {
+        if (changes['dataExt'] && !changes['dataExt'].firstChange)
+            this.getInfoTablero();
+    }
     loadConfigCrud() {
         this.loading.inProgress = true;
         this.sfCrudService.formLoading = this.loading;
@@ -1155,10 +1222,10 @@ class TableroComponent {
         const target = event.target;
         dt.filterGlobal(target.value, 'contains');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableroComponent, deps: [{ token: GeneralService }, { token: i2.Router }, { token: SfCrudService }, { token: StepService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableroComponent, isStandalone: false, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, ngImport: i0, template: "<p-card>\r\n    <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\"\r\n                class=\"p-button-success mr-2\" (click)=\"redirect('create')\"></button>\r\n        </ng-template>\r\n    </p-toolbar>\r\n    <p-table *ngIf=\"crudConfig?.tablero?.columns\" #dt [columns]=\"crudConfig.tablero.columns\" [value]=\"data\" [rowHover]=\"true\" [rows]=\"10\" [paginator]=\"true\"\r\n        [totalRecords]=\"data.length\" [globalFilterFields]=\"crudConfig.tablero?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n        currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\">\r\n        <ng-template pTemplate=\"caption\">\r\n            <div class=\"flex align-items-center justify-content-between\">\r\n                <h5 class=\"m-0\">{{crudConfig.tablero?.label || idEntidad}}</h5>\r\n                <p-iconfield>\r\n                    <p-inputicon class=\"pi pi-search\" />\r\n                     <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </p-iconfield>\r\n                <!-- <span class=\"p-input-icon-left\">\r\n                    <i class=\"pi pi-search\"></i>\r\n                    <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </span> -->\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                <th>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            <tr>\r\n                <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                    <td *ngSwitchCase=\"'text'\">{{rowData[col.col]}}</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                </ng-container>\r\n                <td>\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 = initialData[index]; item.command()\"></button>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</p-card>\r\n", 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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i8$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i8$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i9.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i10.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i13.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: "component", type: i14.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: i15.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "pipe", type: i8$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8$1.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableroComponent, deps: [{ token: GeneralService }, { token: i2.Router }, { token: SfCrudService }, { token: StepService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TableroComponent, isStandalone: false, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, usesOnChanges: true, ngImport: i0, template: "<p-card>\r\n    <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\"\r\n                class=\"p-button-success mr-2\" (click)=\"redirect('create')\"></button>\r\n        </ng-template>\r\n    </p-toolbar>\r\n    <p-table *ngIf=\"crudConfig?.tablero?.columns\" #dt [columns]=\"crudConfig.tablero.columns\" [value]=\"data\" [rowHover]=\"true\" [rows]=\"10\" [paginator]=\"true\"\r\n        [totalRecords]=\"data.length\" [globalFilterFields]=\"crudConfig.tablero?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n        currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\">\r\n        <ng-template pTemplate=\"caption\">\r\n            <div class=\"flex align-items-center justify-content-between\">\r\n                <h5 class=\"m-0\">{{crudConfig.tablero?.label || idEntidad}}</h5>\r\n                <p-iconfield>\r\n                    <p-inputicon class=\"pi pi-search\" />\r\n                     <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </p-iconfield>\r\n                <!-- <span class=\"p-input-icon-left\">\r\n                    <i class=\"pi pi-search\"></i>\r\n                    <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </span> -->\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                <th>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            <tr>\r\n                <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                    <td *ngSwitchCase=\"'text'\">{{rowData[col.col]}}</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                </ng-container>\r\n                <td>\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 = initialData[index]; item.command()\"></button>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</p-card>\r\n", 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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i9$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i10.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i13.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: "component", type: i14.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: i15.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i9.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-crudtablero', standalone: false, template: "<p-card>\r\n    <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\"\r\n                class=\"p-button-success mr-2\" (click)=\"redirect('create')\"></button>\r\n        </ng-template>\r\n    </p-toolbar>\r\n    <p-table *ngIf=\"crudConfig?.tablero?.columns\" #dt [columns]=\"crudConfig.tablero.columns\" [value]=\"data\" [rowHover]=\"true\" [rows]=\"10\" [paginator]=\"true\"\r\n        [totalRecords]=\"data.length\" [globalFilterFields]=\"crudConfig.tablero?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n        currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\">\r\n        <ng-template pTemplate=\"caption\">\r\n            <div class=\"flex align-items-center justify-content-between\">\r\n                <h5 class=\"m-0\">{{crudConfig.tablero?.label || idEntidad}}</h5>\r\n                <p-iconfield>\r\n                    <p-inputicon class=\"pi pi-search\" />\r\n                     <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </p-iconfield>\r\n                <!-- <span class=\"p-input-icon-left\">\r\n                    <i class=\"pi pi-search\"></i>\r\n                    <input pInputText type=\"text\" (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\r\n                        placeholder=\"Buscar...\" />\r\n                </span> -->\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                <th>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            <tr>\r\n                <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                    <td *ngSwitchCase=\"'text'\">{{rowData[col.col]}}</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                </ng-container>\r\n                <td>\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 = initialData[index]; item.command()\"></button>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</p-card>\r\n", 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 }], propDecorators: { opciones: [{
@@ -1245,10 +1312,10 @@ class NotificationService {
         }
         return obj;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationService, deps: [{ token: SfCrudService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NotificationService, deps: [{ token: SfCrudService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1325,10 +1392,10 @@ class StepComponent {
             miDiv.scrollLeft = value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.14", type: StepComponent, isStandalone: false, 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}:is() ul[role=tablist]{padding-bottom:10px}:is() .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){:is() .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: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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.15", type: StepComponent, isStandalone: false, 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}:is() ul[role=tablist]{padding-bottom:10px}:is() .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){:is() .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: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-step', standalone: false, 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}:is() ul[role=tablist]{padding-bottom:10px}:is() .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){:is() .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"] }]
         }], ctorParameters: () => [{ type: i2.Router }, { type: StepService }, { type: i2.ActivatedRoute }], propDecorators: { items: [{
@@ -1366,6 +1433,12 @@ class Shema {
     falseValue;
     allowCustomOption = false;
     separador;
+    labelPosition;
+    reverse;
+    scope;
+    optional;
+    uiOnly;
+    defaultValue;
 }
 class ShemaConfig {
     calendar;
@@ -1480,10 +1553,10 @@ class FileUploadComponent {
             button.classList.remove('animate-pulse');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileUploadComponent, isStandalone: false, 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: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i8$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FileUploadComponent, isStandalone: false, 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: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-file-upload', standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: i1$1.MessageService }], propDecorators: { limit: [{
@@ -1519,10 +1592,10 @@ class FormatAddressPipe {
         }
         return address;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatAddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FormatAddressPipe, isStandalone: false, name: "formatAddress" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormatAddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: FormatAddressPipe, isStandalone: false, name: "formatAddress" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormatAddressPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormatAddressPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formatAddress',
@@ -1552,7 +1625,9 @@ class ControlComponent {
     tempValue;
     clicked = false;
     maskDate = "99/99/9999";
+    tempCheckVal = false;
     uploadingFiles = false;
+    subscription = undefined;
     constructor(generalService, crudService, cdr, notificationService) {
         this.generalService = generalService;
         this.crudService = crudService;
@@ -1563,6 +1638,18 @@ class ControlComponent {
     }
     ngOnInit() {
         this.loadDefaultValues();
+        this.control.disabled = this.control.disabled || false;
+        this.subscription = this.crudService.disabledFields$.subscribe(({ fields, disabled }) => {
+            const scope = this.control.scope?.replace("$..properties.", "");
+            if (this.control.scope && scope && fields.includes(scope)) {
+                this.control.disabled = disabled;
+                if (disabled) {
+                    this.value = "";
+                    this.sendValue();
+                }
+            }
+            this.cdr.detectChanges();
+        });
         if (this.control?.config?.depends) {
             this.crudService.changeData$.subscribe(res => {
                 if (res) {
@@ -1591,6 +1678,17 @@ class ControlComponent {
             });
         }
     }
+    ngOnDestroy() {
+        console.log("Destroy control");
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            // Limpiar el estado del campo cuando se destruye el componente
+            if (this.control.scope) {
+                const scope = this.control.scope.replace("$..properties.", "");
+                this.crudService.notifyFieldsToDisable([scope], false);
+            }
+        }
+    }
     getNewValue(override, completed) {
         const newValue = completed ? override.newPropertyValue : override.elseNewPropertyValue;
         if (newValue && typeof (newValue) == "string") {
@@ -1615,6 +1713,25 @@ class ControlComponent {
             this.lenghtWord = this.value ? this.value.length : 0;
         if (this.control?.subtype == 'switch')
             this.instanceBoolField();
+        if (this.control?.config && this.control.subtype == 'checkbox')
+            this.setCheckboxValues();
+    }
+    setCheckboxValues() {
+        this.tempCheckVal = this.value || false;
+        this.onCheckboxChange();
+    }
+    onCheckboxChange() {
+        this.value = this.tempCheckVal;
+        if (this.control.config?.disables) {
+            this.crudService.notifyFieldsToDisable(this.control.config.disables, this.tempCheckVal);
+        }
+        if (this.tempCheckVal && this.control.config?.operationTrue) {
+            this.crudService.notifyChangeOperation(this.control.config.operationTrue);
+        }
+        if (!this.tempCheckVal && this.control.config?.operationFalse) {
+            this.crudService.notifyChangeOperation(this.control.config.operationFalse);
+        }
+        this.sendValue();
     }
     instanceBoolField() {
         this.tempValue = this.value;
@@ -1873,12 +1990,12 @@ class ControlComponent {
     onClickedAddres() {
         this.addressClicked.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.14", type: ControlComponent, isStandalone: false, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container\">\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\" [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\"\r\n                    (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n                    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\"></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\r\n                        [(ngModel)]=\"value\" inputId=\"icondisplay\" [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                        [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                        (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n                    ></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\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n                    [prefix]=\"control.currency || '$ '\" [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()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n                    [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()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n                    [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <div class=\"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                </div>\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>\r\n    </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() 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 ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::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 ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::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 ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "component", type: i4.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: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i6.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: "directive", type: i7$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: i7$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i8$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i9$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: "component", type: i10$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "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: "component", type: i11$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: i13$1.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i14$1.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: "directive", type: i15$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: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "pipe", type: FormatAddressPipe, name: "formatAddress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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.15", type: ControlComponent, isStandalone: false, selector: "sf-control", inputs: { showTempValue: "showTempValue", control: "control", label: "label", value: "value", appendTo: "appendTo" }, outputs: { setValue: "setValue", sendObject: "sendObject", addressClicked: "addressClicked" }, viewQueries: [{ propertyName: "tooltips", predicate: Tooltip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></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    <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\" [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\"\r\n                    (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n                    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\"></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\r\n                        [(ngModel)]=\"value\" inputId=\"icondisplay\" [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                        [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                        (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n                    ></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\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n                    [prefix]=\"control.currency || '$ '\" [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()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n                    [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()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n                    [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <div class=\"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                </div>\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\" (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() 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 ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::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 ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::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 ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"], dependencies: [{ kind: "component", type: i4.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: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i6.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: "component", type: i7$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: "directive", type: i8$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: i8$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i10$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: "component", type: i11$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "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: "component", type: i12$1.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: i14$1.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i15$1.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: "directive", type: i16.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: FileUploadComponent, selector: "sf-file-upload", inputs: ["limit", "files", "loading", "configName", "accept"], outputs: ["onUpload", "onDeleteFile"] }, { kind: "pipe", type: FormatAddressPipe, name: "formatAddress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sf-control', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></ng-container>\r\n\r\n<div *ngIf=\"!showTempValue\" [ngSwitch]=\"control.type\" #cc class=\"control-container\">\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\" [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\"\r\n                    (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n                    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\"></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\r\n                        [(ngModel)]=\"value\" inputId=\"icondisplay\" [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                        [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                        (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n                    ></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\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n                    [prefix]=\"control.currency || '$ '\" [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()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n                    [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()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n                    [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <div class=\"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                </div>\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>\r\n    </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() 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 ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::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 ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::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 ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"] }]
+            args: [{ selector: 'sf-control', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"showTempValue\"><p *ngIf=\"tempValue\">{{tempValue[control.field]}}</p></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    <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\" [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\"\r\n                    (onChange)=\"sendValueFromObject($event)\" [optionLabel]=\"control.config.optionLabel\"\r\n                    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\"></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\r\n                        [(ngModel)]=\"value\" inputId=\"icondisplay\" [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                        [showIcon]=\"control.showIcon || false\" (onSelect)=\"onChangeDate()\"\r\n                        (onBlur)=\"onChangeDate()\" [iconDisplay]=\"'input'\" class=\"p-0\"\r\n                    ></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\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [min]=\"control.min || null\" [max]=\"control.max || null\" (onInput)=\"sendNumberValue($event)\"\r\n                    [prefix]=\"control.currency || '$ '\" [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()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 0\"\r\n                    [locale]=\"control.locale || undefined\" [useGrouping]=\"control.useGrouping || false\"\r\n                    [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()\" (onInput)=\"sendValue()\" [min]=\"control.min || null\"\r\n                    [max]=\"control.max || null\" [minFractionDigits]=\"control.minFractionDigits || 2\"\r\n                    [locale]=\"control.locale || undefined\" [disabled]=\"control.disabled || false\"></p-inputNumber>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'decimal:search'\">\r\n                <div class=\"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                </div>\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\" (onChange)=\"onCheckboxChange()\" />\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n", styles: [":is() label{margin-right:10px;color:#55585b;font-size:17px}:is() 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 ::ng-deep .p-button:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important;filter:brightness(85%)}.control-container ::ng-deep .p-component,.control-container ::ng-deep .p-component *{border-radius:6px}.control-container ::ng-deep .p-inputtext{font-size:17px;border:1px solid #d1d5db;border-radius:6px}.control-container ::ng-deep .p-inputtext:focus,.control-container ::ng-deep .p-inputtext:active,.control-container ::ng-deep .p-inputwrapper:focus,.control-container ::ng-deep .p-inputwrapper:active{border-color:var(--button-color)}.control-container ::ng-deep .p-inputtext:enabled:focus{border-color:var(--secondary-color)!important;box-shadow:inset 0 0 0 1px #fff}.control-container ::ng-deep input.p-inputtext::placeholder{color:#6b7280;font-family:sans-serif;font-size:18px}.control-container ::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 ::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:var(--secondary-color)!important}.control-container ::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 ::ng-deep .p-dropdown .p-inputtext{border:none}.control-container ::ng-deep .p-dropdown .p-dropdown-label.p-placeholder{font-family:sans-serif;color:#6b7280}.control-container ::ng-deep .p-button.p-button-danger,.control-container ::ng-deep .p-buttonset.p-button-danger>.p-button,.control-container ::ng-deep .p-splitbutton.p-button-danger>.p-button{border-color:var(--secondary-color)!important;background:var(--secondary-color)!important}.control-container ::ng-deep .p-inputgroup button:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.control-container ::ng-deep .p-inputgroup input:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.control-container ::ng-deep .p-inputgroup input:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.control-container ::ng-deep .p-datepicker{padding:0}.control-container ::ng-deep .p-datepicker-touch-ui .p-datepicker-title{padding:0}.control-container ::ng-deep .p-datepicker-month,.control-container ::ng-deep .p-datepicker-month:focus,.control-container ::ng-deep .p-datepicker-year:focus,.control-container ::ng-deep .p-datepicker-year{border:none}::ng-deep .d-none{display:none!important}.p-inputgroup p-calendar{display:contents}.p-inputgroup p-calendar ::ng-deep input{display:none!important}.p-inputgroup p-calendar ::ng-deep .p-button-icon-only{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%}.p-inputgroup p-inputMask{display:contents}.p-inputgroup p-inputMask ::ng-deep input{border-top-right-radius:0;border-bottom-right-radius:0}@media (max-width <=768px){:host{font-size:14px}}\n"] }]
         }], ctorParameters: () => [{ type: GeneralService }, { type: SfCrudService }, { type: i0.ChangeDetectorRef }, { type: NotificationService }], propDecorators: { showTempValue: [{
                 type: Input
             }], control: [{
@@ -1925,6 +2042,7 @@ class FormComponent {
     urlADO;
     proceso;
     loading;
+    subscription = undefined;
     tooltips;
     constructor(messageService, crudService, domSanitizer, stepService, adoService, jwtService) {
         this.messageService = messageService;
@@ -1966,6 +2084,10 @@ class FormComponent {
             console.error(error);
         }
     }
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
     emitLoadingForm($event) {
         this.loading.inProgress = $event;
         Promise.resolve().then(() => this.crudService.formLoading = this.loading); //si no se usa asi el enproceso totea con el simulador
@@ -2001,6 +2123,8 @@ class FormComponent {
                     try {
                         this.controls[i].push(this.crudService.getControl(element.scope, this.esquema));
                         this.controls[i][j].scope = element.scope;
+                        this.controls[i][j].labelPosition = element.labelPosition;
+                        this.controls[i][j].reverse = element.reverse;
                         this.values[i].push(this.crudService.getValue(element.scope, this.data));
                     }
                     catch (e) {
@@ -2158,10 +2282,10 @@ class FormComponent {
         let url = `${this.crudService.environment.WebUtilities}GWV/ADO/${this.crudService.idKatios}?id=${idProceso}`;
         navigator.clipboard.writeText(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, deps: [{ token: i1$1.MessageService }, { token: SfCrudService }, { token: i3.DomSanitizer }, { token: StepService }, { token: i5$1.AdoService }, { token: i5$1.JWTService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormComponent, isStandalone: false, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador" }, 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    <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                    <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)\"></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                    <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)\"></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\"\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>\r\n    </div>\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}.pdf iframe{width:80%;margin-inline:10%}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content}.data-ado-container>*{margin-inline:4px}.data-ado-container>div{display:flex;align-items:center}.data-ado-container>div>*{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%}sf-sign pdf-viewer{min-height:130vh!important;max-height:130vh!important}.buttons{display:flex;justify-content:space-evenly}.buttons ::ng-deep .p-button.p-component{border-radius:35px}::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 .p-button{background-color:var(--button-color);border-color:var(--button-color)}.frm-container ::ng-deep .p-button:hover{background-color:var(--button-color);filter:brightness(85%)}.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}.frm-container ::ng-deep .p-button.p-button-success,.p-buttonset.p-button-success>.p-button,.p-splitbutton.p-button-success>.p-button{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%}sf-sign 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}.data-ado-container .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-button.p-button-success:enabled:focus,.p-buttonset.p-button-success>.p-button:enabled:focus,.p-splitbutton.p-button-success>.p-button:enabled:focus{box-shadow:inset 0 0 #fff}.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-button:enabled:active{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}.frm-container ::ng-deep .p-button:focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-button:enabled:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::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:1px solid var(--secondary-color)!important}\n"], dependencies: [{ kind: "component", type: i6$1.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "component", type: i7$2.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i8.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: i8$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i8$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i14.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: i12$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i15$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: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo"], outputs: ["setValue", "sendObject", "addressClicked"] }, { kind: "pipe", type: i8$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8$1.DatePipe, name: "date" }, { kind: "pipe", type: FormatAddressPipe, name: "formatAddress" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, deps: [{ token: i1$1.MessageService }, { token: SfCrudService }, { token: i3.DomSanitizer }, { token: StepService }, { token: i5$1.AdoService }, { token: i5$1.JWTService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormComponent, isStandalone: false, selector: "app-form", inputs: { uiEsquema: "uiEsquema", esquema: "esquema", data: "data", isDialog: "isDialog", isAddressDialog: "isAddressDialog", separador: "separador" }, 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    <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                    <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)\"></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                    <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)\"></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\"\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>\r\n    </div>\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}.pdf iframe{width:80%;margin-inline:10%}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content}.data-ado-container>*{margin-inline:4px}.data-ado-container>div{display:flex;align-items:center}.data-ado-container>div>*{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%}sf-sign pdf-viewer{min-height:130vh!important;max-height:130vh!important}.buttons{display:flex;justify-content:space-evenly}.buttons ::ng-deep .p-button.p-component{border-radius:35px}::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 .p-button{background-color:var(--button-color);border-color:var(--button-color)}.frm-container ::ng-deep .p-button:hover{background-color:var(--button-color);filter:brightness(85%)}.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}.frm-container ::ng-deep .p-button.p-button-success,.p-buttonset.p-button-success>.p-button,.p-splitbutton.p-button-success>.p-button{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%}sf-sign 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}.data-ado-container .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-button.p-button-success:enabled:focus,.p-buttonset.p-button-success>.p-button:enabled:focus,.p-splitbutton.p-button-success>.p-button:enabled:focus{box-shadow:inset 0 0 #fff}.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-button:enabled:active{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}.frm-container ::ng-deep .p-button:focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-button:enabled:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::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:1px solid var(--secondary-color)!important}\n"], dependencies: [{ kind: "component", type: i6$1.SignComponent, selector: "sf-sign", inputs: ["idkatios", "tdoc", "ndoc", "idDocument", "typeDocument", "allowDownload"], outputs: ["stateDocument", "loading"] }, { kind: "component", type: i7$2.SfSimuladorComponent, selector: "sf-simulador", inputs: ["simulador", "otherToolTips", "labels"], outputs: ["simuladorChange", "enProceso"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i8.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: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i14.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: i12$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i16.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: ControlComponent, selector: "sf-control", inputs: ["showTempValue", "control", "label", "value", "appendTo"], outputs: ["setValue", "sendObject", "addressClicked"] }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i9.DatePipe, name: "date" }, { kind: "pipe", type: FormatAddressPipe, name: "formatAddress" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-form', standalone: false, 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    <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                    <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)\"></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                    <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)\"></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\"\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>\r\n    </div>\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}.pdf iframe{width:80%;margin-inline:10%}.data-ado-container{display:flex;margin-inline:auto;align-items:center;width:fit-content}.data-ado-container>*{margin-inline:4px}.data-ado-container>div{display:flex;align-items:center}.data-ado-container>div>*{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%}sf-sign pdf-viewer{min-height:130vh!important;max-height:130vh!important}.buttons{display:flex;justify-content:space-evenly}.buttons ::ng-deep .p-button.p-component{border-radius:35px}::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 .p-button{background-color:var(--button-color);border-color:var(--button-color)}.frm-container ::ng-deep .p-button:hover{background-color:var(--button-color);filter:brightness(85%)}.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}.frm-container ::ng-deep .p-button.p-button-success,.p-buttonset.p-button-success>.p-button,.p-splitbutton.p-button-success>.p-button{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%}sf-sign 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}.data-ado-container .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-button.p-button-success:enabled:focus,.p-buttonset.p-button-success>.p-button:enabled:focus,.p-splitbutton.p-button-success>.p-button:enabled:focus{box-shadow:inset 0 0 #fff}.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-button:enabled:active{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::ng-deep .p-slider:not(.p-disabled):hover .p-slider-handle{border-color:var(--primary-color)!important}.frm-container ::ng-deep .p-button:focus{box-shadow:inset 0 0 0 1px var(--secondary-color)!important}.frm-container ::ng-deep .p-button:enabled:hover{background:var(--secondary-color)!important;border-color:var(--secondary-color)!important}.frm-container ::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:1px solid var(--secondary-color)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MessageService }, { type: SfCrudService }, { type: i3.DomSanitizer }, { type: StepService }, { type: i5$1.AdoService }, { type: i5$1.JWTService }], propDecorators: { uiEsquema: [{
@@ -2204,6 +2328,7 @@ class RegistroComponent {
     buttonsFooterTemplate;
     sendData = new EventEmitter();
     onSubmit = new EventEmitter();
+    onLoaded = new EventEmitter();
     btnSubmit;
     notificationSubscription;
     subsToKillOnDestroy = [];
@@ -2245,6 +2370,8 @@ class RegistroComponent {
             this.sfSimuladorService.idKatios = this.idKatios;
             this.loadConfigCrud();
         }
+        if (this.onLoaded)
+            this.onLoaded.emit();
     }
     ngOnInit() {
         this.cargarMascarasDirecciones();
@@ -2280,6 +2407,12 @@ class RegistroComponent {
                 this.messageService.add(notification.msg);
             }
         });
+        this.subsToKillOnDestroy.push(this.sfCrudService.operation$.subscribe((op) => {
+            if (op) {
+                this.stepService.currentIndex = op.index;
+                this.sfCrudService.setTrx(op.trx, op.index);
+            }
+        }));
     }
     ngOnDestroy() {
         if (this.notificationSubscription) {
@@ -2288,7 +2421,6 @@ class RegistroComponent {
         this.subsToKillOnDestroy.forEach(sub => sub.unsubscribe());
         this.stepService.reset();
         this.sfCrudService.reset();
-        console.log("destroy");
     }
     instanceSubsStepService() {
         this.subsToKillOnDestroy.push(this.stepService.customChildrenEvents$.subscribe((event) => {
@@ -2310,7 +2442,6 @@ class RegistroComponent {
             }
         }));
         this.subsToKillOnDestroy.push(this.stepService.requestApproval$.subscribe((value) => {
-            console.log(value);
             if (value?.desired != undefined) {
                 if (value.desired < value.current) {
                     this.stepService.requestApproved = true;
@@ -2339,14 +2470,12 @@ class RegistroComponent {
                 }
             }
         }));
-        console.log("subs step service terminadas");
     }
     uploadInfoStep(position) {
         this.loading.inProgress = true;
         this.sfCrudService.formLoading = this.loading;
         this.submit(position.current).then(() => {
             let tieneRedirect = this.sfCrudService.currentOperation?.answerChecking !== undefined && this.sfCrudService.currentOperation?.answerChecking?.redirect !== undefined;
-            console.log(this.items.length);
             if (this.items.length == 1) {
                 this.stepService.requestApproved = false;
                 //this.stepService.desiredIndex = undefined
@@ -2378,7 +2507,6 @@ class RegistroComponent {
         }
         this.generalService.getCrudByEntidad(this.idKatios, this.idForm)
             .then((res) => {
-            console.log("crud cargado");
             this.sfCrudService.uiEsquemas = res.uiEsquemas;
             this.sfCrudService.esquemas = res.esquemas;
             this.sfCrudService.registros = res.registros;
@@ -2416,7 +2544,6 @@ class RegistroComponent {
      * Step will advance until esquema is not completed
      */
     advance(start, limit, executeRequest) {
-        console.log("advance desde ", start, " hasta ", limit);
         let i = start;
         let op;
         let willExecuteRequest = false;
@@ -2431,7 +2558,6 @@ class RegistroComponent {
         this.sfCrudService.index = i;
         this.stepService.currentIndex = i;
         this.stepService.desiredIndex = i;
-        console.log("advance", i);
         this.stepService.requestApproved = true;
         registro = this.sfCrudService.getRegistro(i);
         let dataCurrentStep = this.sfCrudService.getData(i);
@@ -2439,7 +2565,6 @@ class RegistroComponent {
         if (executeRequest && (this.activeRoute.snapshot.queryParams["_idGWVADO"] || this.activeRoute.snapshot.queryParams["_idADO"]) //Viene de ADO
             && dataCurrentStep.ADO && this.validateData(op, dataCurrentStep, registro.conditions ?? [], false) //El step esta completo
         ) {
-            console.log("advance with approval", i);
             this.stepService.requestApproval = i;
             willExecuteRequest = true;
         }
@@ -2501,8 +2626,8 @@ class RegistroComponent {
         this.sfCrudService.esquemas.forEach((esquema, i) => {
             const op = this.sfCrudService.registros[i].operations.find(x => x.type.startsWith(this.sfCrudService.getTrx(i)));
             this.sfCrudService.setDataSet(this.sfCrudService.createObject(esquema, op), i);
+            //this.sfCrudService.setOptionalDataSet(this.sfCrudService.createOptionalObject(esquema, op), i);
         });
-        console.log("loadData");
         return Promise.all(this.sfCrudService.registros.map((registro, i) => this.ids.length > 0 ? this.getInfoRegistro(registro, i, this.ids[i]) : Promise.resolve()));
     }
     getInfoRegistro(configRegistro, index, id) {
@@ -2521,7 +2646,6 @@ class RegistroComponent {
             this.sfCrudService.applyObjectKeys(value, op.keysEsquema || [], configRegistro);
             if (op.changeTrx)
                 op.changeTrx.forEach(x => this.sfCrudService.setTrx(x.trx, x.index));
-            console.log("getInfoRegistro", op.changeTrx);
         })
             .catch((error) => {
             console.log(error);
@@ -2572,10 +2696,10 @@ class RegistroComponent {
             index = this.indexCrud;
         this.sfCrudService.applyValuesOnEvent('onSubmit', this.sfCrudService.getEsquema(index), undefined, this.sfCrudService.getData(index));
         let registro = this.sfCrudService.getRegistro(index);
-        console.log("trx actual: ", this.sfCrudService.getTrx(this.indexCrud));
         const operation = registro.operations.find(op => op.type.startsWith(this.sfCrudService.getTrx(this.indexCrud)));
         let url = this.sfCrudService.getURL(operation, index);
-        return this.generalService.genericRequest(operation.method, url, this.sfCrudService.getData(index))
+        const dataToSend = this.sfCrudService.removeUiOnlyFields(this.sfCrudService.getData(index), this.sfCrudService.getEsquema(index));
+        return this.generalService.genericRequest(operation.method, url, dataToSend)
             .then((res) => {
             if (res === null)
                 res = {};
@@ -2765,7 +2889,6 @@ class RegistroComponent {
                 separador: separador,
                 operation: "address"
             };
-            console.log(currentElement);
             this.displays.push(true);
             this.dialogElements.push(currentElement);
         });
@@ -2816,7 +2939,6 @@ class RegistroComponent {
             currentElement.data.id = this.sfCrudService.getValue(element.scope, this.sfCrudService.getData(this.indexCrud)).length + 1;
         }
         catch (error) {
-            console.log("error agregando un id");
             console.error(error);
         }
         this.displays.push(true);
@@ -2826,9 +2948,7 @@ class RegistroComponent {
         let separador = jsonpath.query(this.sfCrudService.esquemas[this.indexCrud], this.dialogElements[index].scope)[0]?.separador;
         //leer los campos de las mascaras, setear el string
         let newValue = this.sfCrudService.armarNuevaDireccion("string", this.dialogElements[index].data, separador);
-        console.log(newValue);
         let scope = this.dialogElements[index].scope.replaceAll('.properties', '');
-        console.log(scope);
         if (index == 0) {
             jsonpath.value(this.sfCrudService.getData(this.indexCrud), scope, newValue);
         }
@@ -2885,12 +3005,12 @@ class RegistroComponent {
         }
         return Promise.resolve(this.sfCrudService.mascaras);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RegistroComponent, deps: [{ token: GeneralService }, { token: i2.ActivatedRoute }, { token: i1$1.MessageService }, { token: SfCrudService }, { token: StepService }, { token: i6$1.SfPdfsignService }, { token: i7$2.SfSimuladorService }, { token: NotificationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RegistroComponent, isStandalone: false, selector: "sf-registro", inputs: { idKatios: "idKatios", trx: "trx", id: "id", user: "user", dataExt: "dataExt", ids: "ids", environment: "environment", buttonsFooterTemplate: "buttonsFooterTemplate", idEntidad: "idEntidad" }, outputs: { sendData: "sendData", onSubmit: "onSubmit" }, host: { properties: { "style.--primary-color": "this.color", "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButton" } }, providers: [MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n    <!--TODO convertir en template y editarla en -->\r\n    <h5 *ngIf=\"sfCrudService.registros.length == 1\" class=\"card-header mb-2\" style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n        <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] : ''}}</span>\r\n        <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\" (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\"></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\" (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\" [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\" (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus\r\n                [autofocus]=\"true\"></p-button>\r\n        </ng-template>\r\n    </p-dialog>\r\n</span>\r\n\r\n<p-toast *ngIf=\"dialogElements.length == 0\">\r\n    <ng-template let-message pTemplate=\"message\">\r\n        <div class=\"custom-toast\">\r\n            <i class=\"pi\" [ngClass]=\"{\r\n                'pi-check-circle': message.severity === 'success',\r\n                'pi-info-circle': message.severity === 'info',\r\n                'pi-exclamation-triangle': message.severity === 'warn',\r\n                'pi-times-circle': message.severity === 'error'\r\n            }\"></i>\r\n            <div class=\"custom-toast-content\">\r\n                <span class=\"custom-toast-detail\">{{message.detail}}</span>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-toast>\r\n\r\n\r\n", styles: ["@media screen and (max-width: 600px){::ng-deep .p-toast{width:90vw!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}::ng-deep .p-dialog-mask .p-dialog{width:95vw}}@media screen and (min-width: 601px){::ng-deep .p-toast{width:25rem!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-toast{padding:8px;display:-webkit-box;z-index:inherit;justify-content:center;width:100%}.custom-toast-detail{display:flex;font-family:sans-serif;font-size:1.05rem;font-weight:400;margin:.5rem 0 0 .5rem;width:80%}.custom-toast i{margin-right:.5rem;font-size:2rem;width:100%;height:100%}::ng-deep .p-toast-message{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}::ng-deep .p-toast .p-toast-message.p-toast-message-info{background:#b3e5fc;border:solid #0891cf;color:#0891cf;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message{border-radius:6px}::ng-deep .p-toast .p-toast-message.p-toast-message-warn{background:#fff2e2b3;border:solid #cc8925;color:#cc8925;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-error{background:#ffcdd2;border:solid #e60017;color:#e60017;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-success{background:#c8e6c9;border:solid #439446;color:#439446;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message .p-toast-icon-close{margin-top:1rem;margin-right:1.5rem}::ng-deep .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close{color:#cc8925}::ng-deep .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close{color:#0891cf}::ng-deep .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close{color:#e60017}::ng-deep .p-toast .p-toast-message.p-toast-message-succes .p-toast-icon-close{color:#439446}\n"], dependencies: [{ kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i8.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: 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: "directive", type: i8$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: StepComponent, selector: "app-step", inputs: ["items"] }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["uiEsquema", "esquema", "data", "isDialog", "isAddressDialog", "separador"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RegistroComponent, deps: [{ token: GeneralService }, { token: i2.ActivatedRoute }, { token: i1$1.MessageService }, { token: SfCrudService }, { token: StepService }, { token: i6$1.SfPdfsignService }, { token: i7$2.SfSimuladorService }, { token: NotificationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RegistroComponent, isStandalone: false, selector: "sf-registro", inputs: { idKatios: "idKatios", trx: "trx", id: "id", user: "user", dataExt: "dataExt", ids: "ids", environment: "environment", buttonsFooterTemplate: "buttonsFooterTemplate", 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" } }, providers: [MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n    <!--TODO convertir en template y editarla en -->\r\n    <h5 *ngIf=\"sfCrudService.registros.length >= 1\" class=\"card-header mb-2\" style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n        <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] : ''}}</span>\r\n        <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\" (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\"></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\" (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\" [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\" (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus\r\n                [autofocus]=\"true\"></p-button>\r\n        </ng-template>\r\n    </p-dialog>\r\n</span>\r\n\r\n<p-toast *ngIf=\"dialogElements.length == 0\">\r\n    <ng-template let-message pTemplate=\"message\">\r\n        <div class=\"custom-toast\">\r\n            <i class=\"pi\" [ngClass]=\"{\r\n                'pi-check-circle': message.severity === 'success',\r\n                'pi-info-circle': message.severity === 'info',\r\n                'pi-exclamation-triangle': message.severity === 'warn',\r\n                'pi-times-circle': message.severity === 'error'\r\n            }\"></i>\r\n            <div class=\"custom-toast-content\">\r\n                <span class=\"custom-toast-detail\">{{message.detail}}</span>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-toast>\r\n\r\n\r\n", styles: ["@media screen and (max-width: 600px){::ng-deep .p-toast{width:90vw!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}::ng-deep .p-dialog-mask .p-dialog{width:95vw}}@media screen and (min-width: 601px){::ng-deep .p-toast{width:25rem!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-toast{padding:8px;display:-webkit-box;z-index:inherit;justify-content:center;width:100%}.custom-toast-detail{display:flex;font-family:sans-serif;font-size:1.05rem;font-weight:400;margin:.5rem 0 0 .5rem;width:80%}.custom-toast i{margin-right:.5rem;font-size:2rem;width:100%;height:100%}::ng-deep .p-toast-message{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}::ng-deep .p-toast .p-toast-message.p-toast-message-info{background:#b3e5fc;border:solid #0891cf;color:#0891cf;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message{border-radius:6px}::ng-deep .p-toast .p-toast-message.p-toast-message-warn{background:#fff2e2b3;border:solid #cc8925;color:#cc8925;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-error{background:#ffcdd2;border:solid #e60017;color:#e60017;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-success{background:#c8e6c9;border:solid #439446;color:#439446;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message .p-toast-icon-close{margin-top:1rem;margin-right:1.5rem}::ng-deep .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close{color:#cc8925}::ng-deep .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close{color:#0891cf}::ng-deep .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close{color:#e60017}::ng-deep .p-toast .p-toast-message.p-toast-message-succes .p-toast-icon-close{color:#439446}\n"], dependencies: [{ kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i8.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: 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: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: StepComponent, selector: "app-step", inputs: ["items"] }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["uiEsquema", "esquema", "data", "isDialog", "isAddressDialog", "separador"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RegistroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RegistroComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sf-registro', providers: [MessageService], standalone: false, template: "<div class=\"card\">\r\n    <!--TODO convertir en template y editarla en -->\r\n    <h5 *ngIf=\"sfCrudService.registros.length == 1\" class=\"card-header mb-2\" style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n        <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] : ''}}</span>\r\n        <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\" (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\"></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\" (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\" [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\" (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus\r\n                [autofocus]=\"true\"></p-button>\r\n        </ng-template>\r\n    </p-dialog>\r\n</span>\r\n\r\n<p-toast *ngIf=\"dialogElements.length == 0\">\r\n    <ng-template let-message pTemplate=\"message\">\r\n        <div class=\"custom-toast\">\r\n            <i class=\"pi\" [ngClass]=\"{\r\n                'pi-check-circle': message.severity === 'success',\r\n                'pi-info-circle': message.severity === 'info',\r\n                'pi-exclamation-triangle': message.severity === 'warn',\r\n                'pi-times-circle': message.severity === 'error'\r\n            }\"></i>\r\n            <div class=\"custom-toast-content\">\r\n                <span class=\"custom-toast-detail\">{{message.detail}}</span>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-toast>\r\n\r\n\r\n", styles: ["@media screen and (max-width: 600px){::ng-deep .p-toast{width:90vw!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}::ng-deep .p-dialog-mask .p-dialog{width:95vw}}@media screen and (min-width: 601px){::ng-deep .p-toast{width:25rem!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-toast{padding:8px;display:-webkit-box;z-index:inherit;justify-content:center;width:100%}.custom-toast-detail{display:flex;font-family:sans-serif;font-size:1.05rem;font-weight:400;margin:.5rem 0 0 .5rem;width:80%}.custom-toast i{margin-right:.5rem;font-size:2rem;width:100%;height:100%}::ng-deep .p-toast-message{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}::ng-deep .p-toast .p-toast-message.p-toast-message-info{background:#b3e5fc;border:solid #0891cf;color:#0891cf;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message{border-radius:6px}::ng-deep .p-toast .p-toast-message.p-toast-message-warn{background:#fff2e2b3;border:solid #cc8925;color:#cc8925;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-error{background:#ffcdd2;border:solid #e60017;color:#e60017;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-success{background:#c8e6c9;border:solid #439446;color:#439446;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message .p-toast-icon-close{margin-top:1rem;margin-right:1.5rem}::ng-deep .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close{color:#cc8925}::ng-deep .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close{color:#0891cf}::ng-deep .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close{color:#e60017}::ng-deep .p-toast .p-toast-message.p-toast-message-succes .p-toast-icon-close{color:#439446}\n"] }]
+            args: [{ selector: 'sf-registro', providers: [MessageService], standalone: false, template: "<div class=\"card\">\r\n    <!--TODO convertir en template y editarla en -->\r\n    <h5 *ngIf=\"sfCrudService.registros.length >= 1\" class=\"card-header mb-2\" style=\"display: flex; justify-content: space-between;align-items: center;\">\r\n        <span>{{sfCrudService.registros[0]?.label || idForm.replaceAll('_', ' ')}} {{ids.length > 0 ? '-' + ids[0] : ''}}</span>\r\n        <button *ngIf=\"sfCrudService.registros[0]?.canBack\" pButton pRipple type=\"button\" icon=\"pi pi-arrow-left\" (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\"></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\" (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\" [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\" (onClick)=\"onCloseDialog($index)\" label=\"Ok\" pAutoFocus\r\n                [autofocus]=\"true\"></p-button>\r\n        </ng-template>\r\n    </p-dialog>\r\n</span>\r\n\r\n<p-toast *ngIf=\"dialogElements.length == 0\">\r\n    <ng-template let-message pTemplate=\"message\">\r\n        <div class=\"custom-toast\">\r\n            <i class=\"pi\" [ngClass]=\"{\r\n                'pi-check-circle': message.severity === 'success',\r\n                'pi-info-circle': message.severity === 'info',\r\n                'pi-exclamation-triangle': message.severity === 'warn',\r\n                'pi-times-circle': message.severity === 'error'\r\n            }\"></i>\r\n            <div class=\"custom-toast-content\">\r\n                <span class=\"custom-toast-detail\">{{message.detail}}</span>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-toast>\r\n\r\n\r\n", styles: ["@media screen and (max-width: 600px){::ng-deep .p-toast{width:90vw!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}::ng-deep .p-dialog-mask .p-dialog{width:95vw}}@media screen and (min-width: 601px){::ng-deep .p-toast{width:25rem!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-toast{padding:8px;display:-webkit-box;z-index:inherit;justify-content:center;width:100%}.custom-toast-detail{display:flex;font-family:sans-serif;font-size:1.05rem;font-weight:400;margin:.5rem 0 0 .5rem;width:80%}.custom-toast i{margin-right:.5rem;font-size:2rem;width:100%;height:100%}::ng-deep .p-toast-message{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}::ng-deep .p-toast .p-toast-message.p-toast-message-info{background:#b3e5fc;border:solid #0891cf;color:#0891cf;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message{border-radius:6px}::ng-deep .p-toast .p-toast-message.p-toast-message-warn{background:#fff2e2b3;border:solid #cc8925;color:#cc8925;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-error{background:#ffcdd2;border:solid #e60017;color:#e60017;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message.p-toast-message-success{background:#c8e6c9;border:solid #439446;color:#439446;border-width:0 0 0 6px}::ng-deep .p-toast .p-toast-message .p-toast-icon-close{margin-top:1rem;margin-right:1.5rem}::ng-deep .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close{color:#cc8925}::ng-deep .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close{color:#0891cf}::ng-deep .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close{color:#e60017}::ng-deep .p-toast .p-toast-message.p-toast-message-succes .p-toast-icon-close{color:#439446}\n"] }]
         }], ctorParameters: () => [{ type: GeneralService }, { type: i2.ActivatedRoute }, { type: i1$1.MessageService }, { type: SfCrudService }, { type: StepService }, { type: i6$1.SfPdfsignService }, { type: i7$2.SfSimuladorService }, { type: NotificationService }, { type: i2.Router }], propDecorators: { color: [{
                 type: HostBinding,
                 args: ["style.--primary-color"]
@@ -2920,6 +3040,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], onSubmit: [{
                 type: Output
+            }], onLoaded: [{
+                type: Output
             }], idEntidad: [{
                 type: Input
             }] } });
@@ -2928,14 +3050,14 @@ class SfCrudComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SfCrudComponent, isStandalone: false, selector: "lib-sf-crud", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SfCrudComponent, isStandalone: false, selector: "lib-sf-crud", ngImport: i0, template: `
     <p>
       sf-crud works!
     </p>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-sf-crud', template: `
     <p>
@@ -2950,11 +3072,11 @@ const routes = [
     }
 ];
 class SfCrudRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SfCrudRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: SfCrudRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -2963,8 +3085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class SfCrudModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SfCrudModule, declarations: [SfCrudComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: SfCrudModule, declarations: [SfCrudComponent,
             TableroComponent,
             RegistroComponent,
             ControlComponent,
@@ -3055,7 +3177,7 @@ class SfCrudModule {
             TableroComponent,
             RegistroComponent,
             ControlComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudModule, imports: [SfCrudRoutingModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudModule, imports: [SfCrudRoutingModule,
             SfPdfsignModule,
             SfSimuladorModule,
             AccordionModule,
@@ -3137,7 +3259,7 @@ class SfCrudModule {
             TreeModule,
             SfAdoModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SfCrudModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfCrudModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [