Rtl updates 2 (#6340)

src/components/data-table/ha-data-table.ts

@@ -604,10 +604,8 @@ export class HaDataTable extends LitElement {
         padding-right: 0;
         width: 56px;
       }
-      [dir="rtl"] .mdc-data-table__header-cell--checkbox,
+      :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
-      .mdc-data-table__header-cell--checkbox[dir="rtl"],
+      :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
-      [dir="rtl"] .mdc-data-table__cell--checkbox,
-      .mdc-data-table__cell--checkbox[dir="rtl"] {
         /* @noflip */
         padding-left: 0;
         /* @noflip */
@@ -641,8 +639,7 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__cell--numeric {
         text-align: right;
       }
-      [dir="rtl"] .mdc-data-table__cell--numeric,
+      :host([dir="rtl"]) .mdc-data-table__cell--numeric {
-      .mdc-data-table__cell--numeric[dir="rtl"] {
         /* @noflip */
         text-align: left;
       }
@@ -660,18 +657,33 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
         text-align: center;
       }
+
       .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
       .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
         text-align: left;
       }
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
+        text-align: right;
+      }
 
       .mdc-data-table__cell--icon:first-child ha-icon {
         margin-left: 8px;
       }
+      :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
+        margin-left: auto;
+        margin-right: 8px;
+      }
 
       .mdc-data-table__cell--icon:first-child state-badge {
         margin-right: -8px;
       }
+      :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge {
+        margin-right: auto;
+        margin-left: -8px;
+      }
 
       .mdc-data-table__header-cell--icon-button,
       .mdc-data-table__cell--icon-button {
@@ -689,12 +701,22 @@ export class HaDataTable extends LitElement {
         width: 64px;
         padding-left: 16px;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:first-child,
+      :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
+        padding-left: auto;
+        padding-right: 16px;
+      }
 
       .mdc-data-table__header-cell--icon-button:last-child,
       .mdc-data-table__cell--icon-button:last-child {
         width: 64px;
         padding-right: 16px;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
+      :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
+        padding-right: auto;
+        padding-left: 16px;
+      }
 
       .mdc-data-table__cell--icon-button a {
         color: var(--secondary-text-color);
@@ -712,8 +734,7 @@ export class HaDataTable extends LitElement {
         text-transform: inherit;
         text-align: left;
       }
-      [dir="rtl"] .mdc-data-table__header-cell,
+      :host([dir="rtl"]) .mdc-data-table__header-cell {
-      .mdc-data-table__header-cell[dir="rtl"] {
         /* @noflip */
         text-align: right;
       }
@@ -725,11 +746,15 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
         text-align: left;
       }
-      [dir="rtl"] .mdc-data-table__header-cell--numeric,
+      :host([dir="rtl"]) .mdc-data-table__header-cell--numeric {
-      .mdc-data-table__header-cell--numeric[dir="rtl"] {
         /* @noflip */
         text-align: left;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover,
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
+        text-align: right;
+      }
 
       /* custom from here */
 
@@ -750,6 +775,10 @@ export class HaDataTable extends LitElement {
         position: relative;
         left: 0px;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell span {
+        left: auto;
+        right: 0px;
+      }
 
       .mdc-data-table__header-cell.sortable {
         cursor: pointer;
@@ -757,6 +786,9 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__header-cell > * {
         transition: left 0.2s ease;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell > * {
+        transition: right 0.2s ease;
+      }
       .mdc-data-table__header-cell ha-icon {
         top: -3px;
         position: absolute;
@@ -764,14 +796,35 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__header-cell.not-sorted ha-icon {
         left: -20px;
       }
+      :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
+        right: -20px;
+      }
       .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
       .mdc-data-table__header-cell.sortable.not-sorted:hover span {
         left: 24px;
       }
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable:not(.not-sorted)
+        span,
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable.not-sorted:hover
+        span {
+        left: auto;
+        right: 24px;
+      }
       .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
       .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
         left: 12px;
       }
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable:not(.not-sorted)
+        ha-icon,
+      :host([dir="rtl"])
+        .mdc-data-table__header-cell.sortable:hover.not-sorted
+        ha-icon {
+        left: auto;
+        right: 12px;
+      }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
         padding: 0 16px;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -20,6 +20,7 @@ import type {
 import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
 import type { PageNavigation } from "./hass-tabs-subpage";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 
 @customElement("hass-tabs-subpage-data-table")
 export class HaTabsSubpageDataTable extends LitElement {
@@ -158,6 +159,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .hasFab=${this.hasFab}
           .id=${this.id}
           .noDataText=${this.noDataText}
+          .dir=${computeRTLDirection(this.hass)}
         >
           ${!this.narrow
             ? html`

src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts

@@ -16,6 +16,7 @@ import "../../../../../components/entity/ha-state-icon";
 import type { Cluster } from "../../../../../data/zha";
 import type { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
+import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 
 export interface ClusterRowData extends Cluster {
   cluster?: Cluster;
@@ -91,6 +92,7 @@ export class ZHAClustersDataTable extends LitElement {
         .id=${"cluster_id"}
         selectable
         auto-height
+        .dir=${computeRTLDirection(this.hass)}
       ></ha-data-table>
     `;
   }

src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts

@@ -21,6 +21,7 @@ import type {
   ZHAEntityReference,
 } from "../../../../../data/zha";
 import type { HomeAssistant } from "../../../../../types";
+import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 
 export interface DeviceEndpointRowData extends DataTableRowData {
   id: string;
@@ -147,6 +148,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
         .data=${this._deviceEndpoints(this.deviceEndpoints)}
         .selectable=${this.selectable}
         auto-height
+        .dir=${computeRTLDirection(this.hass)}
       ></ha-data-table>
     `;
   }

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -14,7 +14,10 @@ import memoizeOne from "memoize-one";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { computeRTL } from "../../../../common/util/compute_rtl";
+import {
+  computeRTL,
+  computeRTLDirection,
+} from "../../../../common/util/compute_rtl";
 import "../../../../components/data-table/ha-data-table";
 import type {
   DataTableColumnContainer,
@@ -171,6 +174,7 @@ export class HuiUnusedEntities extends LitElement {
         .id=${"entity_id"}
         selectable
         @selection-changed=${this._handleSelectionChanged}
+        .dir=${computeRTLDirection(this.hass)}
       ></ha-data-table>
 
       ${this._selectedEntities.length

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

@@ -76,7 +76,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
               <div class="flex">
                 <ha-slider
                   .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                  .dir="${computeRTLDirection(this.hass!)}"
+                  .dir=${computeRTLDirection(this.hass!)}
                   .step="${Number(stateObj.attributes.step)}"
                   .min="${Number(stateObj.attributes.min)}"
                   .max="${Number(stateObj.attributes.max)}"