[editor] Add enableReHide to section

projects/common/models/section.ts

@@ -24,6 +24,7 @@ export class Section {
   gridRowSizes: { value: number; unit: string }[] = [{ value: 1, unit: 'fr' }];
   visibilityDelay: number = 0;
   animatedVisibility: boolean = false;
+  enableReHide: boolean = false;
   visibilityRules: VisibilityRule[] = [];
 
   constructor(blueprint?: Record<string, any>) {
@@ -37,6 +38,7 @@ export class Section {
     if (sanitizedBlueprint.gridRowSizes !== undefined) this.gridRowSizes = sanitizedBlueprint.gridRowSizes;
     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));

projects/editor/src/app/components/canvas/section-menu.component.ts

@@ -325,13 +325,15 @@ export class SectionMenuComponent implements OnDestroy {
         this.section.visibilityRules,
         this.getControlIds(),
         this.section.visibilityDelay,
-        this.section.animatedVisibility
+        this.section.animatedVisibility,
+        this.section.enableReHide
       )
       .subscribe(visibilityConfig => {
         if (visibilityConfig) {
           this.updateModel('visibilityRules', visibilityConfig.visibilityRules);
           this.updateModel('visibilityDelay', visibilityConfig.visibilityDelay);
           this.updateModel('animatedVisibility', visibilityConfig.animatedVisibility);
+          this.updateModel('enableReHide', visibilityConfig.enableReHide);
         }
       });
   }

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

@@ -11,15 +11,22 @@
     </div>
     <div *ngIf="visibilityRules.length"
          class="fx-row-start-stretch fx-gap-10">
-      <mat-form-field >
+      <mat-checkbox
+        class="fixed-size-field"
+        [(ngModel)]="enableReHide">
+        {{'section.enableReHide' | translate}}
+      </mat-checkbox>
+      <mat-form-field class="fixed-size-field">
         <mat-label>{{'section.visibilityDelay' | translate}}</mat-label>
         <input matInput
                type="number"
                step="1000"
+               [disabled]="enableReHide"
                [placeholder]="'section.visibilityDelay' | translate"
                [(ngModel)]="visibilityDelay">
       </mat-form-field>
       <mat-checkbox
+        [disabled]="enableReHide"
         [(ngModel)]="animatedVisibility">
         {{'section.animatedVisibility' | translate}}
       </mat-checkbox>

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

+.fixed-size-field {
+  width: 212px;
+  min-width: 212px;
+}

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

@@ -3,13 +3,15 @@ import { VisibilityRule } from 'common/models/visibility-rule';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
-  templateUrl: './visibility-rules-dialog.component.html'
+  templateUrl: './visibility-rules-dialog.component.html',
+  styleUrls: ['./visibility-rules-dialog.component.scss']
 })
 export class VisibilityRulesDialogComponent {
   visibilityRules!: VisibilityRule[];
   controlIds!: string[];
   visibilityDelay!: number;
   animatedVisibility!: boolean;
+  enableReHide!: boolean;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: {
@@ -17,11 +19,13 @@ export class VisibilityRulesDialogComponent {
       visibilityDelay: number,
       animatedVisibility: boolean,
       controlIds: string[],
+      enableReHide: boolean,
     }
   ) {
     this.visibilityRules = [...data.visibilityRules];
     this.visibilityDelay = data.visibilityDelay;
     this.animatedVisibility = data.animatedVisibility;
+    this.enableReHide = data.enableReHide;
     this.controlIds = data.controlIds;
   }
 

projects/editor/src/app/services/dialog.service.ts

@@ -136,15 +136,22 @@ export class DialogService {
   showVisibilityRulesDialog(visibilityRules: VisibilityRule[],
                             controlIds: string[],
                             visibilityDelay: number,
-                            animatedVisibility: boolean
-  ): Observable<{ visibilityRules: VisibilityRule[], visibilityDelay: number, animatedVisibility: boolean }> {
+                            animatedVisibility: boolean,
+                            enableReHide: boolean
+  ): Observable<{
+      visibilityRules: VisibilityRule[],
+      visibilityDelay: number,
+      animatedVisibility: boolean,
+      enableReHide: boolean
+    }> {
     const dialogRef = this.dialog
       .open(VisibilityRulesDialogComponent, {
         data: {
           visibilityRules,
           controlIds,
           visibilityDelay,
-          animatedVisibility
+          animatedVisibility,
+          enableReHide
         },
         autoFocus: false
       });

projects/editor/src/assets/i18n/de.json

@@ -39,6 +39,7 @@
     "manageVisibilityRules": "Sichtbarkeit verwalten",
     "animatedVisibility": "Scrollen beim Anzeigen",
     "visibilityDelay": "Verzögerung der Anzeige",
+    "enableReHide": "Erneutes Ausblenden erlauben",
     "controlId": "Statusvariable/Element-ID",
     "operator": "Operator",
     "addElementsOrStateVariables": "Bitte zuerst Elemente oder Statusvariablen anlegen",