From 26f9e6bda3f2644db8fe2823dfe63a6345cddc27 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 7 May 2020 08:49:51 +0200
Subject: [PATCH] MOBILE-3380 placeholder: Flip arrow based on language
 direction

---
 src/components/empty-box/core-empty-box.html                | 2 +-
 src/components/empty-box/empty-box.ts                       | 1 +
 src/components/icon/icon.ts                                 | 5 +++++
 src/components/split-view/placeholder/core-placeholder.html | 2 +-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/empty-box/core-empty-box.html b/src/components/empty-box/core-empty-box.html
index f131769f5..09a592094 100644
--- a/src/components/empty-box/core-empty-box.html
+++ b/src/components/empty-box/core-empty-box.html
@@ -1,7 +1,7 @@
 <div class="core-empty-box" [class.core-empty-box-inline]="(!image && !icon) || inline">
     <div class="core-empty-box-content" padding>
         <img *ngIf="image && !icon" [src]="image" role="presentation">
-        <core-icon *ngIf="icon" [name]="icon"></core-icon>
+        <core-icon *ngIf="icon" [name]="icon" [flipRtl]="flipIconRtl"></core-icon>
         <p *ngIf="message" [class.padding-top]="image || icon">{{ message }}</p>
         <ng-content></ng-content>
     </div>
diff --git a/src/components/empty-box/empty-box.ts b/src/components/empty-box/empty-box.ts
index 5c693c84c..e9480d0de 100644
--- a/src/components/empty-box/empty-box.ts
+++ b/src/components/empty-box/empty-box.ts
@@ -32,6 +32,7 @@ export class CoreEmptyBoxComponent {
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
     @Input() inline?: boolean; // If this has to be shown inline instead of occupying whole page.
                                // If image or icon is not supplied, it's true by default.
+    @Input() flipIconRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false.
 
     constructor() {
         // Nothing to do.
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 9bab34f9b..72ac16416 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -40,6 +40,7 @@ export class CoreIconComponent implements OnChanges, OnDestroy {
     @Input('fixed-width') fixedWidth: string;
 
     @Input('label') ariaLabel?: string;
+    @Input() flipRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false.
 
     protected element: HTMLElement;
     protected newElement: HTMLElement;
@@ -106,6 +107,10 @@ export class CoreIconComponent implements OnChanges, OnDestroy {
             this.newElement.classList.add('icon-slash');
         }
 
+        if (this.flipRtl) {
+            this.newElement.classList.add('core-icon-dir-flip');
+        }
+
         oldElement.parentElement.replaceChild(this.newElement, oldElement);
     }
 
diff --git a/src/components/split-view/placeholder/core-placeholder.html b/src/components/split-view/placeholder/core-placeholder.html
index e62e3e7b1..83991ff49 100644
--- a/src/components/split-view/placeholder/core-placeholder.html
+++ b/src/components/split-view/placeholder/core-placeholder.html
@@ -5,5 +5,5 @@
 </ion-header>
 
 <ion-content>
-    <core-empty-box icon="arrow-dropleft" [message]="'core.emptysplit' | translate"></core-empty-box>
+    <core-empty-box icon="arrow-dropleft" [message]="'core.emptysplit' | translate" [flipIconRtl]="true"></core-empty-box>
 </ion-content>