From 6d0a4f3aaa2d3af3ae67009c683a6ea9a842a836 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 30 Dec 2024 12:32:55 +0000
Subject: [PATCH 1/3] fix: pop-up close button position for RTL languages

---
 .../components/layout/popup/popup.component.html    | 13 ++++++++++---
 .../components/layout/popup/popup.component.scss    | 10 +++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index 1b46e0a87e..78617b8757 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -6,9 +6,16 @@
   [attr.data-variant]="props.variant ? props.variant : null"
 >
   <div class="popup-container">
-    <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
-      <ion-icon slot="icon-only" name="close"></ion-icon>
-    </div>
+    @if (props.showCloseButton) {
+      <div
+        (click)="dismiss()"
+        class="close-button"
+        fill="clear"
+        [attr.data-language-direction]="templateTranslateService.languageDirection()"
+      >
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </div>
+    }
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
       @if (props.popupText) {
         <!-- Use a text component row to display popup text -->
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.scss b/src/app/shared/components/template/components/layout/popup/popup.component.scss
index 69f38c2587..2a949441e3 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.scss
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.scss
@@ -21,6 +21,10 @@
     .close-button {
       top: 10px;
       right: 10px;
+      &[data-language-direction~="rtl"] {
+        right: unset;
+        left: 10px;
+      }
     }
   }
   .popup-content {
@@ -44,7 +48,7 @@
   .close-button {
     position: absolute;
     top: 18px;
-    right: 19px;
+    right: 18px;
     background: white;
     width: 40px;
     height: 40px;
@@ -58,5 +62,9 @@
     z-index: 1;
     box-shadow: var(--ion-default-box-shadow);
     color: var(--ion-color-primary);
+    &[data-language-direction~="rtl"] {
+      right: unset;
+      left: 18px;
+    }
   }
 }

From f317e3508c345eca82e6d3aa11400f58a878bcd4 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 30 Dec 2024 23:46:50 -0800
Subject: [PATCH 2/3] review: pop-up-button-alt

---
 .../components/layout/popup/popup.component.html    |  8 +-------
 .../components/layout/popup/popup.component.scss    | 13 +++----------
 .../components/layout/popup/popup.component.ts      |  8 +-------
 3 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index 78617b8757..b1ece88241 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -2,17 +2,11 @@
   class="popup-backdrop"
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
-  [dir]="templateTranslateService.languageDirection()"
   [attr.data-variant]="props.variant ? props.variant : null"
 >
   <div class="popup-container">
     @if (props.showCloseButton) {
-      <div
-        (click)="dismiss()"
-        class="close-button"
-        fill="clear"
-        [attr.data-language-direction]="templateTranslateService.languageDirection()"
-      >
+      <div (click)="dismiss()" class="close-button" fill="clear">
         <ion-icon slot="icon-only" name="close"></ion-icon>
       </div>
     }
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.scss b/src/app/shared/components/template/components/layout/popup/popup.component.scss
index 2a949441e3..85f132c6da 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.scss
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.scss
@@ -20,11 +20,7 @@
     }
     .close-button {
       top: 10px;
-      right: 10px;
-      &[data-language-direction~="rtl"] {
-        right: unset;
-        left: 10px;
-      }
+      inset-inline-end: 10px;
     }
   }
   .popup-content {
@@ -48,7 +44,6 @@
   .close-button {
     position: absolute;
     top: 18px;
-    right: 18px;
     background: white;
     width: 40px;
     height: 40px;
@@ -62,9 +57,7 @@
     z-index: 1;
     box-shadow: var(--ion-default-box-shadow);
     color: var(--ion-color-primary);
-    &[data-language-direction~="rtl"] {
-      right: unset;
-      left: 18px;
-    }
+    // align 18px from end (varies with rtl/ltr direction)
+    inset-inline-end: 18px;
   }
 }
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts
index ef6a5ae5b7..aba38cab27 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.ts
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -2,7 +2,6 @@ import { Component, Input } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { FlowTypes } from "../../../models";
 import { TemplateContainerComponent } from "../../../template-container.component";
-import { TemplateTranslateService } from "../../../services/template-translate.service";
 
 @Component({
   templateUrl: "./popup.component.html",
@@ -15,12 +14,7 @@ import { TemplateTranslateService } from "../../../services/template-translate.s
 export class TemplatePopupComponent {
   @Input() props: ITemplatePopupComponentProps;
 
-  constructor(
-    private modalCtrl: ModalController,
-    // HACK: Since pop-ups can be launched outside of main app container (e.g. as part of launch actions),
-    // handle RTL language support directly in this component
-    public templateTranslateService: TemplateTranslateService
-  ) {}
+  constructor(private modalCtrl: ModalController) {}
 
   /**
    * When templates emit completed/uncompleted value from standalone popup close the popup

From fd15e1f3ca0c20370045e29d54105d0436fb1cbb Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Tue, 31 Dec 2024 10:24:54 +0000
Subject: [PATCH 3/3] chore: reinstate explicit RTL support in popup component

---
 .../template/components/layout/popup/popup.component.html | 1 +
 .../template/components/layout/popup/popup.component.ts   | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index b1ece88241..8f8a85570d 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -3,6 +3,7 @@
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
   [attr.data-variant]="props.variant ? props.variant : null"
+  [dir]="templateTranslateService.languageDirection()"
 >
   <div class="popup-container">
     @if (props.showCloseButton) {
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts
index aba38cab27..ef6a5ae5b7 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.ts
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { FlowTypes } from "../../../models";
 import { TemplateContainerComponent } from "../../../template-container.component";
+import { TemplateTranslateService } from "../../../services/template-translate.service";
 
 @Component({
   templateUrl: "./popup.component.html",
@@ -14,7 +15,12 @@ import { TemplateContainerComponent } from "../../../template-container.componen
 export class TemplatePopupComponent {
   @Input() props: ITemplatePopupComponentProps;
 
-  constructor(private modalCtrl: ModalController) {}
+  constructor(
+    private modalCtrl: ModalController,
+    // HACK: Since pop-ups can be launched outside of main app container (e.g. as part of launch actions),
+    // handle RTL language support directly in this component
+    public templateTranslateService: TemplateTranslateService
+  ) {}
 
   /**
    * When templates emit completed/uncompleted value from standalone popup close the popup