paper-slider RTL fix (#2476)

* paper-slider RTL fix

* CSS enclosed in ``

* Removed attr reflection and fixed style (forgot RTL reference)

src/components/ha-slider.js

@@ -1,8 +1,28 @@
 import "@polymer/paper-slider";
 
 const PaperSliderClass = customElements.get("paper-slider");
+let subTemplate;
 
 class HaSlider extends PaperSliderClass {
+  static get template() {
+    if (!subTemplate) {
+      subTemplate = PaperSliderClass.template.cloneNode(true);
+
+      const superStyle = subTemplate.content.querySelector("style");
+
+      // append style to add mirroring of pin in RTL
+      superStyle.appendChild(
+        document.createTextNode(`
+          :host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {
+            -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
+            transform: scale(1) translate(0, -17px) scaleX(-1) !important;
+            }
+        `)
+      );
+    }
+    return subTemplate;
+  }
+
   _calcStep(value) {
     if (!this.step) {
       return parseFloat(value);

src/panels/lovelace/entity-rows/hui-input-number-entity-row.js

@@ -6,6 +6,7 @@ import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/ha-slider";
+import { computeRTL } from "../../../common/util/compute_rtl";
 
 class HuiInputNumberEntityRow extends mixinBehaviors(
   [IronResizableBehavior],
@@ -51,6 +52,7 @@ class HuiInputNumberEntityRow extends mixinBehaviors(
         >
           <div class="flex">
             <ha-slider
+              dir="[[_rtl]]"
               min="[[_min]]"
               max="[[_max]]"
               value="{{_value}}"
@@ -103,6 +105,10 @@ class HuiInputNumberEntityRow extends mixinBehaviors(
       },
       _step: Number,
       _value: Number,
+      _rtl: {
+        type: String,
+        computed: "_computeRTLDirection(hass)",
+      },
     };
   }
 
@@ -174,5 +180,9 @@ class HuiInputNumberEntityRow extends mixinBehaviors(
       entity_id: this._stateObj.entity_id,
     });
   }
+
+  _computeRTLDirection(hass) {
+    return computeRTL(hass) ? "rtl" : "ltr";
+  }
 }
 customElements.define("hui-input-number-entity-row", HuiInputNumberEntityRow);