RTL fixes

src/components/dialogs/hacs-form-dialog.ts

@@ -26,6 +26,8 @@ class HacsFromDialog extends LitElement {
 
   @state() _errors?: Record<string, string>;
 
+  @state() _forceLTR: boolean = false;
+
   _errorSubscription: any;
 
   public async showDialog(dialogParams: HacsFormDialogParams): Promise<void> {
@@ -38,6 +40,7 @@ class HacsFromDialog extends LitElement {
       },
       HacsDispatchEvent.ERROR,
     );
+    this._forceLTR = dialogParams.forceLTR;
     await this.updateComplete;
   }
 
@@ -64,6 +67,7 @@ class HacsFromDialog extends LitElement {
           ? createCloseHeading(this.hass, this._dialogParams.title)
           : this._dialogParams.title}
         @closed=${this.closeDialog}
+        class="${this._forceLTR ? "force-ltr" : ""}"
       >
         <div>
           ${this._dialogParams.description || nothing}
@@ -151,6 +155,9 @@ class HacsFromDialog extends LitElement {
         margin-bottom: -8px;
         margin-top: 4px;
       }
+      .force-ltr {
+        direction: ltr;
+      }
     `;
   }
 }

src/components/dialogs/show-hacs-dialog.ts

@@ -18,6 +18,7 @@ export interface HacsFormDialogParams extends BaseHacsDialogParams {
   saveLabel?: string;
   destructive?: boolean;
   description?: HTMLTemplateResult | string;
+  forceLTR: boolean;
   computeLabelCallback?: (schema: any, data: HaFormDataContainer) => string;
   computeHelper?: (schema: any) => string | undefined;
   computeError?: (schema: any, error) => string;
@@ -33,7 +34,7 @@ export interface HacsCustomRepositoriesDialogParams extends BaseHacsDialogParams
 
 export const showHacsFormDialog = (
   element: HTMLElement,
-  dialogParams: HacsFormDialogParams
+  dialogParams: HacsFormDialogParams,
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "hacs-form-dialog",
@@ -44,7 +45,7 @@ export const showHacsFormDialog = (
 
 export const showHacsDownloadDialog = (
   element: HTMLElement,
-  dialogParams: HacsDownloadDialogParams
+  dialogParams: HacsDownloadDialogParams,
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "hacs-download-dialog",
@@ -55,7 +56,7 @@ export const showHacsDownloadDialog = (
 
 export const showHacsCustomRepositoriesDialog = (
   element: HTMLElement,
-  dialogParams: HacsCustomRepositoriesDialogParams
+  dialogParams: HacsCustomRepositoriesDialogParams,
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "hacs-custom-repositories-dialog",

src/dashboards/hacs-dashboard.ts

@@ -258,6 +258,7 @@ export class HacsDashboard extends LitElement {
               description: html`<ha-markdown
                 .content=${aboutHacsmarkdownContent(this.hacs)}
               ></ha-markdown>`,
+              forceLTR: true,
             });
           }}
         >

src/dashboards/hacs-repository-dashboard.ts

@@ -360,6 +360,7 @@ export class HacsRepositoryDashboard extends LitElement {
           margin: auto;
           padding: 8px;
           max-width: 1536px;
+          direction: ltr;
         }
 
         ha-chip-set {

src/hacs.ts

@@ -9,6 +9,10 @@ import { computeLocalize } from "../homeassistant-frontend/src/common/translatio
 import { getTranslation } from "../homeassistant-frontend/src/util/common-translation";
 import { fetchHacsInfo, getRepositories, websocketSubscription } from "./data/websocket";
 import { HacsDispatchEvent } from "./data/common";
+import {
+  computeRTLDirection,
+  computeDirectionStyles,
+} from "../homeassistant-frontend/src/common/util/compute_rtl";
 
 export class HacsElement extends ProvideHassLitMixin(LitElement) {
   @property({ attribute: false }) public hacs: Partial<Hacs> = { localize: () => "" };
@@ -43,30 +47,30 @@ export class HacsElement extends ProvideHassLitMixin(LitElement) {
     websocketSubscription(
       this.hass,
       () => this._updateProperties("configuration"),
-      HacsDispatchEvent.CONFIG
+      HacsDispatchEvent.CONFIG,
     );
 
     websocketSubscription(
       this.hass,
       () => this._updateProperties("status"),
-      HacsDispatchEvent.STATUS
+      HacsDispatchEvent.STATUS,
     );
 
     websocketSubscription(
       this.hass,
       () => this._updateProperties("status"),
-      HacsDispatchEvent.STAGE
+      HacsDispatchEvent.STAGE,
     );
 
     websocketSubscription(
       this.hass,
       () => this._updateProperties("repositories"),
-      HacsDispatchEvent.REPOSITORY
+      HacsDispatchEvent.REPOSITORY,
     );
 
     this.hass.connection.subscribeEvents(
       async () => this._updateProperties("lovelace"),
-      "lovelace_updated"
+      "lovelace_updated",
     );
 
     this._updateHacs({
@@ -76,12 +80,17 @@ export class HacsElement extends ProvideHassLitMixin(LitElement) {
     this._updateProperties();
 
     this.addEventListener("update-hacs", (e) =>
-      this._updateHacs((e as any).detail as Partial<Hacs>)
+      this._updateHacs((e as any).detail as Partial<Hacs>),
     );
   }
 
   private async _initializeLocalize() {
     const { language, data } = await getTranslation(null, this._language);
+
+    const dir = computeRTLDirection(this.hass);
+    window.document.documentElement.setAttribute("dir", dir);
+    computeDirectionStyles(dir === "rtl", this);
+
     this._updateHacs({
       localize: await computeLocalize<HacsLocalizeKeys>(this.constructor.prototype, language, {
         [language]: data,