valtech-components 2.0.394 → 2.0.396

package/fesm2022/valtech-components.mjs

@@ -8249,9 +8249,16 @@ class FormComponent {
         this.onSelectChange = new EventEmitter();
         this.types = InputType;
         this.subscriptions = [];
+        // Cache processed field properties
+        this.processedSections = [];
         this.previousValues = new Map();
     }
     ngOnInit() {
+        this.createForm();
+        this.processAllSections();
+        this.setupChangeTracking();
+    }
+    createForm() {
         const formControls = {};
         this.props.sections.forEach(section => {
             section.fields.forEach(field => {
@@ -8266,6 +8273,58 @@ class FormComponent {
             });
         });
         this.form = this.fb.group(formControls);
+    }
+    processAllSections() {
+        console.log('[FormComponent] Processing all sections - ONE TIME ONLY');
+        this.processedSections = this.props.sections.map(section => ({
+            name: section.name,
+            fields: section.fields.map(field => this.processField(field))
+        }));
+    }
+    processField(field) {
+        // Generate token if not provided
+        if (!field.token) {
+            field.token = `input-${field.type}-${field.name}`;
+        }
+        // Debug: verificar opciones para select fields - SOLO UNA VEZ
+        if (field.type === this.types.SEARCH_SELECT || field.type === this.types.MULTI_SELECT || field.type === this.types.MULTI_SELECT_SIMPLE) {
+            console.log(`[FormComponent] Processing field ${field.name} options:`, {
+                type: field.type,
+                optionsCount: field.options?.length || 0,
+                options: field.options?.slice(0, 2) || []
+            });
+        }
+        if (field.type === this.types.NUMBER_FROM_TO) {
+            const fromControl = this.getControl(`${field.name}_from`);
+            const toControl = this.getControl(`${field.name}_to`);
+            if (field.state === ComponentStates.DISABLED) {
+                fromControl.disable();
+                toControl.disable();
+            }
+            else {
+                fromControl.enable();
+                toControl.enable();
+            }
+            // Modify original field object to maintain reactivity
+            field.fromControl = fromControl;
+            field.toControl = toControl;
+            field.control = undefined; // Remove control for NUMBER_FROM_TO fields
+            return field;
+        }
+        else {
+            const control = this.getControl(field.name);
+            if (field.state === ComponentStates.DISABLED) {
+                control.disable();
+            }
+            else {
+                control.enable();
+            }
+            // Modify original field object to maintain reactivity
+            field.control = control;
+            return field;
+        }
+    }
+    setupChangeTracking() {
         this.props.sections.forEach(section => {
             section.fields
                 .filter(x => x.type === this.types.SELECT || x.type === this.types.TEXT || x.type === this.types.SEARCH_SELECT || x.type === this.types.MULTI_SELECT || x.type === this.types.MULTI_SELECT_SIMPLE)
@@ -8311,50 +8370,13 @@ class FormComponent {
     getControl(field) {
         return this.Form.get(field);
     }
+    /**
+     * @deprecated This method is now only used internally.
+     * Use processedSections property instead to avoid multiple calls.
+     */
     getFieldProp(field) {
-        field.token;
-        if (!field.token) {
-            field.token = `input-${field.type}-${field.name}`;
-        }
-        // Debug: verificar opciones para select fields
-        if (field.type === this.types.SEARCH_SELECT || field.type === this.types.MULTI_SELECT || field.type === this.types.MULTI_SELECT_SIMPLE) {
-            console.log(`[FormComponent] ${field.name} options:`, {
-                type: field.type,
-                optionsCount: field.options?.length || 0,
-                options: field.options?.slice(0, 2) || []
-            });
-        }
-        if (field.type === this.types.NUMBER_FROM_TO) {
-            const fromControl = this.getControl(`${field.name}_from`);
-            const toControl = this.getControl(`${field.name}_to`);
-            if (field.state === ComponentStates.DISABLED) {
-                fromControl.disable();
-                toControl.disable();
-            }
-            else {
-                fromControl.enable();
-                toControl.enable();
-            }
-            return {
-                ...field,
-                fromControl,
-                toControl,
-                control: undefined, // Remove control for NUMBER_FROM_TO fields
-            };
-        }
-        else {
-            const control = this.getControl(field.name);
-            if (field.state === ComponentStates.DISABLED) {
-                control.disable();
-            }
-            else {
-                control.enable();
-            }
-            return {
-                ...field,
-                control,
-            };
-        }
+        console.warn('[FormComponent] getFieldProp is deprecated and should not be called directly');
+        return this.processField(field);
     }
     get isAtEndOfForm() {
         return isAtEnd(this.elementRef);
@@ -8411,59 +8433,59 @@ class FormComponent {
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
+        <div class="section" *ngFor="let s of processedSections">
           <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
           <div class="input" *ngFor="let f of s.fields">
             <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
             <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="getFieldProp(f)"></val-text-input>
+              <val-text-input [props]="f"></val-text-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.CHECK">
               <val-check-input></val-check-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
+              <val-comment-input [props]="f"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+              <val-date-input [props]="f"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+              <val-email-input [props]="f"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+              <val-file-input [props]="f"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+              <val-hour-input [props]="f"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+              <val-number-input [props]="f"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
+              <val-number-from-to [props]="f"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+              <val-password-input [props]="f"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+              <val-pin-input [props]="f"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+              <val-radio-input [props]="f"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="getFieldProp(f)"></val-select-input>
+              <val-select-input [props]="f"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="getFieldProp(f)"></val-select-search>
+              <val-select-search [props]="f"></val-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT">
-              <val-multi-select-search [props]="getFieldProp(f)"></val-multi-select-search>
+              <val-multi-select-search [props]="f"></val-multi-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="getFieldProp(f)"></val-multi-select-simple>
+              <val-multi-select-simple [props]="f"></val-multi-select-simple>
             </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
+            <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>
@@ -8513,59 +8535,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
+        <div class="section" *ngFor="let s of processedSections">
           <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
           <div class="input" *ngFor="let f of s.fields">
             <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
             <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="getFieldProp(f)"></val-text-input>
+              <val-text-input [props]="f"></val-text-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.CHECK">
               <val-check-input></val-check-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
+              <val-comment-input [props]="f"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+              <val-date-input [props]="f"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+              <val-email-input [props]="f"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+              <val-file-input [props]="f"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+              <val-hour-input [props]="f"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+              <val-number-input [props]="f"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
+              <val-number-from-to [props]="f"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+              <val-password-input [props]="f"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+              <val-pin-input [props]="f"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+              <val-radio-input [props]="f"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="getFieldProp(f)"></val-select-input>
+              <val-select-input [props]="f"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="getFieldProp(f)"></val-select-search>
+              <val-select-search [props]="f"></val-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT">
-              <val-multi-select-search [props]="getFieldProp(f)"></val-multi-select-search>
+              <val-multi-select-search [props]="f"></val-multi-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="getFieldProp(f)"></val-multi-select-simple>
+              <val-multi-select-simple [props]="f"></val-multi-select-simple>
             </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
+            <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>