@yourself.create/ngx-form-designer 0.0.13 → 0.0.14

package/fesm2022/uch-web-ngx-form-designer.mjs

@@ -4571,6 +4571,10 @@ class FormEventRunner {
             this.handleSetValue(action, evt, fields);
             return false;
         }
+        if (action.type === 'clearFields') {
+            this.handleClearFields(action, fields);
+            return false;
+        }
         if (action.type === 'navigate') {
             return this.handleNavigateAction(action, fields);
         }
@@ -4579,9 +4583,6 @@ class FormEventRunner {
     }
     handleSetValue(action, evt, fields) {
         const target = fields.find(f => f.id === action.targetFieldId);
-        if (!target)
-            return;
-        const previousValue = this.engine.getValue(target.name);
         let val;
         if (action.valueFrom === 'literal') {
             val = action.valueLiteral;
@@ -4595,16 +4596,31 @@ class FormEventRunner {
                 val = this.engine.getValue(source.name);
             }
         }
-        this.engine.setValue(target.name, val);
-        if (!Object.is(previousValue, val)) {
-            this.engine.emitUiEvent({
-                fieldId: target.id,
-                fieldName: target.name,
-                type: 'change',
-                value: val
-            });
+        this.applyFieldValue(target, val);
+    }
+    handleClearFields(action, fields) {
+        const targetFieldIds = [...new Set(action.targetFieldIds ?? [])];
+        for (const targetFieldId of targetFieldIds) {
+            const target = fields.find(field => field.id === targetFieldId);
+            this.applyFieldValue(target, null);
         }
     }
+    applyFieldValue(target, value) {
+        if (!target) {
+            return;
+        }
+        const previousValue = this.engine.getValue(target.name);
+        this.engine.setValue(target.name, value);
+        if (Object.is(previousValue, value)) {
+            return;
+        }
+        this.engine.emitUiEvent({
+            fieldId: target.id,
+            fieldName: target.name,
+            type: 'change',
+            value
+        });
+    }
     async handleApiAction(action, eventId, evt, fields) {
         if (!this.apiExecutor) {
             this.logger.warn('API action skipped because no apiExecutor was provided.', { event: evt, action });
@@ -23875,6 +23891,7 @@ class EventsWorkspaceComponent {
     actionTypeOptions(binding, actionIndex) {
         return [
             { label: 'Set Value', value: 'setValue' },
+            { label: 'Clear Fields', value: 'clearFields' },
             { label: 'Log', value: 'log' },
             { label: 'Navigate', value: 'navigate' },
             { label: 'API', value: 'api', disabled: !this.canSelectApiAction(binding, actionIndex) }
@@ -23948,6 +23965,15 @@ class EventsWorkspaceComponent {
                 binding.actions[actionIndex] = nextAction;
                 return;
             }
+            if (currentAction.type === 'clearFields') {
+                const nextAction = {
+                    ...currentAction,
+                    ...patch,
+                    targetFieldIds: [...patch.targetFieldIds ?? currentAction.targetFieldIds]
+                };
+                binding.actions[actionIndex] = nextAction;
+                return;
+            }
             if (currentAction.type === 'log') {
                 const nextAction = {
                     ...currentAction,
@@ -24163,6 +24189,9 @@ class EventsWorkspaceComponent {
     asSetValue(action) {
         return action;
     }
+    asClearFields(action) {
+        return action;
+    }
     asLog(action) {
         return action;
     }
@@ -24269,6 +24298,22 @@ class EventsWorkspaceComponent {
     hasApiAction(binding) {
         return binding.actions.some(action => action.type === 'api');
     }
+    isClearFieldSelected(action, fieldId) {
+        return action.targetFieldIds.includes(fieldId);
+    }
+    toggleClearFieldTarget(action, fieldId, selected) {
+        if (action.type !== 'clearFields') {
+            return;
+        }
+        const targetFieldIds = selected
+            ? [...new Set([...action.targetFieldIds, fieldId])]
+            : action.targetFieldIds.filter(id => id !== fieldId);
+        const path = this.findActionPath(action);
+        if (!path) {
+            return;
+        }
+        this.patchAction(path.bindingIndex, path.actionIndex, { targetFieldIds });
+    }
     canSelectApiAction(binding, actionIndex) {
         const current = binding.actions[actionIndex];
         if (current?.type === 'api')
@@ -24325,6 +24370,12 @@ class EventsWorkspaceComponent {
                 valueLiteral: ''
             };
         }
+        if (type === 'clearFields') {
+            return {
+                type: 'clearFields',
+                targetFieldIds: []
+            };
+        }
         if (type === 'api') {
             return {
                 type: 'api',
@@ -24864,6 +24915,32 @@ class EventsWorkspaceComponent {
                     </div>
                   </ng-container>
 
+                  <ng-container *ngIf="action.type === 'clearFields'">
+                    <div>
+                      <label class="mb-1 block text-[11px] font-medium text-gray-600">Fields To Clear</label>
+                      <div class="max-h-40 overflow-y-auto rounded-md border border-gray-200 bg-white">
+                        <label
+                          *ngFor="let targetField of availableTargetFields(); trackBy: trackFieldById"
+                          class="flex items-center gap-2 border-b border-gray-100 px-2 py-1.5 text-xs last:border-b-0">
+                          <input
+                            type="checkbox"
+                            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            [disabled]="readOnly()"
+                            [ngModel]="isClearFieldSelected(asClearFields(action), targetField.id)"
+                            (ngModelChange)="toggleClearFieldTarget(action, targetField.id, $event)">
+                          <span>{{ targetField.label }}</span>
+                          <span class="text-[10px] text-gray-400">({{ targetField.name }})</span>
+                        </label>
+                        <div *ngIf="!availableTargetFields().length" class="px-2 py-3 text-xs text-gray-500">
+                          No fields available.
+                        </div>
+                      </div>
+                      <p class="mt-2 text-[10px] text-gray-500">
+                        Clears selected fields to an empty runtime value.
+                      </p>
+                    </div>
+                  </ng-container>
+
                   <ng-container *ngIf="action.type === 'log'">
                     <label class="mb-1 block text-[11px] font-medium text-gray-600">Message</label>
                     <input
@@ -25245,6 +25322,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     </div>
                   </ng-container>
 
+                  <ng-container *ngIf="action.type === 'clearFields'">
+                    <div>
+                      <label class="mb-1 block text-[11px] font-medium text-gray-600">Fields To Clear</label>
+                      <div class="max-h-40 overflow-y-auto rounded-md border border-gray-200 bg-white">
+                        <label
+                          *ngFor="let targetField of availableTargetFields(); trackBy: trackFieldById"
+                          class="flex items-center gap-2 border-b border-gray-100 px-2 py-1.5 text-xs last:border-b-0">
+                          <input
+                            type="checkbox"
+                            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            [disabled]="readOnly()"
+                            [ngModel]="isClearFieldSelected(asClearFields(action), targetField.id)"
+                            (ngModelChange)="toggleClearFieldTarget(action, targetField.id, $event)">
+                          <span>{{ targetField.label }}</span>
+                          <span class="text-[10px] text-gray-400">({{ targetField.name }})</span>
+                        </label>
+                        <div *ngIf="!availableTargetFields().length" class="px-2 py-3 text-xs text-gray-500">
+                          No fields available.
+                        </div>
+                      </div>
+                      <p class="mt-2 text-[10px] text-gray-500">
+                        Clears selected fields to an empty runtime value.
+                      </p>
+                    </div>
+                  </ng-container>
+
                   <ng-container *ngIf="action.type === 'log'">
                     <label class="mb-1 block text-[11px] font-medium text-gray-600">Message</label>
                     <input
@@ -32814,11 +32917,7 @@ class TextFieldWidgetComponent {
                 this.clearResolvedValue();
                 return;
             }
-            this.control.setValue(val, { emitEvent: false });
-            this.syncFormattedNumberValue();
-            if (this.engine) {
-                this.engine.setValue(this.config.name, val);
-            }
+            this.applyResolvedValue(val);
         }
         catch {
             // Ignore failed datasource refreshes; field remains editable.
@@ -32830,11 +32929,25 @@ class TextFieldWidgetComponent {
     }
     clearResolvedValue() {
         this.displayPrefix = '';
-        this.control.setValue(null, { emitEvent: false });
+        this.applyResolvedValue(null);
+    }
+    applyResolvedValue(value) {
+        const previousValue = this.engine?.getValue(this.config.name);
+        this.control.setValue(value, { emitEvent: false });
         this.syncFormattedNumberValue();
-        if (this.engine) {
-            this.engine.setValue(this.config.name, null);
+        if (!this.engine) {
+            return;
+        }
+        this.engine.setValue(this.config.name, value);
+        if (Object.is(previousValue, value)) {
+            return;
         }
+        this.engine.emitUiEvent({
+            fieldId: this.config.id,
+            fieldName: this.config.name,
+            type: 'change',
+            value
+        });
     }
     async hasSelectedRowMatch() {
         const cfg = this.config.dataConfig;