From e4fdeec134df7138e88b5e5630376d74763c53c2 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Fri, 5 Jul 2024 12:08:44 +0200
Subject: [PATCH 1/2] refactor: add fallback close button and update
 documentation

---
 .../dialog-sample.component.html              | 17 +++++++++++
 .../dialog-sample/dialog-sample.component.ts  |  2 +-
 .../components/dialog/dialog-documentation.md |  4 +--
 .../components/dialog/dialog.component.css    | 12 ++++++++
 .../components/dialog/dialog.component.html   | 28 ++++++++++++++++++-
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 7604518..4b6ad44 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -60,6 +60,23 @@
     </sk-dialog>
   </div>
 
+  <div>
+    <button (click)="isDialogWithFallbackButtonOpen = true">
+      open Dialog with fallback outer button right
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithFallbackButtonOpen"
+      (close)="isDialogWithFallbackButtonOpen = false"
+      [showCloseButton]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with the a fallback Close
+        Button. (when the user don't have a close button)
+      </div>
+    </sk-dialog>
+  </div>
+
   <div>
     <button (click)="isDialogWithInnerButtonOpen = true">
       open Dialog with inner button right (default)
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 7620038..14bb663 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -20,7 +20,7 @@ export class DialogSampleComponent {
   isDialogWithInnerButtonOpen = false;
   isDialogWithOuterButtonLeftOpen = false;
   isDialogWithInnerButtonLeftOpen = false;
-  isDialogWithStyledButtonOpen = false;
+  isDialogWithFallbackButtonOpen = false;
   isDialogWithShadowOpen = false;
   isFullscreenDialogOpen = false;
   isDialogWithOverflowOpen = false;
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index f702eee..e9554b2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -45,6 +45,8 @@ All of these options are getting recognized by `(close)`. So just set your varia
 
 The close button is not shown by default. To show it, set `[showCloseButton]` to `true`.
 
+> If you set `[showCloseButton]` to `true` but don't provide a close button, a default button will be shown in the top right corner outside the container.
+
 If you want to show it, you can decide if the button is placed inside or outside your Container.
 By default, it is placed outside. To place it within the content set `[innerCloseButton]` to `true`.
 
@@ -65,8 +67,6 @@ Here is an example:
 
 > You can define the space of the actual content to the Close Button (inside) and the space of the Container to the Close Button (outside). Look at the [Content Section - Spacing](#content) to see how.
 
-[comment]: <> (TODO: ADJUST WHEN NG-CONTENT HAS DEFAULT OPTION! The placeholder transparent button positioned in the top right corner with a black cross in it.)
-
 ### Backdrop
 
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index ba0d47e..4a75425 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -113,3 +113,15 @@
   width: calc(100% - (var(--sk-dialog-margin) * 2));
   max-width: calc(100svw - (var(--sk-dialog-margin) * 2));
 }
+
+.fallback-close-button {
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index cf6f05c..6b030bc 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -20,7 +20,33 @@
           'sk-dialog-inner-close-button-left': innerCloseButton() && closeButtonPosition() === CloseButtonPosition.Left,
       }"
     >
-      <ng-content select="[closeButton]"></ng-content>
+      <ng-content select="[closeButton]">
+        <button (click)="close.emit()" class="fallback-close-button">
+          <svg
+            width="15px"
+            height="15px"
+            viewBox="0 0 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="0"
+              y1="100"
+              x2="100"
+              y2="0"
+              stroke-width="15"
+              stroke="black"
+            />
+            <line
+              x1="0"
+              y1="0"
+              x2="100"
+              y2="100"
+              stroke-width="15"
+              stroke="black"
+            />
+          </svg>
+        </button>
+      </ng-content>
     </div>
     }
     <div

From f8525319345d024c687e55f3750b71537a8138e5 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 26 Aug 2024 16:39:19 +0200
Subject: [PATCH 2/2] refactor: add example for inner close button

---
 .../dialog-sample.component.html              | 19 ++++++++++++++++++-
 .../dialog-sample/dialog-sample.component.ts  |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 4b6ad44..fb6bbb6 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -71,7 +71,24 @@
       [showCloseButton]="true"
     >
       <div>
-        here comes some content. This is a dialog with the a fallback Close
+        here comes some content. This is a dialog with the fallback Close
+        Button. (when the user don't have a close button)
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithInnerFallbackButtonOpen = true">
+      open Dialog with fallback inner button right
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithInnerFallbackButtonOpen"
+      (close)="isDialogWithInnerFallbackButtonOpen = false"
+      [showCloseButton]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with the inner fallback Close
         Button. (when the user don't have a close button)
       </div>
     </sk-dialog>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 14bb663..6f26fb3 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -21,6 +21,7 @@ export class DialogSampleComponent {
   isDialogWithOuterButtonLeftOpen = false;
   isDialogWithInnerButtonLeftOpen = false;
   isDialogWithFallbackButtonOpen = false;
+  isDialogWithInnerFallbackButtonOpen = false;
   isDialogWithShadowOpen = false;
   isFullscreenDialogOpen = false;
   isDialogWithOverflowOpen = false;