Capitalize relative time strings (#10165)

hassio/src/components/hassio-card-content.ts

@@ -1,7 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../src/components/ha-relative-time";
 import "../../../src/components/ha-svg-icon";
 import { HomeAssistant } from "../../../src/types";
 
@@ -19,8 +18,6 @@ class HassioCardContent extends LitElement {
 
   @property() public topbarClass?: string;
 
-  @property() public datetime?: string;
-
   @property() public iconTitle?: string;
 
   @property() public iconClass?: string;
@@ -56,15 +53,6 @@ class HassioCardContent extends LitElement {
             /* treat as available when undefined */
             this.available === false ? " (Not available)" : ""
           }
-          ${this.datetime
-            ? html`
-                <ha-relative-time
-                  .hass=${this.hass}
-                  class="addition"
-                  .datetime=${this.datetime}
-                ></ha-relative-time>
-              `
-            : undefined}
         </div>
       </div>
     `;
@@ -106,9 +94,6 @@ class HassioCardContent extends LitElement {
         height: 2.4em;
         line-height: 1.2em;
       }
-      ha-relative-time {
-        display: block;
-      }
       .icon_image img {
         max-height: 40px;
         max-width: 40px;

src/common/string/capitalize-first-letter.ts

@@ -0,0 +1,2 @@
+export const capitalizeFirstLetter = (str: string) =>
+  str.charAt(0).toUpperCase() + str.slice(1);

src/components/entity/state-info.ts

@@ -38,6 +38,7 @@ class StateInfo extends LitElement {
                 id="last_changed"
                 .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
+                capitalize
               ></ha-relative-time>
               <paper-tooltip animation-delay="0" for="last_changed">
                 <div>
@@ -92,7 +93,6 @@ class StateInfo extends LitElement {
       state-badge {
         float: left;
       }
-
       :host([rtl]) state-badge {
         float: right;
       }

src/components/ha-relative-time.ts

@@ -1,6 +1,7 @@
 import { PropertyValues, ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
+import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-relative-time")
@@ -9,6 +10,8 @@ class HaRelativeTime extends ReactiveElement {
 
   @property({ attribute: false }) public datetime?: string | Date;
 
+  @property({ type: Boolean }) public capitalize = false;
+
   private _interval?: number;
 
   public disconnectedCallback(): void {
@@ -55,7 +58,10 @@ class HaRelativeTime extends ReactiveElement {
     if (!this.datetime) {
       this.innerHTML = this.hass.localize("ui.components.relative_time.never");
     } else {
-      this.innerHTML = relativeTime(new Date(this.datetime), this.hass.locale);
+      const relTime = relativeTime(new Date(this.datetime), this.hass.locale);
+      this.innerHTML = this.capitalize
+        ? capitalizeFirstLetter(relTime)
+        : relTime;
     }
   }
 }

src/dialogs/more-info/controls/more-info-automation.ts

@@ -25,6 +25,7 @@ class MoreInfoAutomation extends LitElement {
         <ha-relative-time
           .hass=${this.hass}
           .datetime=${this.stateObj.attributes.last_triggered}
+          capitalize
         ></ha-relative-time>
       </div>
 

src/dialogs/more-info/controls/more-info-script.ts

@@ -28,6 +28,7 @@ class MoreInfoScript extends LitElement {
               <ha-relative-time
                 .hass=${this.hass}
                 .datetime=${this.stateObj.attributes.last_triggered}
+                capitalize
               ></ha-relative-time>
             `
           : this.hass.localize("ui.components.relative_time.never")}

src/dialogs/more-info/controls/more-info-sun.ts

@@ -73,9 +73,6 @@ class MoreInfoSun extends LitElement {
         display: inline-block;
         white-space: nowrap;
       }
-      ha-relative-time::first-letter {
-        text-transform: lowercase;
-      }
       hr {
         border-color: var(--divider-color);
         border-bottom: none;

src/dialogs/notifications/persistent-notification-item.ts

@@ -31,6 +31,7 @@ export class HuiPersistentNotificationItem extends LitElement {
             <ha-relative-time
               .hass=${this.hass}
               .datetime=${this.notification.created_at}
+              capitalize
             ></ha-relative-time>
             <paper-tooltip animation-delay="0">
               ${this._computeTooltip(this.hass, this.notification)}

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts

@@ -16,6 +16,7 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../../types";
 import { fileDownload } from "../../../../../util/file_download";
 import { configTabs } from "./zwave_js-config-router";
+import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
 
 @customElement("zwave_js-logs")
 class ZWaveJSLogs extends SubscribeMixin(LitElement) {
@@ -149,7 +150,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
     setZWaveJSLogLevel(this.hass!, this.configEntryId, selected);
     this._textarea!.value += `${this.hass.localize(
       "ui.panel.config.zwave_js.logs.log_level_changed",
-      { level: selected.charAt(0).toUpperCase() + selected.slice(1) }
+      { level: capitalizeFirstLetter(selected) }
     )}\n`;
   }
 

src/panels/config/tags/ha-config-tags.ts

@@ -79,6 +79,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
                   ? html`<ha-relative-time
                       .hass=${this.hass}
                       .datetime=${tag.last_scanned_datetime}
+                      capitalize
                     ></ha-relative-time>`
                   : this.hass.localize("ui.panel.config.tag.never_scanned")}
               </div>`
@@ -96,6 +97,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
               ? html`<ha-relative-time
                   .hass=${this.hass}
                   .datetime=${last_scanned_datetime}
+                  capitalize
                 ></ha-relative-time>`
               : this.hass.localize("ui.panel.config.tag.never_scanned")}
           `,

src/panels/logbook/ha-logbook.ts

@@ -210,6 +210,7 @@ class HaLogbook extends LitElement {
                 <ha-relative-time
                   .hass=${this.hass}
                   .datetime=${item.when}
+                  capitalize
                 ></ha-relative-time>
                 ${item.domain === "automation" &&
                 item.context_id! in this.traceContexts

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

@@ -95,6 +95,7 @@ class HuiGenericEntityRow extends LitElement {
                       <ha-relative-time
                         .hass=${this.hass}
                         .datetime=${stateObj.last_changed}
+                        capitalize
                       ></ha-relative-time>
                     `
                   : this.config.secondary_info === "last-updated"
@@ -102,6 +103,7 @@ class HuiGenericEntityRow extends LitElement {
                       <ha-relative-time
                         .hass=${this.hass}
                         .datetime=${stateObj.last_updated}
+                        capitalize
                       ></ha-relative-time>
                     `
                   : this.config.secondary_info === "last-triggered"
@@ -110,6 +112,7 @@ class HuiGenericEntityRow extends LitElement {
                         <ha-relative-time
                           .hass=${this.hass}
                           .datetime=${stateObj.attributes.last_triggered}
+                          capitalize
                         ></ha-relative-time>
                       `
                     : this.hass.localize(

src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts

@@ -103,6 +103,7 @@ export class HuiEntityPickerTable extends LitElement {
         <ha-relative-time
           .hass=${this.hass!}
           .datetime=${lastChanged}
+          capitalize
         ></ha-relative-time>
       `,
     };

src/util/hass-attributes-util.ts

@@ -3,6 +3,7 @@ import { until } from "lit/directives/until";
 import checkValidDate from "../common/datetime/check_valid_date";
 import { formatDate } from "../common/datetime/format_date";
 import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
+import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
 import { isDate } from "../common/string/is_date";
 import { isTimestamp } from "../common/string/is_timestamp";
 import { HomeAssistant } from "../types";
@@ -159,7 +160,7 @@ export function formatAttributeName(value: string): string {
     .replace(/\bip\b/g, "IP")
     .replace(/\bmac\b/g, "MAC")
     .replace(/\bgps\b/g, "GPS");
-  return value.charAt(0).toUpperCase() + value.slice(1);
+  return capitalizeFirstLetter(value);
 }
 
 export function formatAttributeValue(