Clean up generic row (#5022)

src/data/sensor.ts

@@ -1 +1,2 @@
 export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
+export const SENSOR_DEVICE_CLASS_TIMESTAMP = "timestamp";

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

@@ -45,7 +45,7 @@ class MoreInfoCamera extends LitElement {
 
     return html`
       <ha-camera-stream
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .stateObj="${this.stateObj}"
         showcontrols
       ></ha-camera-stream>

src/dialogs/notifications/notification-item.ts

@@ -36,13 +36,13 @@ export class HuiNotificationItem extends LitElement {
     return "entity_id" in this.notification
       ? html`
           <configurator-notification-item
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .notification="${this.notification}"
           ></configurator-notification-item>
         `
       : html`
           <persistent-notification-item
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .notification="${this.notification}"
           ></persistent-notification-item>
         `;

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

@@ -39,7 +39,7 @@ export class HuiPersistentNotificationItem extends LitElement {
         <div class="time">
           <span>
             <ha-relative-time
-              .hass="${this.hass}"
+              .hass=${this.hass}
               .datetime="${this.notification.created_at}"
             ></ha-relative-time>
             <paper-tooltip

src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts

@@ -26,7 +26,7 @@ export default class HaNumericStateCondition extends LitElement {
       <ha-entity-picker
         .value="${entity_id}"
         @value-changed="${this._entityPicked}"
-        .hass="${this.hass}"
+        .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
       <paper-input

src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts

@@ -42,7 +42,7 @@ export default class HaNumericStateTrigger extends LitElement {
       <ha-entity-picker
         .value="${entity_id}"
         @value-changed="${this._entityPicked}"
-        .hass="${this.hass}"
+        .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
       <paper-input

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -118,7 +118,7 @@ export class CloudGooglePref extends LitElement {
         </div>
         <div class="card-actions">
           <ha-call-api-button
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .disabled="${!google_enabled}"
             @hass-api-called=${this._syncEntitiesCalled}
             path="cloud/google_actions/sync"

src/panels/config/zha/zha-add-devices-page.ts

@@ -84,7 +84,7 @@ class ZHAAddDevicesPage extends LitElement {
                 ${this._showHelp
                   ? html`
                       <ha-service-description
-                        .hass="${this.hass}"
+                        .hass=${this.hass}
                         domain="zha"
                         service="permit"
                         class="help-text"

src/panels/config/zha/zha-cluster-attributes.ts

@@ -165,7 +165,7 @@ export class ZHAClusterAttributes extends LitElement {
             `
           : ""}
         <ha-call-service-button
-          .hass="${this.hass}"
+          .hass=${this.hass}
           domain="zha"
           service="set_zigbee_cluster_attribute"
           .serviceData="${this._setAttributeServiceData}"
@@ -177,7 +177,7 @@ export class ZHAClusterAttributes extends LitElement {
         ${this.showHelp
           ? html`
               <ha-service-description
-                .hass="${this.hass}"
+                .hass=${this.hass}
                 domain="zha"
                 service="set_zigbee_cluster_attribute"
                 class="help-text2"

src/panels/config/zha/zha-cluster-commands.ts

@@ -127,7 +127,7 @@ export class ZHAClusterCommands extends LitElement {
                 </div>
                 <div class="card-actions">
                   <ha-call-service-button
-                    .hass="${this.hass}"
+                    .hass=${this.hass}
                     domain="zha"
                     service="issue_zigbee_cluster_command"
                     .serviceData="${this._issueClusterCommandServiceData}"
@@ -139,7 +139,7 @@ export class ZHAClusterCommands extends LitElement {
                   ${this._showHelp
                     ? html`
                         <ha-service-description
-                          .hass="${this.hass}"
+                          .hass=${this.hass}
                           domain="zha"
                           service="issue_zigbee_cluster_command"
                           class="help-text2"

src/panels/config/zha/zha-device-card.ts

@@ -299,7 +299,7 @@ class ZHADeviceCard extends LitElement {
                     : ""}
 
                   <ha-call-service-button
-                    .hass="${this.hass}"
+                    .hass=${this.hass}
                     domain="zha"
                     service="remove"
                     .confirmation=${this.hass!.localize(
@@ -331,7 +331,7 @@ class ZHADeviceCard extends LitElement {
                         ${this.showHelp
                           ? html`
                               <ha-service-description
-                                .hass="${this.hass}"
+                                .hass=${this.hass}
                                 domain="zha"
                                 service="permit"
                                 class="help-text2"

src/panels/config/zha/zha-device-page.ts

@@ -59,14 +59,14 @@ export class ZHADevicePage extends LitElement {
       >
         <zha-node
           .isWide="${this.isWide}"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .device=${this.device}
         ></zha-node>
 
         ${this.device && this.device.device_type !== "Coordinator"
           ? html`
               <zha-clusters
-                .hass="${this.hass}"
+                .hass=${this.hass}
                 .isWide="${this.isWide}"
                 .selectedDevice="${this.device}"
                 @zha-cluster-selected="${this._onClusterSelected}"
@@ -75,14 +75,14 @@ export class ZHADevicePage extends LitElement {
                 ? html`
                     <zha-cluster-attributes
                       .isWide="${this.isWide}"
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .selectedNode="${this.device}"
                       .selectedCluster="${this._selectedCluster}"
                     ></zha-cluster-attributes>
 
                     <zha-cluster-commands
                       .isWide="${this.isWide}"
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .selectedNode="${this.device}"
                       .selectedCluster="${this._selectedCluster}"
                     ></zha-cluster-commands>
@@ -92,7 +92,7 @@ export class ZHADevicePage extends LitElement {
                 ? html`
                     <zha-device-binding-control
                       .isWide="${this.isWide}"
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .selectedDevice="${this.device}"
                       .bindableDevices="${this._bindableDevices}"
                     ></zha-device-binding-control>
@@ -103,7 +103,7 @@ export class ZHADevicePage extends LitElement {
                     <zha-group-binding-control
                       .isWide="${this.isWide}"
                       .narrow="${this.narrow}"
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .selectedDevice="${this.device}"
                       .groups="${this._groups}"
                     ></zha-group-binding-control>

src/panels/lovelace/components/hui-action-editor.ts

@@ -106,7 +106,7 @@ export class HuiActionEditor extends LitElement {
       ${this.config && this.config.action === "call-service"
         ? html`
             <ha-service-picker
-              .hass="${this.hass}"
+              .hass=${this.hass}
               .value="${this._service}"
               .configValue="${"service"}"
               @value-changed="${this._valueChanged}"

src/panels/lovelace/components/hui-entity-editor.ts

@@ -46,7 +46,7 @@ export class HuiEntityEditor extends LitElement {
           return html`
             <div class="entity">
               <ha-entity-picker
-                .hass="${this.hass}"
+                .hass=${this.hass}
                 .value="${entityConf.entity}"
                 .index="${index}"
                 @change="${this._valueChanged}"
@@ -70,7 +70,7 @@ export class HuiEntityEditor extends LitElement {
           `;
         })}
         <ha-entity-picker
-          .hass="${this.hass}"
+          .hass=${this.hass}
           @change="${this._addEntity}"
         ></ha-entity-picker>
       </div>

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

@@ -32,7 +32,7 @@ class HuiGenericEntityRow extends LitElement {
 
   @property() public config?: EntitiesCardEntityConfig;
 
-  @property() public showSecondary: boolean = true;
+  @property() public secondaryText?: string;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.config) {
@@ -59,6 +59,8 @@ class HuiGenericEntityRow extends LitElement {
       (this.config.entity &&
         !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this.config.entity)));
 
+    const hasSecondary = this.secondaryText || this.config.secondary_info;
+
     return html`
       <state-badge
         class=${classMap({
@@ -76,16 +78,11 @@ class HuiGenericEntityRow extends LitElement {
         })}
         tabindex=${ifDefined(pointer ? "0" : undefined)}
       ></state-badge>
-      <div class="flex">
       <div
-          class=${classMap({
+        class="info ${classMap({
-            info: true,
           pointer,
-            padName: this.showSecondary && !this.config.secondary_info,
+          "text-content": !hasSecondary,
-            padSecondary: Boolean(
+        })}"
-              !this.showSecondary || this.config.secondary_info
-            ),
-          })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this.config!.hold_action),
@@ -93,12 +90,11 @@ class HuiGenericEntityRow extends LitElement {
         })}
       >
         ${this.config.name || computeStateName(stateObj)}
-          <div class="secondary">
+        ${hasSecondary
-            ${!this.showSecondary
           ? html`
-                  <slot name="secondary"></slot>
+              <div class="secondary">
-                `
+                ${this.secondaryText ||
-              : this.config.secondary_info === "entity-id"
+                this.config.secondary_info === "entity-id"
                   ? stateObj.entity_id
                   : this.config.secondary_info === "last-changed"
                   ? html`
@@ -119,16 +115,22 @@ class HuiGenericEntityRow extends LitElement {
                         "ui.panel.lovelace.cards.entities.never_triggered"
                       )
                   : ""}
+                }
               </div>
+            `
+          : ""}
       </div>
-
       <slot></slot>
-      </div>
     `;
   }
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
+    toggleAttribute(
+      this,
+      "no-secondary",
+      !this.secondaryText && !this.config?.secondary_info
+    );
     if (changedProps.has("hass")) {
       toggleAttribute(this, "rtl", computeRTL(this.hass!));
     }
@@ -143,16 +145,10 @@ class HuiGenericEntityRow extends LitElement {
       :host {
         display: flex;
         align-items: center;
-      }
+        flex-direction: row;
-      .flex {
-        flex: 1;
-        margin-left: 16px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        min-width: 0;
       }
       .info {
+        margin-left: 16px;
         flex: 1 0 60px;
       }
       .info,
@@ -161,6 +157,11 @@ class HuiGenericEntityRow extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      :host([no-secondary]) .text-content,
+      :host([no-secondary]) ::slotted(.text-content) {
+        position: relative;
+        top: 2px;
+      }
       .flex ::slotted(*) {
         margin-left: 8px;
         min-width: 0;
@@ -192,12 +193,6 @@ class HuiGenericEntityRow extends LitElement {
       .pointer {
         cursor: pointer;
       }
-      .padName {
-        padding: 12px 0px;
-      }
-      .padSecondary {
-        padding: 4px 0px;
-      }
     `;
   }
 }

src/panels/lovelace/components/hui-image.ts

@@ -133,7 +133,7 @@ export class HuiImage extends LitElement {
         ${this.cameraImage && this.cameraView === "live"
           ? html`
               <ha-camera-stream
-                .hass="${this.hass}"
+                .hass=${this.hass}
                 .stateObj="${cameraObj}"
               ></ha-camera-stream>
             `

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -99,7 +99,7 @@ export class HuiDialogEditCard extends LitElement {
           ${this._cardConfig === undefined
             ? html`
                 <hui-card-picker
-                  .hass="${this.hass}"
+                  .hass=${this.hass}
                   @config-changed="${this._handleCardPicked}"
                 ></hui-card-picker>
               `
@@ -107,14 +107,14 @@ export class HuiDialogEditCard extends LitElement {
                 <div class="content">
                   <div class="element-editor">
                     <hui-card-editor
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .value="${this._cardConfig}"
                       @config-changed="${this._handleConfigChanged}"
                     ></hui-card-editor>
                   </div>
                   <div class="element-preview">
                     <hui-card-preview
-                      .hass="${this.hass}"
+                      .hass=${this.hass}
                       .config="${this._cardConfig}"
                       class=${this._error ? "blur" : ""}
                     ></hui-card-preview>

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -78,7 +78,7 @@ export class HuiDialogSuggestCard extends LitElement {
                   ${this._cardConfig.map(
                     (cardConfig) => html`
                       <hui-card-preview
-                        .hass="${this.hass}"
+                        .hass=${this.hass}
                         .config="${cardConfig}"
                       ></hui-card-preview>
                     `

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -75,7 +75,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["alarm_control_panel"]'
@@ -120,7 +120,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
           </paper-listbox>
         </paper-dropdown-menu>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -110,7 +110,7 @@ export class HuiButtonCardEditor extends LitElement
         )} (${this.hass.localize(
       "ui.panel.lovelace.editor.card.config.optional"
     )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           @change="${this._valueChanged}"
@@ -170,7 +170,7 @@ export class HuiButtonCardEditor extends LitElement
           ><div class="suffix" slot="suffix">px</div>
           </paper-input>
           <hui-theme-select-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"
@@ -185,7 +185,7 @@ export class HuiButtonCardEditor extends LitElement
           )} (${this.hass.localize(
       "ui.panel.lovelace.editor.card.config.optional"
     )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
@@ -197,7 +197,7 @@ export class HuiButtonCardEditor extends LitElement
           )} (${this.hass.localize(
       "ui.panel.lovelace.editor.card.config.optional"
     )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -85,7 +85,7 @@ export class HuiEntitiesCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"
@@ -100,7 +100,7 @@ export class HuiEntitiesCardEditor extends LitElement
         >
       </div>
       <hui-entity-editor
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .entities="${this._configEntities}"
         @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -86,7 +86,7 @@ export class HuiGaugeCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["sensor"]'
@@ -114,7 +114,7 @@ export class HuiGaugeCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -99,7 +99,7 @@ export class HuiGlanceCardEditor extends LitElement
         ></paper-input>
         <div class="side-by-side">
           <hui-theme-select-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"
@@ -144,7 +144,7 @@ export class HuiGlanceCardEditor extends LitElement
         </div>
       </div>
       <hui-entity-editor
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .entities="${this._configEntities}"
         @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>

src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts

@@ -109,7 +109,7 @@ export class HuiHistoryGraphCardEditor extends LitElement
           ></paper-input>
         </div>
         <hui-entity-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .entities="${this._configEntities}"
           @entities-changed="${this._valueChanged}"
         ></hui-entity-editor>

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -70,7 +70,7 @@ export class HuiLightCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["light"]'
@@ -103,7 +103,7 @@ export class HuiLightCardEditor extends LitElement
         </div>
 
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -121,7 +121,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
           )}</ha-switch
         >
         <hui-entity-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .entities="${this._configEntities}"
           @entities-changed="${this._entitiesValueChanged}"
         ></hui-entity-editor>
@@ -135,7 +135,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
             inputLabel=${this.hass.localize(
               "ui.panel.lovelace.editor.card.map.source"
             )}
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._geo_location_sources}"
             .configValue="${"geo_location_sources"}"
             @value-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -81,7 +81,7 @@ export class HuiMarkdownCardEditor extends LitElement
           spellcheck="false"
         ></paper-textarea>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -49,7 +49,7 @@ export class HuiMediaControlCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["media_player"]'

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -86,7 +86,7 @@ export class HuiPictureCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
@@ -98,14 +98,14 @@ export class HuiPictureCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-theme-select-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -116,7 +116,7 @@ export class HuiPictureEntityCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           @change="${this._valueChanged}"
@@ -148,7 +148,7 @@ export class HuiPictureEntityCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._camera_image}"
           .configValue=${"camera_image"}
           @change="${this._valueChanged}"
@@ -213,7 +213,7 @@ export class HuiPictureEntityCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
@@ -225,14 +225,14 @@ export class HuiPictureEntityCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-theme-select-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -147,7 +147,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._camera_image}"
           .configValue=${"camera_image"}
           @change="${this._valueChanged}"
@@ -193,7 +193,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           @change="${this._valueChanged}"
@@ -206,7 +206,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
@@ -218,7 +218,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
@@ -226,12 +226,12 @@ export class HuiPictureGlanceCardEditor extends LitElement
           ></hui-action-editor>
         </div>
         <hui-entity-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .entities="${this._configEntities}"
           @entities-changed="${this._valueChanged}"
         ></hui-entity-editor>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts

@@ -64,7 +64,7 @@ export class HuiPlantStatusCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["plant"]'
@@ -82,7 +82,7 @@ export class HuiPlantStatusCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -93,7 +93,7 @@ export class HuiSensorCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["sensor"]'
@@ -167,7 +167,7 @@ export class HuiSensorCardEditor extends LitElement
         </div>
         <div class="side-by-side">
           <hui-theme-select-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -72,7 +72,7 @@ export class HuiShoppingListEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts

@@ -101,7 +101,7 @@ export class HuiStackCardEditor extends LitElement
                 `
               : html`
                   <hui-card-picker
-                    .hass="${this.hass}"
+                    .hass=${this.hass}
                     @config-changed="${this._handleCardPicked}"
                   ></hui-card-picker>
                 `

src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts

@@ -63,7 +63,7 @@ export class HuiThermostatCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["climate"]'
@@ -81,7 +81,7 @@ export class HuiThermostatCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -62,7 +62,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
           include-domains='["weather"]'
@@ -80,7 +80,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .value="${this._theme}"
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -65,7 +65,7 @@ export class HuiDialogEditLovelace extends LitElement {
             "ui.panel.lovelace.editor.edit_lovelace.explanation"
           )}
           <hui-lovelace-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._config}"
             @lovelace-config-changed="${this._ConfigChanged}"
           ></hui-lovelace-editor

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -40,7 +40,7 @@ export class HuiDialogEditView extends LitElement {
     }
     return html`
       <hui-edit-view
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .lovelace="${this._params.lovelace}"
         .viewIndex="${this._params.viewIndex}"
       >

src/panels/lovelace/editor/view-editor/hui-edit-view.ts

@@ -110,7 +110,7 @@ export class HuiEditView extends LitElement {
         content = html`
           <hui-view-editor
             .isNew=${this.viewIndex === undefined}
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._config}"
             @view-config-changed="${this._viewConfigChanged}"
           ></hui-view-editor>
@@ -119,7 +119,7 @@ export class HuiEditView extends LitElement {
       case "tab-badges":
         content = html`
           <hui-entity-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .entities="${this._badges}"
             @entities-changed="${this._badgesChanged}"
           ></hui-entity-editor>

src/panels/lovelace/elements/hui-image-element.ts

@@ -43,7 +43,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
 
     return html`
       <hui-image
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .entity="${this._config.entity}"
         .image="${this._config.image}"
         .stateImage="${this._config.state_image}"

src/panels/lovelace/elements/hui-service-button-element.ts

@@ -52,7 +52,7 @@ export class HuiServiceButtonElement extends LitElement
 
     return html`
       <ha-call-service-button
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .domain="${this._domain}"
         .service="${this._service}"
         .serviceData="${this._config.service_data}"

src/panels/lovelace/elements/hui-state-badge-element.ts

@@ -59,7 +59,7 @@ export class HuiStateBadgeElement extends LitElement
 
     return html`
       <ha-state-label-badge
-        .hass="${this.hass}"
+        .hass=${this.hass}
         .state="${stateObj}"
         .title="${this._config.title === undefined
           ? computeStateName(stateObj)

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -60,7 +60,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
 
     return html`
       <state-badge
-        .stateObj="${stateObj}"
+        .stateObj=${stateObj}
         .title="${computeTooltip(this.hass, this._config)}"
         @action=${this._handleAction}
         .actionHandler=${actionHandler({

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

@@ -55,10 +55,10 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-climate-state
-          .hass="${this.hass}"
+          .hass=${this.hass}
-          .stateObj="${stateObj}"
+          .stateObj=${stateObj}
         ></ha-climate-state>
       </hui-generic-entity-row>
     `;

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

@@ -56,18 +56,18 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${isTiltOnly(stateObj)
           ? html`
               <ha-cover-tilt-controls
-                .hass="${this.hass}"
+                .hass=${this.hass}
-                .stateObj="${stateObj}"
+                .stateObj=${stateObj}
               ></ha-cover-tilt-controls>
             `
           : html`
               <ha-cover-controls
-                .hass="${this.hass}"
+                .hass=${this.hass}
-                .stateObj="${stateObj}"
+                .stateObj=${stateObj}
               ></ha-cover-controls>
             `}
       </hui-generic-entity-row>

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

@@ -54,16 +54,16 @@ class HuiGroupEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${this._computeCanToggle(stateObj.attributes.entity_id)
           ? html`
               <ha-entity-toggle
-                .hass="${this.hass}"
+                .hass=${this.hass}
-                .stateObj="${stateObj}"
+                .stateObj=${stateObj}
               ></ha-entity-toggle>
             `
           : html`
-              <div>
+              <div class="text-content">
                 ${computeStateDisplay(
                   this.hass!.localize,
                   stateObj,

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

@@ -56,7 +56,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.attributes.has_date
           ? html`
               <ha-date-input

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

@@ -74,8 +74,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div>
         ${stateObj.attributes.mode === "slider"
           ? html`
               <div class="flex">
@@ -110,7 +109,6 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                 id="input"
               ></paper-input>
             `}
-        </div>
       </hui-generic-entity-row>
     `;
   }

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

@@ -53,7 +53,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <paper-input
           no-label-float
           .value="${stateObj.state}"

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

@@ -53,8 +53,8 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button @click="${this._callService}">
+        <mwc-button @click="${this._callService}" class="text-content">
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -64,13 +64,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row
-        .hass="${this.hass}"
+        .hass=${this.hass}
-        .config="${this._config}"
+        .config=${this._config}
-        .showSecondary=${false}
+        .secondaryText=${this._computeMediaTitle(stateObj)}
       >
         ${OFF_STATES.includes(stateObj.state)
           ? html`
-              <div>
+              <div class="text-content">
                 ${this.hass!.localize(`state.media_player.${stateObj.state}`) ||
                   this.hass!.localize(`state.default.${stateObj.state}`) ||
                   stateObj.state}
@@ -96,7 +96,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
                     `
                   : ""}
               </div>
-              <div slot="secondary">${this._computeMediaTitle(stateObj)}</div>
             `}
       </hui-generic-entity-row>
     `;

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

@@ -55,20 +55,11 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        ${stateObj.attributes.can_cancel
+        <mwc-button @click="${this._callService}" class="text-content">
-          ? html`
-              <ha-entity-toggle
-                .hass="${this.hass}"
-                .stateObj="${stateObj}"
-              ></ha-entity-toggle>
-            `
-          : html`
-              <mwc-button @click="${this._callService}">
           ${this._config.action_name ||
             this.hass!.localize("ui.card.scene.activate")}
         </mwc-button>
-            `}
       </hui-generic-entity-row>
     `;
   }

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

@@ -54,16 +54,16 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.attributes.can_cancel
           ? html`
               <ha-entity-toggle
-                .hass="${this.hass}"
+                .hass=${this.hass}
-                .stateObj="${stateObj}"
+                .stateObj=${stateObj}
               ></ha-entity-toggle>
             `
           : html`
-              <mwc-button @click="${this._callService}">
+              <mwc-button @click=${this._callService} class="text-content">
                 ${this._config.action_name ||
                   this.hass!.localize("ui.card.script.execute")}
               </mwc-button>

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

@@ -17,6 +17,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceRow, EntityConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
 
 interface SensorEntityConfig extends EntityConfig {
   format?: "relative" | "date" | "time" | "datetime";
@@ -59,16 +60,17 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div>
+        <div class="text-content">
-          ${stateObj.attributes.device_class === "timestamp" &&
+          ${stateObj.attributes.device_class ===
+            SENSOR_DEVICE_CLASS_TIMESTAMP &&
           stateObj.state !== "unavailable" &&
           stateObj.state !== "unknown"
             ? html`
                 <hui-timestamp-display
-                  .hass="${this.hass}"
+                  .hass=${this.hass}
-                  .ts="${new Date(stateObj.state)}"
+                  .ts=${new Date(stateObj.state)}
-                  .format="${this._config.format}"
+                  .format=${this._config.format}
                 ></hui-timestamp-display>
               `
             : computeStateDisplay(

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

@@ -54,8 +54,8 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div>
+        <div class="text-content">
           ${computeStateDisplay(
             this.hass!.localize,
             stateObj,

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

@@ -70,8 +70,8 @@ class HuiTimerEntityRow extends LitElement {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div>${this._computeDisplay(stateObj)}</div>
+        <div class="text-content">${this._computeDisplay(stateObj)}</div>
       </hui-generic-entity-row>
     `;
   }

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

@@ -53,16 +53,16 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.state === "on" || stateObj.state === "off"
           ? html`
               <ha-entity-toggle
-                .hass="${this.hass}"
+                .hass=${this.hass}
-                .stateObj="${stateObj}"
+                .stateObj=${stateObj}
               ></ha-entity-toggle>
             `
           : html`
-              <div>
+              <div class="text-content">
                 ${computeStateDisplay(
                   this.hass!.localize,
                   stateObj,

src/panels/lovelace/ha-panel-lovelace.ts

@@ -125,7 +125,7 @@ class LovelacePanel extends LitElement {
     if (state === "yaml-editor") {
       return html`
         <hui-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
           .lovelace="${this.lovelace}"
           .closeEditor="${this._closeEditor}"
         ></hui-editor>

src/panels/lovelace/hui-editor.ts

@@ -92,7 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
             mode="yaml"
             autofocus
             .rtl=${computeRTL(this.hass)}
-            .hass="${this.hass}"
+            .hass=${this.hass}
             @value-changed="${this._yamlChanged}"
             @editor-save="${this._handleSave}"
           >