RTL support and translation

package.json

@@ -18,7 +18,7 @@
     "custom-card-helpers": "^1.7.1",
     "home-assistant-js-websocket": "^5.10.0",
     "lit": "^2.0.0-rc.2",
-    "lovelace-timer-bar-card": "^1.2.0"
+    "lovelace-timer-bar-card": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",

src/helpers.ts

@@ -1,9 +1,5 @@
 import { HassEntity } from "./types";
 
-export function capitalize(word: string) {
-  return word[0].toUpperCase() + word.substring(1);
-}
-
 export type EntitiesFunc = (predicate: (id: string) => boolean) => HassEntity[];
 
 const MANUAL_ID = 99;

src/opensprinkler-card.ts

@@ -1,12 +1,12 @@
 import { LitElement, html, TemplateResult } from 'lit';
 import { customElement, state, property } from "lit/decorators";
-import { HomeAssistant, hasConfigOrEntityChanged, LovelaceCardEditor } from 'custom-card-helpers';
+import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { PropertyValues } from 'lit-element';
 import { UnsubscribeFunc } from 'home-assistant-js-websocket';
 
 import { fillConfig, TimerBarEntityRow } from 'lovelace-timer-bar-card/src/timer-bar-entity-row';
 import { EntityRegistryEntry, subscribeEntityRegistry } from './ha_entity_registry';
-import type { ControlType, OpensprinklerCardConfig, HassEntity } from './types';
+import type { OpensprinklerCardConfig, HassEntity } from './types';
 import "./editor";
 import "./opensprinkler-generic-entity-row";
 import "./opensprinkler-more-info-dialog";
@@ -86,16 +86,17 @@ export class OpensprinklerCard extends LitElement {
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (!this.config) return false;
+    if (changedProps.has('config')) return true;
 
     const oldHass = changedProps.get('hass') as HomeAssistant | undefined;
     if (!oldHass) return true;
 
     for (const entity of this._matchingEntities(() => true)) {
       if (oldHass.states[entity.entity_id] !== entity) return true;
     }
-    if (this.config.input_number &&
-      oldHass.states[this.config.input_number.entity] !== this.hass?.states[this.config.input_number.entity])
-      return true;
+
+    const input = this.config.input_number?.entity;
+    if (input && oldHass.states[input] !== this.hass?.states[input]) return true;
 
     return false;
   }

src/opensprinkler-control.ts

@@ -3,8 +3,10 @@ import { LitElement, css, html, TemplateResult, PropertyValues } from 'lit';
 import { customElement, state, property } from "lit/decorators";
 import { HomeAssistant } from 'custom-card-helpers';
 
+import { localize } from 'lovelace-timer-bar-card/src/timer-bar-entity-row';
+
 import {
-  capitalize, EntitiesFunc, isController, isEnabled, isProgram, isStation,
+  EntitiesFunc, isController, isEnabled, isProgram, isStation,
   osName, stateActivated, stateStoppable } from './helpers';
 import { ControlType, HassEntity } from './types';
 
@@ -57,7 +59,7 @@ export class OpensprinklerControl extends LitElement {
     if (this.type === ControlType.Station) {
       if (this.entity.state === 'idle' && !enabled) return 'Disabled';
       if (this.entity.state === 'once_program') return 'Once Program';
-      return capitalize(this.entity.state);
+      return localize(this.hass, this.entity.state, this.entity);
     }
     if (this.type === ControlType.Program) {
       if (status === 'off' && !enabled) return 'Disabled';
@@ -126,13 +128,13 @@ export class OpensprinklerControl extends LitElement {
       .button {
         color: var(--secondary-text-color);
         --mdc-icon-button-size: 40px;
-        margin-right: -8px;
-        margin-left: 4px;
+        margin-inline-end: -8px;
+        margin-inline-start: 4px;
       }
 
       mwc-circular-progress {
-        margin-left: 8px;
-        margin-right: -4px;
+        margin-inline-start: 8px;
+        margin-inline-end: -4px;
       }
     `;
   }

src/opensprinkler-generic-entity-row.ts

@@ -52,7 +52,7 @@ class OpensprinklerGenericEntityRow extends LitElement {
         label="Open more info"
         @click=${this._handleClick}
         tabindex="0"
-        style="margin-right: -8px"
+        style="margin-inline-end: -8px"
       >
         <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
       </mwc-icon-button>

src/opensprinkler-more-info-dialog.ts

@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent, HomeAssistant } from "custom-card-helpers";
+import { computeRTL, fireEvent, HomeAssistant } from "custom-card-helpers";
 import { ControlType, OpensprinklerCardConfig, HassEntity } from "./types";
 import "./opensprinkler-state";
 import "./opensprinkler-control";
@@ -43,13 +43,16 @@ export class MoreInfoDialog extends LitElement {
       return html``;
     }
 
+    const style = computeRTL(this.hass) ? 'direction: rtl' : '';
+
     return html`
       <ha-dialog
         open
         @closed=${this.closeDialog}
         .heading=${true}
         hideActions
         data-domain=${"opensprinkler"}
+        style=${style}
       >
         <div slot="heading" class="heading">
           <ha-header-bar>