From 282f5216a55cfb1121fc1e32af0421b67491232b Mon Sep 17 00:00:00 2001
From: theo-ritense <95682624+theo-ritense@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:08:22 +0100
Subject: [PATCH] Added cdsLayer to FVM modal to fix wrong bgcolor on inputs.
 (#1338)

---
 .../form-view-model.component.html            |  1 +
 .../form-view-model.component.ts              | 96 +++++++++++--------
 2 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
index fa1d04d6a..0560927de 100644
--- a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
+++ b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.html
@@ -16,6 +16,7 @@
 
 <div
   class="form-container formio-carbon"
+  cdsLayer="1.0"
   *ngIf="{
     submission: submission$ | async,
     form: form$ | async,
diff --git a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
index 9e17dbe51..858a6a7a6 100644
--- a/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
+++ b/projects/valtimo/form-view-model/src/lib/components/form-view-model/form-view-model.component.ts
@@ -46,6 +46,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {HttpErrorResponse} from '@angular/common/http';
 import {CommonModule} from '@angular/common';
 import {isEqual} from 'lodash';
+import {LayerModule} from 'carbon-components-angular';
 
 moment.defaultFormat = 'DD MMM YYYY HH:mm';
 
@@ -54,7 +55,7 @@ moment.defaultFormat = 'DD MMM YYYY HH:mm';
   templateUrl: './form-view-model.component.html',
   styleUrls: ['./form-view-model.component.css'],
   standalone: true,
-  imports: [CommonModule, FormioModule],
+  imports: [CommonModule, FormioModule, LayerModule],
 })
 export class FormViewModelComponent implements OnInit, OnDestroy {
   @ViewChild('formio') formio: FormioComponent;
@@ -148,9 +149,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
     })
   );
 
-  public readonly renderOptions$: Observable<any> = combineLatest([
-    this.currentLanguage$,
-  ]).pipe(
+  public readonly renderOptions$: Observable<any> = combineLatest([this.currentLanguage$]).pipe(
     map(([language]) => {
       const formioTranslations = this.translateService.instant('formioTranslations');
 
@@ -158,11 +157,11 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
         language,
         ...(typeof formioTranslations === 'object'
           ? {
-            language,
-            i18n: {
-              [language]: this.stateService.flattenTranslationsObject(formioTranslations),
-            },
-          }
+              language,
+              i18n: {
+                [language]: this.stateService.flattenTranslationsObject(formioTranslations),
+              },
+            }
           : {}),
       };
     })
@@ -184,19 +183,23 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
       this.loadInitialViewModel();
     }
 
-    this.focusSubscription = this.focus$.pipe(withLatestFrom(this.change$, this.submission$)).subscribe(([_, changeData, submissionDate]) => {
-      const dataAtFocus =
-        !!changeData && !!changeData.data ? JSON.parse(JSON.stringify(changeData.data)) : JSON.parse(JSON.stringify(submissionDate.data));
-      this.blur$
-        .pipe(take(1))
-        .pipe(withLatestFrom(this.change$))
-        .subscribe(([_, blurData]) => {
-          const dataEqual = isEqual(dataAtFocus, blurData?.data);
-          if (!dataEqual) {
-            this.updateForm.next(true);
-          }
-        });
-    });
+    this.focusSubscription = this.focus$
+      .pipe(withLatestFrom(this.change$, this.submission$))
+      .subscribe(([_, changeData, submissionDate]) => {
+        const dataAtFocus =
+          !!changeData && !!changeData.data
+            ? JSON.parse(JSON.stringify(changeData.data))
+            : JSON.parse(JSON.stringify(submissionDate.data));
+        this.blur$
+          .pipe(take(1))
+          .pipe(withLatestFrom(this.change$))
+          .subscribe(([_, blurData]) => {
+            const dataEqual = isEqual(dataAtFocus, blurData?.data);
+            if (!dataEqual) {
+              this.updateForm.next(true);
+            }
+          });
+      });
 
     this.updateSubscription = this.updateForm
       .pipe(
@@ -257,7 +260,10 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
                       return of(response);
                     }),
                     catchError(error => {
-                      const message = error instanceof HttpErrorResponse ? this.handleFormError(error) : error as string
+                      const message =
+                        error instanceof HttpErrorResponse
+                          ? this.handleFormError(error)
+                          : (error as string);
                       callback(message ? {message: message, component: null} : null, null);
                       return EMPTY; // return an empty observable to complete the stream
                     })
