From 71d62d16730dec315e228edbf45552c26fc338b1 Mon Sep 17 00:00:00 2001
From: geralrodrigues <100929087+geralrodrigues@users.noreply.github.com>
Date: Thu, 26 Sep 2024 12:57:04 +0100
Subject: [PATCH] fix(angular): fix the position of popup cat-element inside
 the cat-dialog (#570)

---
 .../src/app/dialog/dialog.component.html      | 24 +++++++++++++------
 .../src/lib/dialog/dialog.component.scss      |  2 ++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html b/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html
index 9db54f18a..7cf111b77 100644
--- a/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html
+++ b/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html
@@ -11,12 +11,20 @@
     [attachToElement]="true"
   >
   </cat-datepicker>
-  <p>
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
-    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
-    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  </p>
+  <cat-dropdown>
+    <cat-button slot="trigger">Click me</cat-button>
+    <p slot="content">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua.
+    </p>
+  </cat-dropdown>
+  <cat-datetime label="Datetime" clearable>
+    <cat-date label="Date start"></cat-date>
+    <cat-time label="Time start"></cat-time>
+  </cat-datetime>
 
   <form [formGroup]="form">
     <cat-select
@@ -32,6 +40,8 @@
   <cat-dialog-actions>
     <cat-button variant="text" class="cat-mr-auto">Tertiary</cat-button>
     <cat-button>Secondary</cat-button>
-    <cat-button variant="filled" color="primary">Primary</cat-button>
+    <cat-tooltip content="Primary">
+      <cat-button variant="filled" color="primary">Primary</cat-button>
+    </cat-tooltip>
   </cat-dialog-actions>
 </cat-dialog>
diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss
index ddccd2eab..12c803559 100644
--- a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss
+++ b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss
@@ -9,6 +9,8 @@
 }
 
 .cat-dialog-pane {
+  transform: translateZ(0);
+
   .cdk-dialog-container > *:only-child {
     display: block;
     width: 100%;