RTL arrow problems (#3467)

* Updated style check since load sequence must have changed

* Refactored to timeout

* Added comment

src/components/ha-icon-next.ts

@@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
 
 export class HaIconNext extends HaIcon {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-right"
-        : "hass:chevron-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-right"
+          : "hass:chevron-left";
+    }, 100);
   }
 }
 

src/components/ha-icon-prev.ts

@@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
 
 export class HaIconPrev extends HaIcon {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-left"
-        : "hass:chevron-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-left"
+          : "hass:chevron-right";
+    }, 100);
   }
 }
 

src/components/ha-paper-icon-button-arrow-next.ts

@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:arrow-right"
-        : "hass:arrow-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:arrow-right"
+          : "hass:arrow-left";
+    }, 100);
   }
 }
 

src/components/ha-paper-icon-button-arrow-prev.ts

@@ -12,17 +12,19 @@ export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
   public hassio?: boolean;
 
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? this.hassio
-          ? "hassio:arrow-left"
-          : "hass:arrow-left"
-        : this.hassio
-        ? "hassio:arrow-right"
-        : "hass:arrow-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? this.hassio
+            ? "hassio:arrow-left"
+            : "hass:arrow-left"
+          : this.hassio
+          ? "hassio:arrow-right"
+          : "hass:arrow-right";
+    }, 100);
   }
 }
 

src/components/ha-paper-icon-button-next.ts

@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonNext extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-right"
-        : "hass:chevron-left";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-right"
+          : "hass:chevron-left";
+    }, 100);
   }
 }
 

src/components/ha-paper-icon-button-prev.ts

@@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonPrev extends paperIconButtonClass {
   public connectedCallback() {
-    this.icon =
-      window.getComputedStyle(this).direction === "ltr"
-        ? "hass:chevron-left"
-        : "hass:chevron-right";
-
-    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-left"
+          : "hass:chevron-right";
+    }, 100);
   }
 }