UI: Fixed cf disabled state in component

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@@ -64,23 +64,26 @@
       </div>
       @switch (fieldFormGroup.get('type').value) {
         @case (CalculatedFieldType.GEOFENCING) {
-          <tb-geofencing-configuration formControlName="configuration" [entityId]="data.entityId" [entityName]="data.entityName" [tenantId]="data.tenantId">
-          </tb-geofencing-configuration>
+          <tb-geofencing-configuration formControlName="configuration"
+                                       [entityId]="data.entityId"
+                                       [entityName]="data.entityName"
+                                       [tenantId]="data.tenantId"
+          ></tb-geofencing-configuration>
         }
         @case (CalculatedFieldType.PROPAGATION) {
           <tb-propagation-configuration formControlName="configuration"
                                         [entityId]="data.entityId"
                                         [entityName]="data.entityName"
                                         [tenantId]="data.tenantId"
-                                        [testScript]="onTestScript.bind(this)">
-          </tb-propagation-configuration>
+                                        [testScript]="onTestScript.bind(this)"
+          ></tb-propagation-configuration>
         }
         @case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
           <tb-related-entities-aggregation-component formControlName="configuration"
                                                      [entityId]="data.entityId"
                                                      [entityName]="data.entityName"
-                                                     [tenantId]="data.tenantId">
-          </tb-related-entities-aggregation-component>
+                                                     [tenantId]="data.tenantId"
+          ></tb-related-entities-aggregation-component>
         }
         @default {
           <tb-simple-configuration formControlName="configuration"
@@ -89,8 +92,7 @@
                                    [tenantId]="data.tenantId"
                                    [isScript]="fieldFormGroup.get('type').value === CalculatedFieldType.SCRIPT"
                                    [testScript]="onTestScript.bind(this)"
-          >
-          </tb-simple-configuration>
+          ></tb-simple-configuration>
         }
       }
     </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts

@@ -113,7 +113,7 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
   }
 
   validate(): ValidationErrors | null {
-    return this.outputForm.valid ? null : {outputConfig: false};
+    return this.outputForm.valid || this.outputForm.disabled ? null : {outputConfig: false};
   }
 
   writeValue(value: CalculatedFieldOutput | CalculatedFieldSimpleOutput): void {
@@ -127,6 +127,16 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
 
   registerOnTouched(_: any): void { }
 
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.outputForm.disable({emitEvent: false});
+    } else {
+      this.outputForm.enable({emitEvent: false});
+      this.updatedFormWithMode();
+      this.toggleScopeByOutputType(this.outputForm.get('type').value);
+    }
+  }
+
   private updatedModel(value: CalculatedFieldOutput | CalculatedFieldSimpleOutput) {
     if (this.simpleMode && 'name' in value) {
       value.name = value.name?.trim() ?? '';

ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html

@@ -22,13 +22,13 @@
          required
          (focusin)="keyInputSubject.next()"
          [matAutocomplete]="keysAutocomplete">
-  @if (keyControl.value) {
+  @if (keyControl.value && keyControl.enabled) {
     <button type="button"
             matSuffix mat-icon-button aria-label="Clear"
             (click)="clear()">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
-  } @else if (keyControl.hasError('required') && keyControl.touched) {
+  } @else if (keyControl.hasError('required') && keyControl.touched && keyControl.enabled) {
     <mat-icon matSuffix
               matTooltipPosition="above"
               matTooltipClass="tb-error-tooltip"

ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.ts

@@ -152,10 +152,18 @@ export class EntityKeyAutocompleteComponent implements ControlValueAccessor, Val
   registerOnTouched(_): void {}
 
   validate(): ValidationErrors | null {
-    return this.keyControl.valid ? null : { keyControl: false };
+    return this.keyControl.valid || this.keyControl.disabled ? null : { keyControl: false };
   }
 
   writeValue(value: string): void {
     this.keyControl.patchValue(value, {emitEvent: false});
   }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.keyControl.disable({emitEvent: false});
+    } else {
+      this.keyControl.enable({emitEvent: false});
+    }
+  }
 }