Move computeRTL to a separate file and add RTL support in state-info (#2165)

* RTL support (POC)

* restore yarn.lock

* Move computeRTL to a separate file and add RTL support in state-info

* Move import to top after failed CI

* Replace var to const

* Change HassEntity to HomeAssistant object

* Support RTL in state info and state card display

* Support for RTL in more-info-controls:

* Update src/common/util/compute_rtl.ts

Co-Authored-By: rhayun <ronen.hayun@gmail.com>

* remove default from export

* prefix all computeRTL with underscroe for privately uses

src/components/entity/state-info.js

@@ -4,6 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../ha-relative-time";
 import "./state-badge";
 import computeStateName from "../../common/entity/compute_state_name";
+import { computeRTL } from "../../common/util/compute_rtl";
 
 class StateInfo extends PolymerElement {
   static get template() {
@@ -25,10 +26,20 @@ class StateInfo extends PolymerElement {
           float: left;
         }
 
+        :host([rtl]) state-badge {
+          float: right;
+        }
+
         .info {
           margin-left: 56px;
         }
 
+        :host([rtl]) .info {
+          margin-right: 56px;
+          margin-left: 0;
+          text-align: right;
+        }
+
         .name {
           @apply --paper-font-common-nowrap;
           color: var(--primary-text-color);
@@ -87,12 +98,21 @@ class StateInfo extends PolymerElement {
       hass: Object,
       stateObj: Object,
       inDialog: Boolean,
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "computeRTL(hass)",
+      },
     };
   }
 
   computeStateName(stateObj) {
     return computeStateName(stateObj);
   }
+
+  computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 
 customElements.define("state-info", StateInfo);