diff --git a/projects/common/canvas-element-component.directive.ts b/projects/common/canvas-element-component.directive.ts
index fdfe016c34f6be7c83f9707b27379d4131dec579..e18b0903226f46b5f56783398ac1d26e904ef4fd 100644
--- a/projects/common/canvas-element-component.directive.ts
+++ b/projects/common/canvas-element-component.directive.ts
@@ -5,7 +5,7 @@ import { UnitUIElement } from './unit';
 import { FormService } from './form.service';
 
 @Directive()
-export abstract class CanvasElementComponent implements OnInit {
+export abstract class FormElementComponent implements OnInit {
   elementModel!: UnitUIElement;
   formControl!: FormControl;
   style!: Record<string, string>;
diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index e515ae06f5f39ef6e8e92d5f0e9224d56e122a4f..930c5f76f236cb77c00fddf7ae570ced0ba87f93 100644
--- a/projects/common/component-utils.ts
+++ b/projects/common/component-utils.ts
@@ -1,5 +1,5 @@
 import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
-import { CanvasElementComponent } from './canvas-element-component.directive';
+import { FormElementComponent } from './canvas-element-component.directive';
 import { LabelComponent } from './element-components/label.component';
 import { ButtonComponent } from './element-components/button.component';
 import { TextFieldComponent } from './element-components/text-field.component';
@@ -13,7 +13,7 @@ import { CorrectionComponent } from './element-components/compound-components/co
 
 export function getComponentFactory(
   elementType: string,
-  componentFactoryResolver: ComponentFactoryResolver): ComponentFactory<CanvasElementComponent> {
+  componentFactoryResolver: ComponentFactoryResolver): ComponentFactory<FormElementComponent> {
   switch (elementType) {
     case 'label':
       return componentFactoryResolver.resolveComponentFactory(LabelComponent);
diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index a2d9e2f153b3d680c571e8de1fd70a122f57c56c..74363e230c35057358f1ddb03cee59b263cd3653 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-audio',
@@ -12,5 +12,5 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
     'div {display: inline-block; border: 5px solid; padding: 12px 9px 9px 9px;}'
   ]
 })
-export class AudioComponent extends CanvasElementComponent {
+export class AudioComponent extends FormElementComponent {
 }
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index 863a13e8d6297f1e5ddbf8c3c1c872bee72f35d1..876e3e3a092d38bc7fb490a082c05930e9d97150 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-button',
@@ -18,4 +18,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
     </button>
   `
 })
-export class ButtonComponent extends CanvasElementComponent { }
+export class ButtonComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 44a4fc4444a6dbbdbae5de3cbfc0a869d33ea0ab..552b072197c0b0baf4b999c8114515c2add70148 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-checkbox',
@@ -19,4 +19,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
       </mat-checkbox>
   `
 })
-export class CheckboxComponent extends CanvasElementComponent { }
+export class CheckboxComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/compound-components/correction.component.ts b/projects/common/element-components/compound-components/correction.component.ts
index 3051d27ce6d6b2e5b5dd9bfeec7f66ef9556f407..7ff85ce435b79ab2db554820771235c3bda0610a 100644
--- a/projects/common/element-components/compound-components/correction.component.ts
+++ b/projects/common/element-components/compound-components/correction.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../../canvas-element-component.directive';
+import { FormElementComponent } from '../../canvas-element-component.directive';
 
 @Component({
   selector: 'app-correction',
@@ -28,4 +28,4 @@ import { CanvasElementComponent } from '../../canvas-element-component.directive
     'mat-form-field {margin: 5px}'
   ]
 })
-export class CorrectionComponent extends CanvasElementComponent { }
+export class CorrectionComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index aeadb2c0dbf8f55399ff36814c70bcbca43eb47c..7c56c46579dce4cf8a6d18aeb964e6dbb27de30d 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-dropdown',
@@ -24,4 +24,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
       </mat-form-field>
   `
 })
-export class DropdownComponent extends CanvasElementComponent { }
+export class DropdownComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index e3ef42038184c0b65cab169353ca824b3dd2d1e1..ca838ebf23dc55ecaeaa0b305096eb97e46aaf85 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-image',
@@ -7,4 +7,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
       <img src="{{$any(elementModel).src}}" alt="Image Placeholder">
   `
 })
-export class ImageComponent extends CanvasElementComponent { }
+export class ImageComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/label.component.ts b/projects/common/element-components/label.component.ts
index 9ee3fc3c7010e4dee1e0c714946a9c56938889ac..dd75ac5181d34c8ef5645c6d1cc2cf4893586207 100644
--- a/projects/common/element-components/label.component.ts
+++ b/projects/common/element-components/label.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-label',
@@ -17,4 +17,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
       </div>
   `
 })
-export class LabelComponent extends CanvasElementComponent { }
+export class LabelComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index e208687158e5e9b66165f7a53b77b24d9ca75618..ea1358546cbe00b29551a8d2d7da024f3f01385b 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-radio-button-group',
@@ -23,4 +23,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
       </div>
   `
 })
-export class RadioButtonGroupComponent extends CanvasElementComponent { }
+export class RadioButtonGroupComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index d5df0590898c4e9f881b90ba066186ec4130c8ba..7cb6d0617e48cf284dfb17372ea026d1774b4efb 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-text-field',
@@ -22,4 +22,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
     </textarea>
   `
 })
-export class TextFieldComponent extends CanvasElementComponent { }
+export class TextFieldComponent extends FormElementComponent { }
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 4ed267e779eef623e6b9ec3269b0cecf5622ce57..6f3177424ec6954314c57ece9d62dfe8adbffa14 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CanvasElementComponent } from '../canvas-element-component.directive';
+import { FormElementComponent } from '../canvas-element-component.directive';
 
 @Component({
   selector: 'app-video',
@@ -12,4 +12,4 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
     'div {display: inline-block;border: 5px solid; padding: 12px 9px 9px 9px}'
   ]
 })
-export class VideoComponent extends CanvasElementComponent { }
+export class VideoComponent extends FormElementComponent { }