Energy panel/cards - RTL fixes (#13171)

src/components/chart/ha-chart-base.ts

@@ -376,6 +376,7 @@ export default class HaChartBase extends LitElement {
       .chartTooltip .title {
         text-align: center;
         font-weight: 500;
+        direction: ltr;
       }
       .chartTooltip .footer {
         font-weight: 500;

src/panels/config/energy/components/styles.ts

@@ -8,6 +8,9 @@ export const energyCardStyles = css`
     height: 32px;
     width: 32px;
     margin-right: 8px;
+    margin-inline-end: 8px;
+    margin-inline-start: initial;
+    direction: var(--direction);
   }
   h3 {
     margin-top: 24px;
@@ -24,6 +27,9 @@ export const energyCardStyles = css`
   .row ha-icon,
   .row img {
     margin-right: 16px;
+    margin-inline-end: 16px;
+    margin-inline-start: initial;
+    direction: var(--direction);
   }
   .row img {
     height: 24px;

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -699,6 +699,7 @@ class HuiEnergyDistrubutionCard
     }
     .card-content {
       position: relative;
+      direction: ltr;
     }
     .lines {
       position: absolute;

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -900,6 +900,7 @@ export class HuiEnergySourcesTableCard
       .mdc-data-table__cell {
         color: var(--primary-text-color);
         border-bottom-color: var(--divider-color);
+        text-align: var(--float-start);
       }
       .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
         background-color: rgba(var(--rgb-primary-text-color), 0.04);
@@ -925,6 +926,9 @@ export class HuiEnergySourcesTableCard
       .cell-bullet {
         width: 32px;
         padding-right: 0;
+        padding-inline-end: 0;
+        padding-inline-start: 16px;
+        direction: var(--direction);
       }
       .bullet {
         border-width: 1px;
@@ -933,6 +937,9 @@ export class HuiEnergySourcesTableCard
         height: 16px;
         width: 32px;
       }
+      .mdc-data-table__cell--numeric {
+        direction: ltr;
+      }
     `;
   }
 }

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -356,6 +356,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         height: 50%;
         top: 45%;
         left: 50%;
+        direction: ltr;
       }
 
       #set-values {

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -1,10 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import {
+import { mdiCompare, mdiCompareRemove } from "@mdi/js";
-  mdiChevronLeft,
-  mdiChevronRight,
-  mdiCompare,
-  mdiCompareRemove,
-} from "@mdi/js";
 import {
   addDays,
   addMonths,
@@ -35,9 +30,12 @@ import {
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import "../../../components/ha-button-toggle-group";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-button-prev";
+import "../../../components/ha-icon-button-next";
 import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, ToggleButton } from "../../../types";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 @customElement("hui-energy-period-selector")
 export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@@ -116,20 +114,18 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
                 this._endDate || new Date(),
                 this.hass.locale
               )}`}
-          <ha-icon-button
+          <ha-icon-button-prev
             .label=${this.hass.localize(
               "ui.panel.lovelace.components.energy_period_selector.previous"
             )}
             @click=${this._pickPrevious}
-            .path=${mdiChevronLeft}
+          ></ha-icon-button-prev>
-          ></ha-icon-button>
+          <ha-icon-button-next
-          <ha-icon-button
             .label=${this.hass.localize(
               "ui.panel.lovelace.components.energy_period_selector.next"
             )}
             @click=${this._pickNext}
-            .path=${mdiChevronRight}
+          ></ha-icon-button-next>
-          ></ha-icon-button>
           <mwc-button dense outlined @click=${this._pickToday}>
             ${this.hass.localize(
               "ui.panel.lovelace.components.energy_period_selector.today"
@@ -142,6 +138,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             .active=${this._period}
             dense
             @value-changed=${this._handleView}
+            .dir=${computeRTLDirection(this.hass)}
           ></ha-button-toggle-group>
           ${this.narrow
             ? html`<ha-icon-button
@@ -291,7 +288,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
-        align-items: flex-end;
+        align-items: center;
       }
       :host([narrow]) .period {
         margin-bottom: 8px;

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -156,7 +156,7 @@ class HuiGenericEntityRow extends LitElement {
         : html``}
       ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
         ? html`<div
-            class="text-content ${classMap({
+            class="text-content value ${classMap({
               pointer,
             })}"
             @action=${this._handleAction}
@@ -236,6 +236,9 @@ class HuiGenericEntityRow extends LitElement {
       .state.rtl {
         text-align: left;
       }
+      .value {
+        direction: ltr;
+      }
     `;
   }
 }

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -62,7 +62,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <div
-          class="text-content"
+          class="text-content value"
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasHold: hasAction(this._config.hold_action),
@@ -99,6 +99,9 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
       div {
         text-align: right;
       }
+      .value {
+        direction: ltr;
+      }
     `;
   }
 }