From 7bced283274fbe3e0a849a158e59cab9e7592f3c Mon Sep 17 00:00:00 2001
From: Yosi Levy <yosilevy@gmail.com>
Date: Fri, 17 Jul 2020 06:57:42 +0300
Subject: [PATCH] RTL fix for range list

---
 src/components/ha-date-range-picker.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 66bb2f1eae..83560cafca 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -8,6 +8,7 @@ import {
   TemplateResult,
   PropertyValues,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { HomeAssistant } from "../types";
 import { mdiCalendar } from "@mdi/js";
 import { formatDateTime } from "../common/datetime/format_date_time";
@@ -17,6 +18,7 @@ import "./ha-svg-icon";
 import "@polymer/paper-input/paper-input";
 import "@material/mwc-list/mwc-list";
 import "./date-range-picker";
+import { computeRTL } from "../common/util/compute_rtl";
 
 export interface DateRangePickerRanges {
   [key: string]: [Date, Date];
@@ -36,12 +38,17 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: Boolean }) private _hour24format = false;
 
+  @property({ type: Boolean }) private _rtl = false;
+
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
       if (!oldHass || oldHass.language !== this.hass.language) {
         this._hour24format = this._compute24hourFormat();
       }
+      if (!oldHass || computeRTL(oldHass) !== computeRTL(this.hass)) {
+        this._rtl = computeRTL(this.hass);
+      }
     }
   }
 
@@ -76,7 +83,10 @@ export class HaDateRangePicker extends LitElement {
           ></paper-input>
         </div>
         ${this.ranges
-          ? html`<div slot="ranges" class="date-range-ranges">
+          ? html`<div
+              slot="ranges"
+              class=${classMap({ "date-range-ranges": true, rtl: this._rtl })}
+            >
               <mwc-list @click=${this._setDateRange}>
                 ${Object.entries(this.ranges).map(
                   ([name, dates]) => html`<mwc-list-item
@@ -161,6 +171,9 @@ export class HaDateRangePicker extends LitElement {
       .date-range-ranges {
         border-right: 1px solid var(--divider-color);
       }
+      .date-range-ranges.rtl {
+        direction: rtl;
+      }
 
       @media only screen and (max-width: 800px) {
         .date-range-ranges {