From 8478fa608ede46f30f73f720c46943dd232f8f96 Mon Sep 17 00:00:00 2001
From: ck-c8y <christof.strack@cumulocity.com>
Date: Wed, 27 Nov 2024 16:39:27 +0100
Subject: [PATCH] add style to bring drop down to the foreground in the drawer
 dialog

---
 .../src/mapping/shared/mapping.style.css             | 12 ------------
 .../step-connector/mapping-connector.component.ts    |  2 +-
 .../step-connector/mapping-connector.style.css       |  6 ++++++
 .../stepper-mapping/mapping-stepper.component.ts     |  6 +++---
 4 files changed, 10 insertions(+), 16 deletions(-)
 create mode 100644 dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css

diff --git a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
index 704d5e280..e1ca37f7d 100644
--- a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
+++ b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
@@ -62,18 +62,6 @@ json-editor > div {
   top: -20px;
 }
 
-.animation-slow {
-  animation-duration: 2s;
-}
-
-.animate-background {
-  animation-name: background-color;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate-reverse;
-  animation-timing-function: ease;
-}
-
 @keyframes background-color {
   from {
     background-color: var(--brand-light, var(--c8y-brand-light));
diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts
index 4eead8c8d..907152c4c 100644
--- a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts
+++ b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts
@@ -44,7 +44,7 @@ import { ConnectorConfigurationComponent } from '../../shared/connector-configur
 @Component({
   selector: 'd11r-mapping-connector',
   templateUrl: 'mapping-connector.component.html',
-  styleUrls: ['../shared/mapping.style.css'],
+  styleUrls: ['../shared/mapping.style.css', './mapping-connector.style.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MappingConnectorComponent implements OnInit, OnDestroy {
diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css
new file mode 100644
index 000000000..86e420e83
--- /dev/null
+++ b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css
@@ -0,0 +1,6 @@
+
+/* bring dropdown to the top of the modal dialog */
+body > bs-dropdown-container  {
+    z-index: 1056 !important;
+    position: relative;
+}
\ No newline at end of file
diff --git a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
index 3267f4ea9..be6303c6b 100644
--- a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
+++ b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
@@ -247,7 +247,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
             wrappers: ['custom-form-field'],
             templateOptions: {
               label: 'Source Expression',
-              class: 'input-sm disabled-animate-background',
+              class: 'input-sm',
               customWrapperClass: 'm-b-24',
               disabled:
                 this.stepperConfiguration.editorMode == EditorMode.READ_ONLY ||
@@ -275,7 +275,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
                   model.pathSource == '' &&
                   model.stepperConfiguration.allowDefiningSubstitutions
                 ) {
-                  return 'input-sm disabled-animate-background';
+                  return 'input-sm';
                 } else {
                   return 'input-sm';
                 }
@@ -314,7 +314,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
                   model.pathTarget == '' &&
                   model.stepperConfiguration.allowDefiningSubstitutions
                 ) {
-                  return 'input-sm disabled-animate-background';
+                  return 'input-sm';
                 } else {
                   return 'input-sm';
                 }