Convert VisibilityRule to interface

projects/common/models/section.ts

@@ -39,10 +39,7 @@ export class Section {
     if (sanitizedBlueprint.visibilityDelay) this.visibilityDelay = sanitizedBlueprint.visibilityDelay;
     if (sanitizedBlueprint.animatedVisibility) this.animatedVisibility = sanitizedBlueprint.animatedVisibility;
     if (sanitizedBlueprint.enableReHide) this.enableReHide = sanitizedBlueprint.enableReHide;
-    if (sanitizedBlueprint.visibilityRules) {
-      this.visibilityRules = sanitizedBlueprint.visibilityRules
-        .map(rule => new VisibilityRule(rule.id, rule.operator, rule.value));
-    }
+    if (sanitizedBlueprint.visibilityRules) this.visibilityRules = sanitizedBlueprint.visibilityRules;
     this.elements =
       sanitizedBlueprint.elements?.map(element => ElementFactory.createElement({
         ...element,

projects/common/models/visibility-rule.ts

-export class VisibilityRule {
+export interface VisibilityRule {
   id: string;
   operator: Operator;
   value: string;
-
-  static operators = ['=', '!=', '<', '<=', '>', '>='];
-
-  constructor(id: string, operator: Operator, value: string) {
-    this.id = id;
-    this.operator = operator;
-    this.value = value;
-  }
 }
 
-export type Operator = typeof VisibilityRule.operators[number];
+export const VisibilityRuleOperators = ['=', '!=', '<', '<=', '>', '>='];
+type Operator = typeof VisibilityRuleOperators[number];

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rule-editor.component.html

@@ -14,7 +14,7 @@
     <mat-label>{{'section.operator' | translate}}</mat-label>
     <mat-select [(ngModel)]="visibilityRule.operator"
                 (ngModelChange)="visibilityRuleChange.emit(visibilityRule)">
-      <mat-option *ngFor="let operator of VisibilityRule.operators"
+      <mat-option *ngFor="let operator of VisibilityRuleOperators"
                   [value]="operator">
         {{operator}}
       </mat-option>

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rule-editor.component.ts

 import {
   Component, EventEmitter, Input, Output
 } from '@angular/core';
-import { VisibilityRule } from 'common/models/visibility-rule';
+import { VisibilityRule, VisibilityRuleOperators } from 'common/models/visibility-rule';
 
 @Component({
   selector: 'aspect-visibility-rule-editor',
@@ -12,5 +12,5 @@ export class VisibilityRuleEditorComponent {
   @Input() visibilityRule!: VisibilityRule;
 
   @Output() visibilityRuleChange = new EventEmitter<VisibilityRule>();
-  protected readonly VisibilityRule = VisibilityRule;
+  protected readonly VisibilityRuleOperators = VisibilityRuleOperators;
 }

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts

@@ -30,7 +30,7 @@ export class VisibilityRulesDialogComponent {
   }
 
   addVisibilityRule(): void {
-    this.visibilityRules.push(new VisibilityRule('', '=', ''));
+    this.visibilityRules.push({ id: '', operator: '=', value: '' });
   }
 
   deleteVisibilityRule(index: number): void {