@@ -271,7 +277,10 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
                       return of(response);
                     }),
                     catchError(error => {
-                      const message = error instanceof HttpErrorResponse ? this.handleFormError(error) : error as string
+                      const message =
+                        error instanceof HttpErrorResponse
+                          ? this.handleFormError(error)
+                          : (error as string);
                       callback(message ? {message: message, component: null} : null, null);
                       return EMPTY; // return an empty observable to complete the stream
                     })
@@ -285,7 +294,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
     const formInstance = this.formio.formio;
     this.formErrors$.next([]);
     if (error.error?.componentErrors) {
-      const errors = []
+      const errors = [];
       error.error.componentErrors.forEach(componentError => {
         const component = formInstance.getComponent(componentError.component);
         if (component == null) {
@@ -294,8 +303,8 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
           component?.setCustomValidity(componentError.message);
         }
       });
-      this.formErrors$.next(errors)
-    } else if(error.error?.error) {
+      this.formErrors$.next(errors);
+    } else if (error.error?.error) {
       const component = formInstance.getComponent(error.error?.component);
       if (component == null) {
         this.formErrors$.next([error.error.error]);
@@ -303,7 +312,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
         component?.setCustomValidity(error.error.error);
       }
     } else {
-      return error.message
+      return error.message;
     }
   }
 
@@ -393,7 +402,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
                         this.handlePageChange();
                         this.refreshForm.emit({submission: submission});
                         this.loading$.next(false);
-                        this.formErrors$.next([])
+                        this.formErrors$.next([]);
                       },
                       error: error => {
                         this.loading$.next(false);
@@ -415,15 +424,17 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
       .pipe(
         take(1),
         switchMap(([formName, processDefinitionKey, documentId]) =>
-          this.viewModelService.getViewModelForStartForm(formName, processDefinitionKey, documentId).pipe(
-            tap(viewModel => {
-              this.submission$.next({data: viewModel});
-              this.change$.pipe(take(1)).subscribe(() => {
-                this.loading$.next(false);
-              });
-              this._isWizard = this.formio.form.display === 'wizard';
-            })
-          )
+          this.viewModelService
+            .getViewModelForStartForm(formName, processDefinitionKey, documentId)
+            .pipe(
+              tap(viewModel => {
+                this.submission$.next({data: viewModel});
+                this.change$.pipe(take(1)).subscribe(() => {
+                  this.loading$.next(false);
+                });
+                this._isWizard = this.formio.form.display === 'wizard';
+              })
+            )
         )
       )
       .subscribe();
@@ -436,7 +447,12 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
         switchMap(updating => {
           if (!updating) {
             this.loading$.next(true);
-            return combineLatest([this.formName$, this.processDefinitionKey$, this.change$, this.documentId$]).pipe(
+            return combineLatest([
+              this.formName$,
+              this.processDefinitionKey$,
+              this.change$,
+              this.documentId$,
+            ]).pipe(
               take(1),
               switchMap(([formName, processDefinitionKey, change, documentId]) =>
                 this.viewModelService
@@ -457,7 +473,7 @@ export class FormViewModelComponent implements OnInit, OnDestroy {
                         this.handlePageChange();
                         this.refreshForm.emit({submission: submission});
                         this.loading$.next(false);
-                        this.formErrors$.next([])
+                        this.formErrors$.next([]);
                       },
                       error: error => {
                         this.loading$.next(false);